UWP开发 Storyboard动画 1

创建Storyboard Animation的步骤：

• 明确需要创建动画的对象，并命名。
• 定义Storyboard对象资源（可以Xaml设置，可以Code-Behind设置）
• 设置Storyboard的基本属性（时间间隔，动画模式，重复行为）
• 定义Storyboard的作用对象和属性以及动画情节。
• 动画开始。

在做动画时需要注意的EnableDependentAnimation属性:
拥有如下任意特性的动画是一个独立动画:

1. 动画的Duration设置为0秒
2. 动画目标为UIElement.Opacity属性
3. 动画目标是UIElement属性的子属性，如：RenderTransform,Projection,Clip
4. 动画目标为Canvas.Left或Canvas.Top。
5. 动画目标为Brush，并且使用了SolidColorBrush，改变颜色的动画。

6. 动画为一个关键帧动画。

   不符合上面这些标准，它可能是一个依赖动画。
   默认情况下，动画系统不会运行一个依赖动画。所以在动画开发和测试过程中，我们可能发现动画压根就不会动。此时，我们想让动画动起来，必须明确的使能这个依赖动画，那么我们必须设置EnableDependentAnimation=true，但会影响UI性能。

一个很有意义的函数：EasingFunction-缓动函数。
缓动函数定义：
缓动函数指定动画效果在执行时的速度，使其看起来更加真实。
为什么要使用缓动函数：
在平常的生活中，物体在运动的过程中，总是时而加速，时而减速。因此我们的大脑习惯了这种物体的这种自然的运动方式。所以在应用中加入这种自然的运动方式，会让用户觉得很舒服。

• Ease-In:随着时间增长，Value增长变快。
• Ease-Out：随着时间增扎，Value增长变慢。

• Ease-In-Out：随着时间增长，Value增长先变快后变慢。

  了解了以上几点基础，我们来实践一个简单的小球动画
  xaml部分：

<Page.Resources>
        <Storyboard x:Name="ball_animation"
                    Duration="0:0:1"
                    AutoReverse="True"
                    RepeatBehavior="Forever">
            <DoubleAnimation
                Storyboard.TargetName="ball"
                Storyboard.TargetProperty="(Canvas.Top)"
                From="0"
                To=" 500"
                Duration="0:0:1"
                EnableDependentAnimation="True"
                >
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseIn">CircleEase>  
                DoubleAnimation.EasingFunction>
            DoubleAnimation>
        Storyboard>
    Page.Resources>


    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Canvas >
            <Ellipse x:Name="ball"
                     Canvas.Top="0"
                     Canvas.Left="150"
                     Width="30"
                     Height="30"
                     Fill="Black">Ellipse>
        Canvas>
    Grid>
Page>

c#后台部分：

namespace Animation
{
    /// 

    /// 可用于自身或导航至 Frame 内部的空白页。
    /// 
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            ball_animation.Begin();
        }
    }
}

最后的效果