WPF中元素的同步动画答案

【问题标题】：Simultanious Animation of Elements in WPFWPF中元素的同步动画
【发布时间】：2014-02-02 06:53:46
【问题描述】：

我有一个关于 WPF 3D 动画的问题。

在我的用户控件中，有动态数量的 wpf 元素是在后面的代码中创建的。它们围绕 y 轴圆形定位。

我为每个元素创建一个初始角度：

var trans = new AxisAngleRotation3D();
trans.Axis = new Vector3D(0, 1, 0);
trans.Angle = initialAngleFromZero;
RotateTransform3D elementTransform = new RotateTransform3D(trans);
wpfElement.Transform = elementTransform;

然后根据需要显示每个元素。

现在，我想在后面的代码中同时将所有动态创建的对象围绕 y 轴旋转相同的角度。我该怎么做？我尝试了以下方法：

foreach(var wpfElement in wpfElements)
{
   var sb = new Storyboard();
   var ani = new DoubleAnimation();
   ani.Duration = new Duration(TimeSpan.FromSeconds(5));
   ani.From = fromAngle;
   ani.To = toAngle;
   sb.Children.Add(ani);
   Storyboard.SetTarget(ani, wpfElement.Transform);
   Storyboard.SetTargetProperty(ani, new PropertyPath(AxisAngleRotation3D.AngleProperty));
   sb.Begin();
}

但这不起作用，什么也没有发生。

【问题讨论】：

标签： c# wpf animation user-interface rotation

【解决方案1】：

要制作这样的组动画，或一次为多个对象制作动画，您可能会发现通过开发自定义 Panel 会取得更大的成功...您可以将动画直接构建到其中，一旦开发，您只需将其设置为 UI 集合控件的 ItemsPanel 并添加项目以查看它的动画。我有几个，像这样使用它们：

<ListBox ItemSource="{Binding SomeCollection}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Controls:AnimatedRotationPanel EntryAnimationType="Slide" 
EntryAnimationDirection="Up" HorizontalContentAlignment="Stretch" 
ExitAnimationType="Slide" ExitAnimationDirection="Down" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

如您所见，我在Panel 中添加了额外的属性，以便在使用它时提供更多选项，但您可以根据需要使您的选项变得简单或复杂。为了帮助您开发这些Panels，请查看以下链接，请不要被一开始看起来像一些具有挑战性的代码所拖累：

Panels Overview 来自 MSDN
How to create a Custom Layout Panel in WPF 来自 WPF Tutorial.NET
Creating Custom Panels In WPF 来自 CodeProject
Animated WPF Panels 来自 CodeProject

【讨论】：