原文:
[UWP-小白日记16]UWP中的3D变换API
还没开始
好久没写博客了，再来开坑。
正文
Transform3D：“这个和CSS的3D好像的说”
PerspectiveTransform3D：这个用来指定容器是否具有3D空间，都是放在根容器下面的。
注意Depth：默认1000，如过设置过大会导致子元素超出容器
<Grid Background="{StaticResource ProcurePageBackground}"> <Grid.Transform3D> <PerspectiveTransform3D Depth="4000" /> </Grid.Transform3D> </Grid>
CompositeTransform3D:需要做3D变换的子元素上设定。
<Border BorderBrush="Black" BorderThickness="4" Background="#FF0B5B29" Loaded="Border_Loaded"> <Border.Transform3D> <CompositeTransform3D ></CompositeTransform3D> </Border.Transform3D> <TextBlock Text="2" /> </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="90" EnableDependentAnimation="True"></DoubleAnimation> </Storyboard>
<Grid Background="{StaticResource ProcurePageBackground}"> <Grid.Transform3D> <PerspectiveTransform3D Depth="1000" /> </Grid.Transform3D> <Grid Name="LeftGrid" Loaded="LeftGrid_Loaded"> <Grid.Transform3D> <CompositeTransform3D/> </Grid.Transform3D> <Border BorderBrush="Red" BorderThickness="4" Background="#FF11321E"> <TextBlock Text="1" /> </Border> <Border BorderBrush="Black" BorderThickness="4" Background="#FF0B5B29" Loaded="Border_Loaded"> <Border.Transform3D> <CompositeTransform3D /> </Border.Transform3D> <TextBlock Text="2" /> </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 = -90; }
double centePos; private double WidthGrid; public MainPage() { this.InitializeComponent(); centePos = (this.ActualWidth / 2) / 2; WidthGrid = this.ActualWidth / 2; this.SizeChanged += (s, e) => { centePos = (e.NewSize.Width / 2) / 2; WidthGrid = e.NewSize.Width / 2; }; }
