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

参考网址：https://blog.csdn.net/qq_45096273/article/details/106256397

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

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

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

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

   //动画平移

            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();//播放动画

 

XMl 代码

 

 

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

　　//动画旋转
　　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.动画远近实现,改变其的宽度:

　　//动画远近实现
　　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);//添加动画

xml代码

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

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

 4.ScaleTransform:动画的缩放

<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>

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