如何在WPF/XAML中制作关于Y轴的列表的连续360度动画

Question

我对WPF/XAML中的动画完全陌生。下面是我在SO上找到的代码，用于围绕Y轴旋转2D列表。

然而，它看起来就像只发生了通过左象限的旋转，然后它消失了一段时间，然后再次出现在同一象限中。

我需要做些什么来可视化围绕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>

Answer 1

根据@PeterDuniho的建议发表了以下文章：Ian Griffiths在Weblog Form(RSS 2.0(中的WPF中的可翻转3D列表项；BackMaterial"；@PeterDuniho提到。然而，我不想要"；跳跃"；Griffiths的代码。我发现Viewport2DVisual3D的当前分辨率已经足够了。阅读Josh Smith在Viewport2DVisual3D上介绍ContentControl3D的文章非常有帮助。最后，通过needbrew看到Viewport2DVisual3D的背面帮助我更好地理解了Viewport2DVisual 3D。关于Geometry3D的其他论文很多，但关于Viewport2DVisual3D的论文相对较少，我不知道为什么。

无论如何，对于像我这样的其他新手来说，我会在下面发布一个使用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>