WPF中实现动画的几种效果(最基础方式)

在动画之前我们先了解一下几个声明式动画中常用的元素:

一.Storyboard:故事板,是BeginAnimation()方法的XAML等价物,通过故事板将动画指定到合适的元素和属性,故事板是增强的时间线,可以用来分组多个动画,Storyboard类提供的最基本的功能是使用TargetName和TargetProperty属性指向某个特定的元素和属性;

二.DoubleAnimation:线性类插入两个目标值之间的**double**属性值进行处理,也就是线性插入;

---

1.TranslateTransform:实现动画的平移效果;

CS代码:

//动画平移
            Storyboard sb = new Storyboard();//实例化一个故事版
            first.RenderTransform = new TranslateTransform(0, 0);//设置转换元素的位置信息
            DoubleAnimation yun = new DoubleAnimation();//实例化double对动画值的处理
            yun.By = 50;//动画改变值的范围
            yun.RepeatBehavior = RepeatBehavior.Forever;//设置无限次播放动画
            yun.Duration = TimeSpan.FromMilliseconds(5000);//设置动画时间
            yun.AutoReverse = true;//设置可以反转
            Storyboard.SetTarget(yun, first);//绑定动画
            Storyboard.SetTargetProperty(yun, new PropertyPath("Width"));//动画依赖的属性
            sb.Children.Add(yun);//添加动画
            sb.Begin();//播放动画

XAML代码:

2.RotateTransform:实现动画的旋转效果

CS代码:

//动画旋转
            var sun = new DoubleAnimation()//声明一个动画对象
            {
                From = 0,//动画初始角度
                To = 1800,//动画的结束值
                Duration = new Duration(TimeSpan.Parse("0:0:10"))//设置动画花费的时间
            };
            sun.RepeatBehavior = RepeatBehavior.Forever;//设置动画无限次播放
            taiyang.BeginAnimation(RotateTransform.AngleProperty, sun);//添加动画

XAML代码:

<Image RenderTransformOrigin="0.445,0.526"  Height="100" Canvas.Right="10" Canvas.Top="-16" Width="100" Source="太阳.png" Canvas.Left="0">
            <Image.RenderTransform>
                <RotateTransform Angle="0" x:Name="taiyang">//angle为角度值
                </RotateTransform>
            </Image.RenderTransform>
        </Image>

效果图:(旋转之前与之后)

3.动画远近实现,改变其的宽度:

CS代码:

 //动画远近实现
            DoubleAnimation tree = new DoubleAnimation();//实例化线性对动画的处理
            tree.From = xin.ActualHeight;//动画的起始值
            tree.To = xin.ActualHeight - 50;//动画的结束值
            tree.RepeatBehavior = RepeatBehavior.Forever;//动画无限播放次数
            tree.Duration = TimeSpan.FromSeconds(5);//动画播放的时间
            tree.AutoReverse = true;//动画的反转
            xin.BeginAnimation(Image.HeightProperty, tree);//添加动画

XAML代码:

<Image RenderTransformOrigin="0.5,0.5" Name="xin" Height="100" Canvas.Left="345" Canvas.Top="225" Width="100" Source="心.png">//Source指向图片
        </Image>

效果图:(远近实现之前与之后)

4.ScaleTransform:动画的缩放

XAML代码:

        <Image Name="shu" Height="239" Canvas.Top="122" Width="173" Source="大树.png" Canvas.Left="-31">
            <Image.RenderTransform>
                <ScaleTransform ScaleX="1.5" ScaleY="1.5"  >//ScaleX:为X轴的缩放,ScaleY:为Y轴的缩放
                </ScaleTransform>
            </Image.RenderTransform>
        </Image>

效果图:(缩放实现之前与之后)