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

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

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