gpt4 book ai didi

wpf - 如何围绕 3D 轴 (Y) 旋转 2D UIElement?

转载 作者:行者123 更新时间:2023-12-04 00:43:40 24 4
gpt4 key购买 nike

我有一个包含一些内容(图像、文本)的Grid,我想在 3D 空间中围绕 y 轴旋转它 - 以某种方式实现动画倾斜效果。

有没有像Rotate3DTransform这样直接适用于Grid的简单方法?

最佳答案

使用 Viewport3D

3D rotate

如果您愿意使用 3D 模型和旋转,那么这是我尝试为您制作的示例,我试图重现预期结果,可能不准确

    <Viewport3D>
<Viewport3D.Resources>
<Style TargetType="Image">
<Setter Property="Width"
Value="20" />
<Setter Property="Margin"
Value="4" />
<Setter Property="Source"
Value="desert.jpg" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="4"
Direction="0"
ShadowDepth="0" />
</Setter.Value>
</Setter>
</Style>
</Viewport3D.Resources>
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4" />
</Viewport3D.Camera>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<QuaternionRotation3D x:Name="rotate"
Quaternion="0, 0, 0, 0.5" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
TextureCoordinates="0,0 0,1 1,1 1,0"
TriangleIndices="0 1 2 0 2 3" />
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Viewport2DVisual3D.Material>
<UniformGrid Columns="3"> <!--host your content here-->
<Image />
<Image />
<Image />
<Image />
<Image />
<Image />
<Image />
<Image />
<Image />
</UniformGrid>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF"
Direction="0,0,-1" />
</ModelVisual3D.Content>
</ModelVisual3D>
<Viewport3D.Triggers>
<EventTrigger RoutedEvent="Viewport3D.Loaded">
<BeginStoryboard>
<Storyboard>
<QuaternionAnimation Storyboard.TargetName="rotate"
Storyboard.TargetProperty="Quaternion"
To="-0.25, 0.25, 0.15, 0.65"
Duration="0:0:10"
RepeatBehavior="Forever">
<QuaternionAnimation.EasingFunction>
<ElasticEase />
</QuaternionAnimation.EasingFunction>
</QuaternionAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Viewport3D.Triggers>
</Viewport3D>

现在您可以旋转您的模型,它是 UI 主机,当前托管带有图像 block 的网格。

您还可以将其转换为 ContentControl 的样式和模板,并附加用于旋转的属性,并在您需要的地方重复使用它。

使用二维变换

使用普通变换实现 3D 变换为网格的示例

3D rotate via 2D transform

关键是将 3D 转换为 2D 并直接应用于网格,而无需复杂的 3D 内容(此示例没有任何转换)它只是演示了一个 3D 外观的网格转换供您引用。

    <Grid Width="100" Height="100" >
<Grid.Background>
<ImageBrush Opacity=".5" ImageSource="Desert.jpg"/>
</Grid.Background>
<Button Content="Some Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Grid.RenderTransform>
<SkewTransform x:Name="skew" CenterX="50" CenterY="50"/>
</Grid.RenderTransform>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="skew" Duration="0:0:25" Storyboard.TargetProperty="AngleX" From="0" To="60" RepeatBehavior="Forever">
<DoubleAnimation.EasingFunction>
<ElasticEase/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="skew" Duration="0:0:20" Storyboard.TargetProperty="AngleY" From="0" To="50" RepeatBehavior="Forever">
<DoubleAnimation.EasingFunction>
<ElasticEase/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>

关于wpf - 如何围绕 3D 轴 (Y) 旋转 2D UIElement?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24223313/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com