WPF —— 平移变换动画实例

创建动画面临第一个问题选择正确的属性，选择属性的准则有以下几个方式进行选择

 1 如果希望动画显示和隐藏元素的时候，不要使用visibility，应使用opacity进行动画

 2 如果改变元素的位置的动画，尽量使用Canvas，使用Canvas.left以及canvas.top属性进行调整
 但是也可以使用thicknessAnimation 改Margin和Padding ，也可以使用平移变换动画实现
        
 3 动画常用的效果是变换效果：Translate（平移变换）、Rotate（旋转）、scale（缩放变换），
 比直接修改元素大小或者位置方法要快。

4 修改元素的外观的时候，建议修改画笔的属性，或者通过colorAnimation实现颜色的变化

简单的动画资源封装

<!--简单的动画资源封装-->
<Button Width="100"
        Height="100"
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
        Name="b1">
    <!--添加变换属性-->
    <Button.RenderTransform>
        <!--添加变换类型 平移变化
        X x轴平移 
        Y y轴的平移-->
        <TranslateTransform X="0"
                            Y="0"
                            x:Name="t1"></TranslateTransform>
      
    </Button.RenderTransform>

    <!--添加触发类型-->
    <Button.Triggers>
        <!--第一个触发类型 事件触发-->
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource s1}">
                <!--把之前在此处写的storyboard进行封装添加到BeginStoryboard的属性上-->
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

在WPF动画中常见的动画就平移、缩放以及旋转,一般会用到故事板(Storyboard)和浮点动画( DoubleAnimation),下面我们先对这两个进行具体的介绍,因为本次我们主要利用故事板来添加动画:

一.Storyboard:俗称故事板,在VS中意思是,一个容器的时间线,该时间线为子动画提供对象和属性确定信息

二.DoubleAnimation:浮点动画,在VS中的意思是,对插入的两个目标值之间的double属性值进行动画处理:

封装动画 在window.resources中进行添加
       在xaml文件如何使用   <BeginStoryboard Storyboard="{StaticResource s1}"></BeginStoryboard>
       在cs当中如何使用   Storyboard sb = (Storyboard)this.FindResource("s3");sb.Begin(b1);

标签页

<Window.Resources>
    <Storyboard x:Key="s1">
        <DoubleAnimation Storyboard.TargetProperty="X"
                         Storyboard.TargetName="t1"
                         To="680"
                         Duration="0:0:8"
                         Completed="DoubleAnimation_Completed">

        </DoubleAnimation>
        <!--如果在下面直接写第二个动画，俩个动画同时执行-->
        <!--<DoubleAnimation Storyboard.TargetProperty="Y"
                         Storyboard.TargetName="t1"
                         To="330"
                         Duration="0:0:8">

        </DoubleAnimation>-->
    </Storyboard>
    <!--第二个动画 是在第一个动画结束之后再去执行第二个动画，必须把第二个动画添加到第一个动画结束的回调中
    -->
    <Storyboard x:Key="s2">
        <DoubleAnimation Storyboard.TargetProperty="Y"
                         Storyboard.TargetName="t1"
                         To="330"
                         Duration="0:0:8"
                         Completed="DoubleAnimation_Completed_1">
            
        </DoubleAnimation>
    </Storyboard>
    
    <!--第三个动画资源-->
    <Storyboard x:Key="s3">
        <DoubleAnimation Storyboard.TargetProperty="X"
                         Storyboard.TargetName="t1"
                         To="0"
                         Duration="0:0:8">

        </DoubleAnimation>
    </Storyboard>
</Window.Resources>

CS 

private void DoubleAnimation_Completed(object sender, EventArgs e)
{
    //开启第二动画版里面的动画 使用静态资源s2
    // xaml文件使用:{StaticResource s1}
    // 后台使用资源 this.FindResource("s2") 
    Storyboard sb = (Storyboard)this.FindResource("s2");
    sb.Begin(b1);//开启动画，参数是要做动画的元素,注意是按钮的name属性
}

private void DoubleAnimation_Completed_1(object sender, EventArgs e)
{
    Storyboard sb = (Storyboard)this.FindResource("s3");
    sb.Begin(b1);
}