还没开始

　　好久没写博客了，再来开坑。

正文

　　Transform3D：“这个和CSS的3D好像的说”

　　PerspectiveTransform3D：这个用来指定容器是否具有3D空间，都是放在根容器下面的。

　　注意Depth：默认1000，如过设置过大会导致子元素超出容器

<Grid Background="{StaticResource ProcurePageBackground}">

        <Grid.Transform3D>

            <PerspectiveTransform3D Depth="" />

        </Grid.Transform3D>

</Grid>

　　CompositeTransform3D:需要做3D变换的子元素上设定。

<Border BorderBrush="Black"

              BorderThickness=""

              Background="#FF0B5B29"

              Loaded="Border_Loaded">

                <Border.Transform3D>

                    <CompositeTransform3D ></CompositeTransform3D>

                </Border.Transform3D>

                <TextBlock Text="" />

</Border>

　　按着上面的设定一个基本的3D变换就设定完成了

TIPS：注意这玩意有个坑，注意Z-Index！注意Z-Index！注意Z-Index！在XAML上后面的元素会覆盖前面的元素，so，如果你做立方体什么的要自己

计算Z-Index以免后面的元素覆盖前面的元素

实例

注意：3D空间的正负方向，Y轴左转是正，右转是负，这个自己试下就知道了。

实现代码：

 <Storyboard x:Name="InSB">

            <DoubleAnimation Storyboard.TargetName="LeftGrid"

                             Storyboard.TargetProperty="(UIElement.Transform3D).(CompositeTransform3D.RotationY)"

                             Duration="0:0:3"

                             To=""

                             EnableDependentAnimation="True"></DoubleAnimation>

 </Storyboard>

<Grid Background="{StaticResource ProcurePageBackground}">

        <Grid.Transform3D>

            <PerspectiveTransform3D Depth="" />

        </Grid.Transform3D>

 　　　　<Grid Name="LeftGrid" Loaded="LeftGrid_Loaded">

            <Grid.Transform3D>

                <CompositeTransform3D/>

            </Grid.Transform3D>

            <Border BorderBrush="Red"

                    BorderThickness=""

                    Background="#FF11321E">

                <TextBlock Text="" />

            </Border>

            <Border BorderBrush="Black"

                    BorderThickness=""

                    Background="#FF0B5B29"

                    Loaded="Border_Loaded">

                <Border.Transform3D>

                    <CompositeTransform3D />

                </Border.Transform3D>

                <TextBlock Text="" />

            </Border>
　　　　　　</Grid>

</Grid>

注意下面Border_Loaded中temp.TranslateX和temp.RotationY的顺序，你可以自己互换看看有什么不同。

private void LeftGrid_Loaded(object sender, RoutedEventArgs e)

        {

            var temp = LeftGrid.Transform3D as CompositeTransform3D;

            temp.CenterZ = -centePos;

            temp.CenterX = centePos;

        }

private void Border_Loaded(object sender, RoutedEventArgs e)

        {

            (sender as Border).Width = WidthGrid;

            var temp = (sender as Border).Transform3D as CompositeTransform3D;

            temp.TranslateX = WidthGrid;

            temp.RotationY = -;

        }

double centePos;

private double WidthGrid;

public MainPage()

        {

            this.InitializeComponent();

            centePos = (this.ActualWidth / ) / ;

            WidthGrid = this.ActualWidth / ;

            this.SizeChanged += (s, e) =>

            {

                centePos = (e.NewSize.Width / ) / ;

                WidthGrid = e.NewSize.Width / ;

            };

        }

巴特西

[UWP-小白日记16]UWP中的3D变换API

还没开始

正文

实例

最新文章

热门文章