Question

我正在尝试为代码隐藏中的同一元素设置多个并行动画。好吧，当我试图将“移动”（RenderTransorm.X + Y）和Opacity拉在一起时，它运行完美。但是当我试图添加缩放动画或宽度 - 高度动画时，只有最新的动画正在运行。我做错了什么？ - 或者，有没有任何优雅的方式以编程方式执行此操作？

    private void StartAnimation(TimeSpan startOffsetTime, TimeSpan duration)
    {
        if (TweetIsAnimated)
        {
            Globals.IsAnimating = true;
        }


        if (_hasAnimated)
        {
            return;
        }
        _hasAnimated = true;
        StopAnimation();
        EnsureTransform();

        var storyboard = new Storyboard();

        //--------------------------HORIZONTAL ANIMATION-------------------------
        if (MoveStory)
        {
            var horizontalAnimation = new DoubleAnimation(FromHorizontalOffset, 0, duration)
                                          {

                                              EasingFunction = GetFuncByName(EasingFuncType)
                                              //new CubicEase { EasingMode = EasingMode.EaseOut }
                                          };

            storyboard = new Storyboard();
            storyboard.Completed += AnimationOnCompleted;
            _storyboards.Add(storyboard, true);
            storyboard.Children.Add(horizontalAnimation);
            Storyboard.SetTarget(horizontalAnimation, AssociatedObject);
            Storyboard.SetTargetProperty(horizontalAnimation, new PropertyPath("RenderTransform.X"));
            storyboard.BeginTime = startOffsetTime;
            storyboard.Begin();
        }
        //------------------------------------------------------------------------




        //--------------------------VERTICAL ANIMATION----------------------------
        if (MoveStory)
        {
            var veritcalAnimation = new DoubleAnimation(FromVerticalOffset, 0, duration)
            {
                EasingFunction = GetFuncByName(EasingFuncType)
            };

            storyboard = new Storyboard();
            storyboard.Completed += AnimationOnCompleted;
            _storyboards.Add(storyboard, true);
            storyboard.Children.Add(veritcalAnimation);
            Storyboard.SetTarget(veritcalAnimation, AssociatedObject);
            Storyboard.SetTargetProperty(veritcalAnimation, new PropertyPath("RenderTransform.Y"));
            storyboard.BeginTime = startOffsetTime;
            storyboard.Begin();
        }
        //------------------------------------------------------------------------



        //--------------------------OPACITY ANIMATION-----------------------------

        if (OpacityStory)
        {
            var opacityAnimation = new DoubleAnimationUsingKeyFrames();
            opacityAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(OpacityStart, TimeSpan.Zero));
            opacityAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(OpacityStart, startOffsetTime,
                                                                    GetFuncByName(EasingFuncType)));
            opacityAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(1,
                                                                    duration + startOffsetTime +
                                                                    TimeSpan.FromMilliseconds(
                                                                        Duration.TotalMilliseconds/2),
                                                                    GetFuncByName(EasingFuncType)));

            storyboard = new Storyboard();
            storyboard.Completed += AnimationOnCompleted;
            _storyboards.Add(storyboard, true);
            storyboard.Children.Add(opacityAnimation);
            Storyboard.SetTarget(opacityAnimation, AssociatedObject);
            Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(UIElement.OpacityProperty));
            storyboard.Begin();

        }
        //------------------------------------------------------------------------




        //--------------------------SCALE ANIMATION------------------------------
        if (ScaleStory)
        {
            ScaleTransform scaleTransform1 = new ScaleTransform(1, 1, AssociatedObject.ActualWidth, AssociatedObject.ActualHeight);
            AssociatedObject.RenderTransformOrigin = new Point(1, ScaleStart);
            AssociatedObject.RenderTransform = scaleTransform1;

            var EasingFunction1 = new BackEase() { EasingMode = EasingMode.EaseOut, Amplitude = AmplitudeNow };
            var scaleAnimation = new DoubleAnimationUsingKeyFrames();

            TimeSpan time = duration + startOffsetTime + TimeSpan.FromMilliseconds(Duration.TotalMilliseconds / 2);

            scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(ScaleStart, TimeSpan.Zero));
            scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(ScaleStart, startOffsetTime, EasingFunction1));
            scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(1, time, EasingFunction1));

            storyboard = new Storyboard();
            storyboard.Completed += AnimationOnCompleted;
            _storyboards.Add(storyboard, true);
            storyboard.Children.Add(scaleAnimation);
            Storyboard.SetTarget(scaleAnimation, AssociatedObject);
            Storyboard.SetTargetProperty(scaleAnimation, new PropertyPath("RenderTransform.ScaleY"));
            storyboard.Begin();
        }
        //------------------------------------------------------------------------


        //--------------------------RESIZE ANIMATION------------------------------

        if (ResizeStory)
        {
            DoubleAnimation widthAnimation = new DoubleAnimation
                                                 {
                                                     From = WidthStart,
                                                     To = AssociatedObject.ActualWidth,
                                                     Duration = Duration
                                                 };

            DoubleAnimation heightAnimation = new DoubleAnimation
                                                  {
                                                      From = HeightStart,
                                                      To = AssociatedObject.ActualHeight,
                                                      Duration = Duration
                                                  };

            storyboard = new Storyboard();
            storyboard.Completed += AnimationOnCompleted;
            _storyboards.Add(storyboard, true);
            storyboard.Children.Add(widthAnimation);
            Storyboard.SetTarget(widthAnimation, AssociatedObject);
            Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(FrameworkElement.WidthProperty));
            storyboard.BeginTime = startOffsetTime;
            storyboard.Begin();

            storyboard = new Storyboard();
            storyboard.Completed += AnimationOnCompleted;
            _storyboards.Add(storyboard, true);
            storyboard.Children.Add(heightAnimation);
            Storyboard.SetTarget(heightAnimation, AssociatedObject);
            Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(FrameworkElement.HeightProperty));
            storyboard.BeginTime = startOffsetTime;
            storyboard.Begin();
        }

        //------------------------------------------------------------------------
    }

Answer 1

不要创建新的故事板！像这样重构你的代码：

var storyboard = new Storyboard();
storyboard.Completed += AnimationOnCompleted;
_storyboards.Add(storyboard, true);

if (MoveStory)
{
    var horizontalAnimation = new DoubleAnimation(FromHorizontalOffset, 0, duration)
                                  {
                                       EasingFunction = GetFuncByName(EasingFuncType)
                                      //new CubicEase { EasingMode = EasingMode.EaseOut }
                                  };

    storyboard.Children.Add(horizontalAnimation);
    Storyboard.SetTarget(horizontalAnimation, AssociatedObject);
    Storyboard.SetTargetProperty(horizontalAnimation, new PropertyPath("RenderTransform.X"));
}

// ... if else etc...

if (ResizeStory)
{
    DoubleAnimation widthAnimation = new DoubleAnimation
                                         {
                                             From = WidthStart,
                                             To = AssociatedObject.ActualWidth,
                                             Duration = Duration
                                         };

    DoubleAnimation heightAnimation = new DoubleAnimation
                                          {
                                              From = HeightStart,
                                              To = AssociatedObject.ActualHeight,
                                              Duration = Duration
                                          };

    storyboard.Children.Add(widthAnimation);
    Storyboard.SetTarget(widthAnimation, AssociatedObject);
    Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(FrameworkElement.WidthProperty));

    storyboard.Children.Add(heightAnimation);
    Storyboard.SetTarget(heightAnimation, AssociatedObject);
    Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(FrameworkElement.HeightProperty));
}

storyboard.BeginTime = startOffsetTime;
storyboard.Begin();

如何为同一个元素创建多个并行动画？

1 个答案: