animation - 如何在运行时在代码中创建流畅的动画？

Question

在我的页面中，我正在创建炸弹，这些炸弹应该 throw 到指定目标上。我的问题是，无论使用什么(定时器、双动画、关键帧动画)，下落炸弹的运动都会显得不稳定。任何人都可以建议如何创建无 SCSS 动画(在代码中)。谢谢..

Answer 1

首先，测试动画有点问题。我制作了一些动画，它们在模拟器中的表现很糟糕(尽管我满足了 WDDM 1.1 等所有要求)，但它们在设备上的表现却非常出色。只需在设备上检查即可。

为了制作这种游戏，我建议使用 DispatcherTimer 类来模拟游戏循环(我制作了使用它的 HelloWorld 游戏)。您将拥有一个通用计时器来帮助您处理所有动画。

我认为最合适的是 DobuleAnimation。让我们编写代码(在 Timer Tick 事件处理程序中):

        Random random = new Random();
        // Create the bomb.
        Bomb bomb = new Bomb();
        bomb.IsFalling = true;

        //Easing function
        var easefall = new QuadraticEase();
        easefall.EasingMode = EasingMode.EaseIn;

        // make some bombs bigger and goes faster
        var randNumber = random.Next(0, 100);
        if (randNumber < 15)
        {
            bomb.Scale.ScaleX = bomb.Scale.ScaleY = 0.8;
            Canvas.SetZIndex(bomb, 1);
        }

        // Position the bomb.            
        bomb.SetValue(Canvas.LeftProperty, (double)(random.Next(0, (int)(canvasBackground.ActualWidth - 30))));
        bomb.SetValue(Canvas.TopProperty, -200.0);

        // Attach ManipulationStarted click event (for defusing the bomb).
        bomb.ManipulationStarted += bomb_ManipulationStarted;

        // Create the animation for the falling bomb.
        Storyboard storyboard = new Storyboard();
        DoubleAnimation fallAnimation = new DoubleAnimation();
        fallAnimation.To = canvasBackground.ActualHeight;
        fallAnimation.Duration = TimeSpan.FromSeconds(m_secondsToFall);
        fallAnimation.EasingFunction = easefall;

        StoryBoardHelper.SetTarget(fallAnimation, bomb);
        Storyboard.SetTargetProperty(fallAnimation, new PropertyPath("(Canvas.Top)"));
        storyboard.Children.Add(fallAnimation);

        // Create the animation for the bomb "wiggle."
        DoubleAnimation wiggleAnimation = new DoubleAnimation();
        wiggleAnimation.To = 40;
        wiggleAnimation.Duration = TimeSpan.FromSeconds(0.3);
        wiggleAnimation.RepeatBehavior = RepeatBehavior.Forever;
        wiggleAnimation.AutoReverse = true;
        var easewiggle = new CircleEase();

        easewiggle.EasingMode = EasingMode.EaseInOut;
        wiggleAnimation.EasingFunction = easewiggle;

        StoryBoardHelper.SetTarget(wiggleAnimation, ((TransformGroup)bomb.RenderTransform).Children[0]);
        Storyboard.SetTargetProperty(wiggleAnimation, new PropertyPath("Angle"));
        storyboard.Children.Add(wiggleAnimation);

        // Add the bomb to the Canvas.
        canvasBackground.Children.Add(bomb);

        // Add the storyboard to the tracking collection.            
        m_storyboards.Add(bomb, storyboard);

        // Configure and start the storyboard.
        storyboard.Duration = fallAnimation.Duration;
        storyboard.Completed += storyboard_Completed;
        storyboard.Begin();

当炸弹被捕获/爆炸时有一些动画也很棒。示例:

    // display falling bombs
    private void bomb_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {
        FrameworkDispatcher.Update();
        // Get the bomb.
        Bomb bomb = (Bomb)sender;
        bomb.IsFalling = false;

        // Get the bomb's current position.
        Storyboard storyboard = m_storyboards[bomb];
        double currentTop = Canvas.GetTop(bomb);

        // Stop the bomb from falling.
        storyboard.Stop();

        // Play the sound
        m_beep.Play();

        // Reuse the existing storyboard, but with new animations.
        // Send the bomb on a new trajectory by animating Canvas.Top
        // and Canvas.Left.
        storyboard.Children.Clear();

        DoubleAnimation riseAnimation = new DoubleAnimation();
        riseAnimation.From = currentTop;
        riseAnimation.To = 0;
        riseAnimation.Duration = TimeSpan.FromSeconds(2);

        StoryBoardHelper.SetTarget(riseAnimation, bomb);
        Storyboard.SetTargetProperty(riseAnimation, new PropertyPath("(Canvas.Top)"));
        storyboard.Children.Add(riseAnimation);

        DoubleAnimation slideAnimation = new DoubleAnimation();
        double currentLeft = Canvas.GetLeft(bomb);
        // Throw the bomb off the closest side.
        if (currentLeft < canvasBackground.ActualWidth / 2)
        {
            slideAnimation.To = -100;
        }
        else
        {
            slideAnimation.To = canvasBackground.ActualWidth + 100;
        }
        slideAnimation.Duration = TimeSpan.FromSeconds(1);
        StoryBoardHelper.SetTarget(slideAnimation, bomb);
        Storyboard.SetTargetProperty(slideAnimation, new PropertyPath("(Canvas.Left)"));
        storyboard.Children.Add(slideAnimation);

        // Start the new animation.
        storyboard.Duration = slideAnimation.Duration;
        storyboard.Begin();
    }

您可以找到helper here

PS:我喜欢 Silverlight :)