silverlight 4 动画学习一

本文的目的是帮助初学者学习silverlight动画。如果您是silverlight高手，请飘过，因为这对您来说实在是上不得大雅之堂。@H_404_5@

学习silverlight动画之前，希望您对xaml（xml）有些了解，能够创建一个silverlight 应用程序，能够熟练的运用c#语言，会使用VS。@H_404_5@

以上这些话是不想浪费您的宝贵时间。@H_404_5@

现在我们开始学习吧。@H_404_5@

@H_404_5@

软件环境 VS 2010 及 silverlight tools 开发工具（具体内容自己去找吧：））@H_404_5@

1。首先我们先了解下动画的原理：@H_404_5@

动画是快速播放一系列图像（其中每个图像与下一个图像略微不同）给人造成的一种幻觉。大脑感觉这组图像是一个变化的场景。在电影中，摄像机每秒钟拍摄许多照片（帧），便可使人形成这种幻觉。用投影仪播放这些帧时，观众便可以看电影了。@H_404_5@

在 Silverlight 中，通过对对象的个别属性应用动画，可以对对象进行动画处理。-------MSDN@H_404_5@

@H_404_5@

2。开始我们的 "Hello world"程序把。@H_404_5@

打开VS 2010 @H_404_5@

new project @H_404_5@

然后单击“ok”。@H_404_5@

@H_404_5@

（如果这时候有错误提示，那一定是您的环境没有安装好，按照提示一步一步地做就可以了。）@H_404_5@

@H_404_5@

3。双击MainPage.xaml. 在上面添加一个Rectangle，并把它的Fill设为Yellows@H_404_5@

<Grid x:Name="LayoutRoot" Background="White"> @H_404_5@

@H_404_5@

<Rectangle Height="120" HorizontalAlignment="Left" Margin="76,78,0" @H_404_5@

@H_404_5@

Name="rectangle1" stroke="Black" strokeThickness="1" VerticalAlignment="Top" Width="197" Fill="Yellow"/>@H_404_5@

@H_404_5@

</Grid>@H_404_5@

@H_404_5@

接下来我们为这个Rectangle添加动画。@H_404_5@

在xaml中添加如下代码：@H_404_5@

@H_404_5@

<Grid x:Name="LayoutRoot" Background@H_404_5@

="White">@H_404_5@

@H_404_5@

<Grid.Resources> @H_404_5@

@H_404_5@

<Storyboard x:Name@H_404_5@

="myStoryBoard">@H_404_5@

@H_404_5@

<DoubleAnimation To="0" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty@H_404_5@

="Opacity" />@H_404_5@

@H_404_5@

</Storyboard> @H_404_5@

@H_404_5@

</Grid.Resources> @H_404_5@

@H_404_5@

<Rectangle Height="120" HorizontalAlignment="Left" Margin="76,0"@H_404_5@

@H_404_5@

Name="rectangle1" stroke="Black" strokeThickness="1" VerticalAlignment="Top" Width="197" Fill@H_404_5@

="Yellow"/>@H_404_5@

@H_404_5@

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="139,232,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" /> @H_404_5@

@H_404_5@

</Grid>@H_404_5@

@H_404_5@

在后他的c#文件中，添加一个click时间的响应方法：@H_404_5@

@H_404_5@

private void button1_Click(object sender,RoutedEventArgs e)@H_404_5@

@H_404_5@

{@H_404_5@

@H_404_5@

myStoryboard.begin(); @H_404_5@

@H_404_5@

}@H_404_5@

@H_404_5@

然后按F5 ，@H_404_5@

这样你就看到了界面。@H_404_5@

@H_404_5@

@H_404_5@@H_404_5@

单击button，黄色矩形块会慢慢消失。@H_404_5@

@H_404_5@

现在我们来解释下这段代码把。@H_404_5@

〈Storyboard〉〈/Storyboard〉@H_404_5@

在这里是声明一个storyboard，他是运行的主体 x:name="myStoryboard"是定义其名称，为code behind 引用。@H_404_5@

〈DoubleAnimation〉是一个动作， @H_404_5@

<@H_404_5@

@H_404_5@

DoubleAnimation To="0" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity" />@H_404_5@

Storyboard.TargetName="rectangle1" 表示该动作定义到 "rectangle1" 元素上。@H_404_5@

Storyboard.TargetProperty="Opacity" 表示该动作定义到opacity属性上@H_404_5@

To 表示目标属性的最终值。@H_404_5@

这里还可以通过by设置相对值@H_404_5@

这样这个动画就清楚了。@H_404_5@

@H_404_5@

当然，这里还有很多属性值我们可以设置。@H_404_5@

如duration 设置动画执行持续多长时间，默认值为1秒钟@H_404_5@

From目标属性的起始值，默认值为当前值@H_404_5@

@H_404_5@

FillBehavior@H_404_5@

@H_404_5@

="Stop"表示在动画结束后目标属性值是否保留。@H_404_5@

若要使动画无限期地重复，请将其 RepeatBehavior 属性设置为 Forever。@H_404_5@

@H_404_5@

BeginTime 设置该动画在动画开始后，一个延迟启动的时间。@H_404_5@

@H_404_5@

Completed 在这里可以注册一个事件，动画完成事件，这样你可以在动画完成之后作一些处理。@H_404_5@

@H_404_5@

以上所说的是， from/to/by动画，@H_404_5@

下一次讲 keyFrame动画@H_404_5@

@H_404_5@

一些项目小经验：@H_404_5@

当多次启动某一动画，在上次启动后，需要显示的将其stop（）。@H_404_5@

silverlight的国际化资源文件的属性，默认都是intenal,在调用的使用会出错。@H_404_5@

将其设为public即可。@H_404_5@

@H_404_5@

如有错误，欢迎大家指正。@H_404_5@

欢迎批评。@H_404_5@

silverlight 4 动画学习一

相关推荐