从本节开始,我们将围绕一个有趣的话题展开讨论——动画。
看到动画一词,你一定想到Flash,毕竟WP应用的一个很重要的框架是Silverlight,在WP中也发挥了Silverlight的许多优点,可能不少人说,Silverlight就是和Flash差不多吧,当你深入了解了Silverlight后,你会发现,其实不然,Silverlight更偏重于数据处和企业级应用。
好了,F话不多说,开始吹我们今天的牛皮吧,在吹牛皮之前,我们更应该知道牛皮是从哪里来的。故在说动画之前,先想一下,什么是Storyboard?这个东东你觉得怎么翻译好呢,叫演示图板吧,MSDN是这样翻译的,我说一个直观一点的概念吧,不知道各位玩过Flash没,Flash里面有一个“帧面板”,是的,其实这个演示图板和帧面板有着很严重的相似之处。
这样吧,我们还是接受一下.NET非常强大的事实吧,所以,打开Express Blend来看看一个图形化的演示图板,这样一来,大家一定会更好理解。
这样一看,一定很形象了,Storyboard从TimeLine派生而来,时间线在动画里面是比较关键的,我们都知道,所谓动画会“动”,正是因为它存在一个时间差,“帧”的概念相信大家能理解,只可意会不可言传啊,看你跟她能有多少默契了。
一个Storyboard可以包含N多个子动画时间线,今天我们先来了解一个比较简单的,DoubleAnimation是在一定时间段内对两个double值进行动画处理,如可视化元素的宽度,高度,透明度等。
严重警告:不是所有的属性都能够进行动画处理的,要进行动画处理的属性必须是依赖项属性。
好了,理论说多了,很容易让人走火入魔,还是动手干一下好吧。
下面我们来做一个演练。
第一步,新建一个WP应用程序项目,此处省略35个字。
第二步,在页面中添加一个矩形,两个按钮,矩形是“小白鼠”,是用来给我们做动画实验的,至于那两个按钮,一个是播放动画,一个是停止动画。界面怎么布置,随你喜欢。
<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Rectangle x:Name="rec"
Grid.Row="0"
Margin="100"
Fill="Yellow"/>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Button Content="播放" Click="play_Click"/>
<Button Content="停止" Click="stop_Click"/>
</StackPanel>
</Grid>
第三步,在上面那个叫ContentPanel的Grid中加一个Storyboard,作为资源,并在其中声明一个DoubleAnimation,把矩形的透明度在5秒钟内变为0,即使矩形产生淡出的动画效果。
Storyboard.TargetName附加属性指定要进行动画处理的对象的名字,你想干掉谁,就写上它的名字吧;Storyboard.TargetProperty是要动画处理的属性,由于我们要对透明度进行动画过度,故这里用Opacity属性。Duration就是动画的时长,这里取5秒钟。
<Grid.Resources>
<Storyboard x:Name="std">
<DoubleAnimation
Duration="0:0:5"
Storyboard.TargetName="rec"
Storyboard.TargetProperty="Opacity"
To="0"/>
</Storyboard>
</Grid.Resources>
第四步,分别处理两个按钮的单击事件,调用Storyboard的Begin和Stop方法来控件动画的播放和停止。
private void play_Click(object sender, RoutedEventArgs e)
{
this.std.Begin();
}
private void stop_Click(object sender, RoutedEventArgs e)
{
this.std.Stop();
}
好,现在运行一下看看。
不够爽吗?再做一个吧,把一个椭圆的宽度在3秒钟内从20变为420,如何。
看XAML代码。
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Ellipse Grid.Row="0" Height="325" Name="ell" Width="15" Fill="DarkOrange" />
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Button Content="播放" Click="onPlay"/>
<Button Content="停止" Click="onStop"/>
</StackPanel>
<Grid.Resources>
<Storyboard x:Name="std">
<DoubleAnimation Duration="0:0:3"
Storyboard.TargetName="ell"
Storyboard.TargetProperty="Width"
From="20"
To="420"/>
</Storyboard>
</Grid.Resources>
</Grid>
后台代码:
private void onPlay(object sender, RoutedEventArgs e)
{
this.std.Begin();
}
private void onStop(object sender, RoutedEventArgs e)
{
this.std.Stop();
}
看看运行效果。
分享到:
相关推荐
主要利用blend制作动画,生成WPF应用程序
让窗体打开和关闭的时候有动画效果,有wpf实现的,效果很好
WPF在Style样式中根据属性或事件添加动画,使用DoubleAnimation,ThicknessAnimation,ColorAnimation.
这是一个用wpf开发的一个动画效果的小软件,在这个软件上面我们可以看到动画的效果,当我们单击停止的时候动画效果会停止,当单击开始的时候动画效果会开始,当我们切换的时候这个动画效果也会随之切换。
动画效果 设置按钮的转换效果 动画时间 TranslateTransform tt = new TranslateTransform(); DoubleAnimation da = new DoubleAnimation();
WPF动画的使用,包括DoubleAnimation、ColorAnimation、PointAnimation、ColorAnimationUsingKeyFrames、DoubleAnimationUsingKeyFrames、PointAnimationUsingKeyFrames、StringAnimationUsingKeyFrames、...
通过动画效果简单实现小弹幕功能。主要利用简单的DoubleAnimation制作动画效果。通过动画效果简单实现小弹幕功能。主要利用简单的DoubleAnimation制作动画效果。
9、Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画 10、Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器 11、Silverlight(13) - 2.0交互之鼠标...
用DoubleAnimation控制动画效果 <Storyboard x:Name="DropImageStoryboard"> (UIElement.Opacity)" BeginTime="00:00:00"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> ...
wpf 界面通过Expander修改模板实现 左右&上下伸缩的方法以及第三种DoubleAnimation折叠展开的方法 只是为了一点积分互相学习,需要的可以自己下载
这是我自己写的WPF 图片滑动效果动画,利用的是双向环形链表,和wpf自带的动画类doubleAnimation做的,还算简单啦。希望多指点,交流
简单的WPF动画,技术点:DoubleAnimation ,Storyboard等应用,WPF新手,写的不好,请勿拍砖,欢迎WPF 爱好者共同研究!
using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Media.Media3D; using System.Windows.Media.Effects; ...
使用WPF写的子控件向右滑动切换效果,使用canvas+DoubleAnimation动画完成,学习使用动画比较好的例子
WPF图片滚动效果,适合初学者学习提高!适合做一些小程序中的动画效果,提升程序的视觉效果
本文实例为大家分享了WPF实现左右移动效果展示的具体...实现控件或布局的左右移动(晃动)主要用到DoubleAnimation以及Storyboard 布局代码为: <Button Content=Button Height=25 Width=78 Click=Button_Cli
其中包括获取绝对路径下的全部图片,技术点:文件流,委托,TranslateTransform ,DoubleAnimation 等应用,WPF新手,写的不好,请勿拍砖!欢迎WPF爱好者共同研究
DoubleAnimation da = new DoubleAnimation(0.3d, new Duration(TimeSpan.FromMilliseconds(300))); da.Completed += FadeOutCompleted; this.BeginAnimation(OpacityProperty, da); } _allowDirectNavigation ...