Windowsphone中動(dòng)畫(huà)編程的實(shí)現(xiàn)方式
方法一：基于定時(shí)器的實(shí)現(xiàn)
例:
在界面中添加一個(gè)Buton控件，動(dòng)畫(huà)實(shí)現(xiàn)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();
//定義一個(gè)定時(shí)器
timer.Interval = TimeSpan.FromMilliseconds(100);
//為定時(shí)器設(shè)定觸發(fā)間隔時(shí)間
timer.Tick += timer_Tick;
//為定時(shí)器添加觸發(fā)事件
timer.Start();
}
void timer_Tick(object sender, EventArgs e)
{
if(MyButton.Height > 500)
{
???? timer.Stop();
???? return ;
}
MyButton.Height += 40;
}
這樣我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的動(dòng)畫(huà)，這種實(shí)現(xiàn)方法是我們自己按照動(dòng)畫(huà)的原理去實(shí)現(xiàn)的，在windowsphone中并不推薦這種實(shí)現(xiàn)方式，原因有以下幾點(diǎn)：
必須創(chuàng)建一個(gè)周期性觸發(fā)器的計(jì)時(shí)器。
當(dāng)觸發(fā)計(jì)時(shí)器時(shí)會(huì)使用事件處理程序計(jì)算一些與動(dòng)畫(huà)相關(guān)的細(xì)節(jié)，性能差（所有的計(jì)算都是UI線程完成的）。
以上特性致使：可擴(kuò)展性差、動(dòng)畫(huà)幀率固定、編寫(xiě)復(fù)雜、性能差等。
方法二：使用Storyboard實(shí)現(xiàn)
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注意的步驟：
設(shè)置變化的起始和結(jié)束的值、間隔時(shí)間，關(guān)聯(lián)控件，關(guān)聯(lián)控件屬性。使用Storyboard最大的好處是與UI線程進(jìn)行了分離，不會(huì)阻塞UI線程，也不會(huì)被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中調(diào)用：
private void myButton_Click(object sender, RoutedEventArgs e)
{
??????????? storyboard.Begin();
}
實(shí)現(xiàn)方法三：使用UI變化屬性實(shí)現(xiàn)
在實(shí)現(xiàn)方法二中，雖然說(shuō)UI線程不會(huì)阻塞動(dòng)畫(huà)線程，但是實(shí)際上UI線程阻塞會(huì)導(dǎo)致看上去動(dòng)畫(huà)阻塞了，因?yàn)檫@種方式去實(shí)現(xiàn)動(dòng)畫(huà)需要重新繪制UI，但是當(dāng)UI線程被阻塞時(shí)，UI的繪制也就停下了，我們的動(dòng)畫(huà)在后臺(tái)在跑，但是UI上卻看不見(jiàn)。因此我們還有另外一種方法去實(shí)現(xiàn)動(dòng)畫(huà)效果，即利用每個(gè)UI元素的變化屬性RenderTransform，相關(guān)的還有RenderTransformOrigin等。
對(duì)方法二做一下改動(dòng)：
<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>
對(duì)應(yīng)的rectangle改為：
<Rectangle x:Name="rectangle_1" Height="80" Fill="Red">
??????????????????? <Rectangle.RenderTransform>
??????????????????????? <ScaleTransform x:Name="scaleTransform" ScaleY="1"></ScaleTransform>
??????????????????? </Rectangle.RenderTransform>
??????????????? </Rectangle>
我們要理解一下方法二與方法一有什么區(qū)別：
在方法二中我們是對(duì)rectangle的高度直接進(jìn)行更改已達(dá)到動(dòng)畫(huà)的效果，實(shí)際上是要UI去重新繪制一個(gè)新的rectangle，二方法三中利用的是UI元素的一個(gè)基本屬性“變化”，系統(tǒng)對(duì)這種變化的實(shí)現(xiàn)不是去搞一個(gè)新的rectangle出來(lái)去重繪，而是通過(guò)矩陣變化去影響rectangle在界面上的模樣。我們可以想象rectangle本身沒(méi)有變化，而它以之為基準(zhǔn)的坐標(biāo)系發(fā)生了變化，比如我們這里坐標(biāo)系在Y方向上發(fā)生了從1倍到6倍的縮放變化，所以我們看上去rectangle就有了變化。實(shí)際上這種坐標(biāo)系的變化并不只是一維、兩維的，而是一個(gè)三維立體的坐標(biāo)系，坐標(biāo)系的變化是依靠一個(gè)多維矩陣的運(yùn)算去實(shí)現(xiàn)的。因此方法三中并沒(méi)有UI的重繪，而是一種比UI更基礎(chǔ)的界面的變化。
