如何在 WPF/XAML 中制作关于 Y 轴的列表的连续 360 度动画
How to make a continuous 360deg animation of a list about the Y-Axis in WPF/XAML
我对 WPF/XAML 中的动画完全陌生。下面是我在 SO 上找到的代码，用于围绕 Y 轴旋转二维列表。
但是，似乎只发生了通过左象限的旋转，然后它消失了一段时间，然后再次出现在同一象限中。
我需要做什么来可视化围绕 Y 轴的完整 360 度 连续 旋转（它不会消失）。
感谢您的帮助。
<DockPanel Grid.Row="1" Grid.Column="1" Background="White">
<DockPanel.Resources>
<!-- UI Mesh -->
<MeshGeometry3D x:Key="uiMesh" TriangleIndices="0,1,2 3,4,5"
Positions="-1,-1,2 1,-1,2 1,1,2 1,1,2 -1,1,2 -1,-1,2 "
TextureCoordinates="0,1 1,1 1,0 1,0, 0,0 0,1"/>
<!-- UI Mesh Rotation -->
<Storyboard x:Key="uiSpin" RepeatBehavior="Forever">
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:02"
Storyboard.TargetName="uiRotate"
Storyboard.TargetProperty="Angle" From="0" To="360"/>
</Storyboard>
</DockPanel.Resources>
<DockPanel.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource uiSpin}"/>
</EventTrigger>
</DockPanel.Triggers>
<Viewport3D>
<!-- Camera -->
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4"/>
</Viewport3D.Camera>
<!-- Button on 3D -->
<Viewport2DVisual3D >
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="uiRotate"
Angle="40" Axis="0, 1, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the
Viewport2DVisual3D -->
<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>
<!-- Setup the Material"
You can use any material you want. For the material
that you want to have the Visual be placed on, you simply
need to set the Viewport2DVisual3D.IsVisualHostMaterial
attached property to true.
-->
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"
Brush="White"/>
</Viewport2DVisual3D.Material>
<Viewport2DVisual3D.Visual>
<!-- The 2D UI-->
<ListBox
Name="listBox1"
PreviewMouseLeftButtonDown="listBox1_PreviewMouseLeftButtonDown"
IsEnabled="{Binding IsEnabled, Converter={cv:InverseBooleanConverter}}"
ItemsSource="{Binding Printers}"
ItemTemplate="{StaticResource Printer}"
ItemsPanel="{StaticResource VSP}"/>
</Viewport2DVisual3D.Visual>
</Viewport2DVisual3D>
<!-- Lights -->
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</DockPanel>
跟进@PeterDuniho 的建议导致了以下文章：Flippable 3D List Items in WPF by Ian Griffiths in Weblog Form (RSS 2.0). This was a great study into the "BackMaterial" mentioned by @PeterDuniho. However, I did not want the "jump" which Griffiths has in is code. I find the current resolution of Viewport2DVisual3D to be more then adequate. Reading the articles by Josh Smith on Viewport2DVisual3D Introducing ContentControl3D was tremendously helpful. Finaly, seeing the back of the Viewport2DVisual3D needbrew 帮助我更好地理解了 Viewport2DVisual3D。还有很多其他论文讨论Geometry3D，但是关于Viewport2DVisual3D的文章相对较少，我不知道为什么。
无论如何，对于像我这样的其他新手，我 post 下面是使用 Viewport2DVisual3D 完成的按钮（不是列表 @PeterDuniho :)）的工作连续 360 度旋转。如上所述，这是对 needbrew 解决方案的近乎重印。
<Window x:Class="TestV3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestV3"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<DockPanel.Resources>
<!-- UI Mesh Rotation -->
<Storyboard x:Key="uiSpin" RepeatBehavior="Forever">
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:15"
Storyboard.TargetName="uiRotate"
Storyboard.TargetProperty="Angle" From="0" To="360"/>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:15"
Storyboard.TargetName="uiRotate2"
Storyboard.TargetProperty="Angle" From="0" To="360"/>
</Storyboard>
</DockPanel.Resources>
<DockPanel.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource uiSpin}"/>
</EventTrigger>
</DockPanel.Triggers>
<ScrollBar Name="horz" DockPanel.Dock="Bottom" Orientation="Horizontal"
Minimum="-180" Maximum="180"
LargeChange="10" SmallChange="1" />
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4"/>
</Viewport3D.Camera>
<!-- Button on 3D -->
<Viewport2DVisual3D>
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="uiRotate" Angle="{Binding
ElementName=horz, Path=Value}" Axis="0, 1, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the Viewport2DVisual3D -->
<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" Brush="White"/>
</Viewport2DVisual3D.Material>
<Button>Hello, 3D</Button>
</Viewport2DVisual3D>
<Viewport2DVisual3D>
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="uiRotate2" Angle="{Binding ElementName=horz, Path=Value}" Axis="0, 1, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the Viewport2DVisual3D -->
<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 2 1 0 3 2"/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
<Button>Hello, 3D back>
<Button.RenderTransform>
<ScaleTransform ScaleX="-1" ScaleY="-1"/>
</Button.RenderTransform>
</Button>
</Viewport2DVisual3D>
<!-- Lights -->
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</DockPanel>
我对 WPF/XAML 中的动画完全陌生。下面是我在 SO 上找到的代码，用于围绕 Y 轴旋转二维列表。
但是，似乎只发生了通过左象限的旋转，然后它消失了一段时间，然后再次出现在同一象限中。
我需要做什么来可视化围绕 Y 轴的完整 360 度 连续 旋转（它不会消失）。
感谢您的帮助。
<DockPanel Grid.Row="1" Grid.Column="1" Background="White">
<DockPanel.Resources>
<!-- UI Mesh -->
<MeshGeometry3D x:Key="uiMesh" TriangleIndices="0,1,2 3,4,5"
Positions="-1,-1,2 1,-1,2 1,1,2 1,1,2 -1,1,2 -1,-1,2 "
TextureCoordinates="0,1 1,1 1,0 1,0, 0,0 0,1"/>
<!-- UI Mesh Rotation -->
<Storyboard x:Key="uiSpin" RepeatBehavior="Forever">
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:02"
Storyboard.TargetName="uiRotate"
Storyboard.TargetProperty="Angle" From="0" To="360"/>
</Storyboard>
</DockPanel.Resources>
<DockPanel.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource uiSpin}"/>
</EventTrigger>
</DockPanel.Triggers>
<Viewport3D>
<!-- Camera -->
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4"/>
</Viewport3D.Camera>
<!-- Button on 3D -->
<Viewport2DVisual3D >
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="uiRotate"
Angle="40" Axis="0, 1, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the
Viewport2DVisual3D -->
<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>
<!-- Setup the Material"
You can use any material you want. For the material
that you want to have the Visual be placed on, you simply
need to set the Viewport2DVisual3D.IsVisualHostMaterial
attached property to true.
-->
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"
Brush="White"/>
</Viewport2DVisual3D.Material>
<Viewport2DVisual3D.Visual>
<!-- The 2D UI-->
<ListBox
Name="listBox1"
PreviewMouseLeftButtonDown="listBox1_PreviewMouseLeftButtonDown"
IsEnabled="{Binding IsEnabled, Converter={cv:InverseBooleanConverter}}"
ItemsSource="{Binding Printers}"
ItemTemplate="{StaticResource Printer}"
ItemsPanel="{StaticResource VSP}"/>
</Viewport2DVisual3D.Visual>
</Viewport2DVisual3D>
<!-- Lights -->
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</DockPanel>
跟进@PeterDuniho 的建议导致了以下文章：Flippable 3D List Items in WPF by Ian Griffiths in Weblog Form (RSS 2.0). This was a great study into the "BackMaterial" mentioned by @PeterDuniho. However, I did not want the "jump" which Griffiths has in is code. I find the current resolution of Viewport2DVisual3D to be more then adequate. Reading the articles by Josh Smith on Viewport2DVisual3D Introducing ContentControl3D was tremendously helpful. Finaly, seeing the back of the Viewport2DVisual3D needbrew 帮助我更好地理解了 Viewport2DVisual3D。还有很多其他论文讨论Geometry3D，但是关于Viewport2DVisual3D的文章相对较少，我不知道为什么。
无论如何，对于像我这样的其他新手，我 post 下面是使用 Viewport2DVisual3D 完成的按钮（不是列表 @PeterDuniho :)）的工作连续 360 度旋转。如上所述，这是对 needbrew 解决方案的近乎重印。
<Window x:Class="TestV3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestV3"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<DockPanel.Resources>
<!-- UI Mesh Rotation -->
<Storyboard x:Key="uiSpin" RepeatBehavior="Forever">
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:15"
Storyboard.TargetName="uiRotate"
Storyboard.TargetProperty="Angle" From="0" To="360"/>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:15"
Storyboard.TargetName="uiRotate2"
Storyboard.TargetProperty="Angle" From="0" To="360"/>
</Storyboard>
</DockPanel.Resources>
<DockPanel.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource uiSpin}"/>
</EventTrigger>
</DockPanel.Triggers>
<ScrollBar Name="horz" DockPanel.Dock="Bottom" Orientation="Horizontal"
Minimum="-180" Maximum="180"
LargeChange="10" SmallChange="1" />
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4"/>
</Viewport3D.Camera>
<!-- Button on 3D -->
<Viewport2DVisual3D>
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="uiRotate" Angle="{Binding
ElementName=horz, Path=Value}" Axis="0, 1, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the Viewport2DVisual3D -->
<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" Brush="White"/>
</Viewport2DVisual3D.Material>
<Button>Hello, 3D</Button>
</Viewport2DVisual3D>
<Viewport2DVisual3D>
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="uiRotate2" Angle="{Binding ElementName=horz, Path=Value}" Axis="0, 1, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the Viewport2DVisual3D -->
<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 2 1 0 3 2"/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
<Button>Hello, 3D back>
<Button.RenderTransform>
<ScaleTransform ScaleX="-1" ScaleY="-1"/>
</Button.RenderTransform>
</Button>
</Viewport2DVisual3D>
<!-- Lights -->
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</DockPanel>