Windowsphone中动画编程的实现方式
方法一：基于定时器的实现
例:
在界面中添加一个Buton控件，动画实现Button的高度不断增大。
<Button x:Name=”MyButton” Height=”100” Content=”Button” Click=”MyButton_Click_1”></Button>
在.xaml.cs文件中添加：
Private void MyButton_Click_1(object sender, RoutedEventArgs e)
{
DispatcherTimer timer = new DispatcherTimer();
//定义一个定时器
timer.Interval = TimeSpan.FromMilliseconds(100);
//为定时器设定触发间隔时间
timer.Tick += timer_Tick;
//为定时器添加触发事件
timer.Start();
}
void timer_Tick(object sender, EventArgs e)
{
if(MyButton.Height > 500)
{
timer.Stop();
return ;
}
MyButton.Height += 40;
}
这样我们就可以实现一个简单的动画，这种实现方法是我们自己按照动画的原理去实现的，在windowsphone中并不推荐这种实现方式，原因有以下几点：
必须创建一个周期性触发器的计时器。
当触发计时器时会使用事件处理程序计算一些与动画相关的细节，性能差（所有的计算都是UI线程完成的）。
以上特性致使：可扩展性差、动画帧率固定、编写复杂、性能差等。
方法二：使用Storyboard实现
Storyboard storyboard = new Storyboard();
DoubleAnimation animation = new DoubleAnimation();
animation.From = 100;
animation.To = 500;
animation.Duration = new Duration(TimeSpan.FromMilliseconds(1500));
Storyboard.SetTarget(animation, myButton);
Storyboard.SetTargetProperty(animation, new PropertyPath(("UIElement.Height")));
storyboard.Children.Add(animation);
storyboard.Begin();
使用Storyboard注意的步骤：
设置变化的起始和结束的值、间隔时间，关联控件，关联控件属性。使用Storyboard最大的好处是与UI线程进行了分离，不会阻塞UI线程，也不会被UI线程打断。
另外，Storboard也可以作为一种资源，放在.xaml文件中去。如下：
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="storyboard">
<DoubleAnimation Storyboard.TargetName="rectangle_1" Storyboard.TargetProperty="Height"
From="100" To="500" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="2"></DoubleAnimation>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
在.xaml.cs中调用：
private void myButton_Click(object sender, RoutedEventArgs e)
{
storyboard.Begin();
}
实现方法三：使用UI变化属性实现
在实现方法二中，虽然说UI线程不会阻塞动画线程，但是实际上UI线程阻塞会导致看上去动画阻塞了，因为这种方式去实现动画需要重新绘制UI，但是当UI线程被阻塞时，UI的绘制也就停下了，我们的动画在后台在跑，但是UI上却看不见。因此我们还有另外一种方法去实现动画效果，即利用每个UI元素的变化属性RenderTransform，相关的还有RenderTransformOrigin等。
对方法二做一下改动：
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="storyboard">
<DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleY"
From="1" To="6" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="2"></DoubleAnimation>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
对应的rectangle改为：
<Rectangle x:Name="rectangle_1" Height="80" Fill="Red">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="scaleTransform" ScaleY="1"></ScaleTransform>
</Rectangle.RenderTransform>
</Rectangle>
我们要理解一下方法二与方法一有什么区别：
在方法二中我们是对rectangle的高度直接进行更改已达到动画的效果，实际上是要UI去重新绘制一个新的rectangle，二方法三中利用的是UI元素的一个基本属性“变化”，系统对这种变化的实现不是去搞一个新的rectangle出来去重绘，而是通过矩阵变化去影响rectangle在界面上的模样。我们可以想象rectangle本身没有变化，而它以之为基准的坐标系发生了变化，比如我们这里坐标系在Y方向上发生了从1倍到6倍的缩放变化，所以我们看上去rectangle就有了变化。实际上这种坐标系的变化并不只是一维、两维的，而是一个三维立体的坐标系，坐标系的变化是依靠一个多维矩阵的运算去实现的。因此方法三中并没有UI的重绘，而是一种比UI更基础的界面的变化。
网友评论