在 UWP 中启动 Storyboard 后如何删除它？答案

【问题标题】：How to remove Storyboard after begin it in UWP?在 UWP 中启动 Storyboard 后如何删除它？
【发布时间】：2017-02-28 19:00:38
【问题描述】：

我正在使用我的 UWP 项目处理 UI 动画。当我将 Storyboard 与基于用户在控件中的操作的 translate 变换结合起来时，在 Storyboard 开始动画后，似乎翻译不再起作用。

经过研究，我认为这是the reason - 动画后我无法更改属性的值，并且我必须删除情节提要，...不幸的是，这篇文章支持 WPF，因此我无法应用于我的 UWP 项目。那么有人知道这种情况的任何解决方案吗？

XAML：

   <Frame       x:Name="StoreFrame"
                Grid.Row="1"
                Grid.RowSpan="1"
                MaxWidth="400"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                ManipulationDelta="StoreFrame_OnManipulationDelta"
                ManipulationMode="TranslateY">
                <Frame.RenderTransform>
                    <CompositeTransform x:Name="Transform" />
                </Frame.RenderTransform>
   </Frame>

操纵事件处理程序：

    private void StoreFrame_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
       Transform.TranslateY += e.Delta.Translation.Y;
    }

我的故事板动画：

    private void ShowStoreFrameAnimation()
    {
        VerticalAnimatiton(StoreFrame, StoreFrame.ActualHeight, 0);
    }

    public void VerticalAnimatiton(DependencyObject controlObject, 
                                   double fromValue, double toValue, double durationTime = 1000)
    {
        //The animation things
        var storyboard = new Storyboard();

        var duration = new Duration(TimeSpan.FromMilliseconds(durationTime));
        var ease = new CubicEase { EasingMode = EasingMode.EaseOut };

        var animation = new DoubleAnimation
        {
            EasingFunction = ease,
            Duration = duration
        };
        storyboard.Children.Add(animation);
        animation.From = fromValue;
        animation.To = toValue;
        animation.EnableDependentAnimation = false;
        Storyboard.SetTarget(animation, controlObject);
        Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");        

        storyboard.Begin();
    }

【问题讨论】：

您应该使用 same Storybard 来处理用户操作 - Pause 在用户交互开始时使用它 (ManipulationStarted)，在交互过程中调用 Seek ( ManipulationDelta)，最后是 Resume，一旦交互结束 (ManipulationCompleted)。

标签： c# uwp

【解决方案1】：

在 UWP 中启动后如何删除 Storyboard？

我不能在动画后更改属性的值，我必须删除情节提要。

正如你所说，我们不能在动画后更改属性的值。并且没有可行的方法来删除情节提要。但是您可以为已使用的相同属性添加新的storyboard。以下代码是您的方案的解决方法。

将新故事板添加到 StoreFrame_OnManipulationDelta 事件方法。

private void StoreFrame_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
 {
     Transform.TranslateY += e.Delta.Translation.Y;

     var duration = new Duration(TimeSpan.FromMilliseconds(1000));
     var ease = new CubicEase { EasingMode = EasingMode.EaseOut };
     var animation = new DoubleAnimation
     {
         EasingFunction = ease,
         Duration = duration
     };
     var conStoryboard = new Storyboard();
     conStoryboard.Children.Add(animation);
     animation.From = Transform.TranslateY;
     animation.To = Transform.TranslateY += e.Delta.Translation.Y;
     animation.EnableDependentAnimation = false;
     Storyboard.SetTarget(animation, StoreFrame);
     Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
     conStoryboard.Begin();
 }

动画效果

【讨论】：

每次调用 delta 时创建一个新的 Storyboard 成本非常高。
我测试了内存消耗，不是很严重。