Silverlight 动画详解
2014-04-09 23:55
204 查看
Animation规则
基于时间:你设置动画的初始状态,最终状态,及持续时间,Silverlight会计算帧速率。作用于属性(properties):一个Silverlight动画只能做一件事情,在某段时间内修改某个属性的值。这似乎是一个很大的限制,但你可以通过同时修改多个属性来创造令人惊讶的动画效果。
不同的数据类型需要不同的动画类。比如:Button.Width是double类型的,要创作针对这个属性的动画,你就要使用DoubleAnimation类。如果你想改变背景色,你就需要ColorAnimation类。
Silverlight只有相当有限的几个Animation类,你能修改的属性只限于以下几种类型:double,object,Color,Point.但是你也可以创建自己的animation类,用于不同的数据类型,你只需要继承System.Windows.Media.Animation,并指明值是如何随着时间改变的。
创建简单动画
创建一个简单的动画是多步骤的过程。你需要三个独立的成分:执行动画的对象,管理动画的故事板,和一个触发故事板的处理程序。AnimationClass
Silverlight有两种动画类,它们都用不同的策略来实现对值的改变。线性插值:在动画期间,属性值连续不断的平衡变化。(你可以很容易的创建出包含加速与减速的复杂动作)。Silverlight包含三个这样的类:DoubleAnimation,PointAnimation,andColorAnimation
关键帧动画:可以从一个值迅速转移到另一个值,或者他们可以结合跳跃和线性插值。Silverlight包含四个这样的类:
ColorAnimationUsingKeyFrames,DoubleAnimationUsingKeyFrames,
PointAnimationUsingKeyFrames,andObjectAnimationUsingKeyFrames
动画是通过XAML语言来标记的。虽然动画类不是元素,但它们可以用相同的XAML语法来创建。例如,下面的标记创建了一个DoubleAnimation:
<DoubleAnimationFrom="160"To="300"Duration="0:0:5"></DoubleAnimation>
这个动画持续5秒(就如Duration属性指明的一样,它的格式是Hours:Minutes:Seconds),动画运行时,它会把目标值从160平稳的改变到300。
然而,上面这段XAML丢失了一个重要的细节:我们并没有指明要改变的是哪个属性。这是我们所要说的另一个类--故事板所要做的工作。
TheStoryboardClass
故事板管理动画的时间轴。你可以用故事板来分组多个动画,并对动画进行管理--暂停,停止,改变位置。但故事板最基本的特性是它提供了两个属性TargetProperty与TargetName来指明动画作用的属性与名称。换言之,故事板是动画与属性之间的桥梁。这里说明如何定义一个故事板,通过DoubleAnimation来改变名称为cmdGrow的button的Width属性。
<Storyboardx:Name="storyboard" Storyboard.TargetName="cmdGrow"Storyboard.TargetProperty="Width"> <DoubleAnimationFrom="160"To="300"Duration="0:0:5"></DoubleAnimation> </Storyboard>
Storyboard.TargetProperty表明了你想改变的属性(在这里是width)。如果你不指定一个类名,故事板会使用父元素。如果你想设置附加属性(例如,Canvas.LeftorCanvas.Top),你需要用括号包起来:
<Storyboardx:Name="storyboard" Storyboard.TargetName="cmdGrow"Storyboard.TargetProperty="(Canvas.Left)"> ... </Storyboard>
如果TargetProperty与TargetName都是附加属性,可以像下面那样指定:
<Storyboardx:Name="storyboard"> <DoubleAnimation Storyboard.TargetName="cmdGrow"Storyboard.TargetProperty="Width" From="160"To="300"Duration="0:0:5"></DoubleAnimation> </Storyboard>
上面这种语法更常见,因为它允许你把几个动画放在相同的故事板,但每个动画设置不同的元素和属性。虽然你不能同时改变多个动画的同一个属性,但你可以(比较经常的)同时改变同一个对象的不同属性
StartinganAnimationwithanEventTrigger
定义一个故事板和动画对象是创建动画的第一步。要使故事板生效,你需要一个事件触发器。一个事件触发器响应故事板的执行事件。目前Silverlight通过BeginStoryboard来启动故事板(包括它包含的动画)。
下面的例子使用页面的触发器集合附加一个加载动画事件。当Silverlight内容第一次呈现在浏览器中,且元素已加载完成,button就开始变形。5s之内,它的宽度由160变到300.
<UserControl...> <UserControl.Triggers> <EventTrigger> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimationStoryboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" From="160"To="300"Duration="0:0:5"></DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </UserControl.Triggers> <Gridx:Name="LayoutRoot"Background="White"> <Buttonx:Name="cmdGrow"Width="160"Height="30" Content="Thisbuttongrows"></Button> </Grid> </UserControl>
不幸的是,相对于WPF事件,Silverlight有着及大的限制。Silverlight只支持页面第一次创建的时候触发Loaded事件。对于其它事件不能作出相应的响应,比如点击,按键和鼠标移动。
StartinganAnimationwithCode
在代码中,我们可以通过任意事件与故事板交互来启动Silverlight动画。我们要做的第一步,便是把故事板移到资源文件中。<UserControl...>
<UserControl.Resources>
<Storyboardx:Name="storyboard"> <DoubleAnimation Storyboard.TargetName="cmdGrow"Storyboard.TargetProperty="Width" From="160"To="300"Duration="0:0:5"></DoubleAnimation> </Storyboard>
</UserControl.Resources>
<Gridx:Name="LayoutRoot"Background="White">
<Buttonx:Name="cmdGrow"Width="160"Height="30"Click="cmdGrow_Click"
Content="Thisbuttongrows"></Button>
</Grid>
</UserControl>
现在故事板有了一个名字,你可以在你的代码中操作它了。如:
privatevoidcmdGrow_Click(objectsender,RoutedEventArgse) { storyboard.Begin(); }
单击按钮,启动动画,按钮的宽度会从160px拉伸到300px,如下图所示:
ConfiguringAnimationProperties
要深入了解Silverlight动画,你需要仔细看看那些看似简单的基本属性,包括From,To,Duration等。FROM
From用来设置起始值。有前面的例子中,动画起始于160px.因些,每次你单击按钮启动动画,宽度会重置为160px,动画再次运行。即使你单击的时候,刚好有一个动画正在运行也是如此。(这也说明一个Silverlight动画细节:依赖属性只难存在于一个动画,当你开始第二个动画的时候,第一个动画便被丢弃)。如果你在上面的例子中移除掉From属性,你可以多次单击按钮而不会将动画重置。每点一次,都开始一个新动画,在当前值开始变动。但是,当按钮到达最大值时,继续点击会变得无效,除非你让按钮回到原始值。
在上面的例子中,我们还可以设置ActualWidth属性,表示按钮的当前宽度。你不能用动画来改变它,因为它是只读的,但你可以用它来设置动画的起始位置。
TO
就如可以省略FROM属性一样,我们也可以省略TO属性。如:<DoubleAnimationStoryboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"Duration="0:0:5"></DoubleAnimation>
乍一看,这似乎什么都做不了,因为这既没有设置FROM属性与没有设置TO属性,他们都是相同的值。但这里有一个微妙且重要的区别。
当我们省略FROM时,Silverlight会将元素的当前值考虑到动画中,如前面例子中按钮的当前宽度。然而,当我们省略TO属性时,Silverlight豪不犹豫的使用当前值,即TO属性会变成最初的那个值。
BY
我们也可以使用BY属性,而不是TO。动画可以通过BY属性设置每一次的变化量,而不是最动画最终的值。比如,你可以通过BY属性,将当前宽度每次增加10PX.<DoubleAnimationStoryboard.TargetName="cmdGrow"By="10" Storyboard.TargetProperty="Width"Duration="0:0:5"></DoubleAnimation>
BY属性并不适合所有的非数值改变的动画类,比如ColorAnimation。
Duration
Duration表示动画从开始到结束之间的时间间隔。Duration属性的值要求是Duration类型的,类似TimeSpan。事实上,Duration类型可以隐匿的通过TimeSpan类型转换过来。widthAnimation.Duration=TimeSpan.FromSeconds(5);
为什么微软要设置Duration类型,而不直接使用TimeSpan?因为Duration有两个特别的值是不能TimeSpan来表示的:Duration.Automatic与Duration.Forever。Duration.Automatic表示1s的持续时间,而Duration.Forever则表示永远的,这会让动画不产生任何影响。
AnimationLifetime
技术上来说Silverlight动画都是暂时的,这意味着它们不改变对象的基本特征。一旦启动了一个动画,它只是改覆盖了属性的当前值。因为这就是依赖属性的工作方式,这是一个很容易忽略的细节,并极易造成混乱。一个单向动画(就像上面中按钮宽度的增长),当它完成运行后仍然是活动的。这是因为动画需要保持按钮宽度在新的尺寸。这会导致一个很常见的问题:当你在动画完成后,用代码修改属性的值,你的代码似乎没有任何影响。你的代码分配了一个新的本地值,但动画拥有较高的优先级。
对于这个问题,有下面几种解决方法:
1.创建一个动画,将你的元素设置城初始状态:这种方法不能设置TO属性。
2.创建一个可逆的动画:设置AutoReverse属性为true.
3.改变FillBehavior属性:通常,将FillBehavior属性设置HoldEnd,意味着动画结束时,目标属性就会回到原来的值。
4.动画结束时回收动画对象:在Completed事件中处理动画或故事板对象。
这里举一下第四种做法,在Completed将动画对象设置为原来的值:
privatevoidstoryboard_Completed(objectsender,RoutedEventArgse) { Storyboardstoryboard=(Storyboard)sender; storyboard.Stop(); doublecurrentWidth=cmdGrow.Width; storyboard.Stop(); cmdGrow.Width=currentWidth; }
RepeatBehavior
RepeatBehavior属性允许你控制动画的重复方式。如果你想指定一个重复次数,用数字表明次数,并紧跟着一个x。例如,下面指明这个动画重复两次:<DoubleAnimationStoryboard.TargetName="cmdGrow"RepeatBehavior="2x" Storyboard.TargetProperty="Width"To="300"Duration="0:0:5"></DoubleAnimation>
在后台代码中,可以这样写:
widthAnimation.RepeatBehavior=newRepeatBehavior(2);
除了可以设置重复次数外,你还可以设置动画的重复时间,在该段时间内,动画会一直重复执行。如:
<DoubleAnimationStoryboard.TargetName="cmdGrow"RepeatBehavior="0:0:13" Storyboard.TargetProperty="Width"To="300"Duration="0:0:5"></DoubleAnimation>
对应的后台代码:
widthAnimation.RepeatBehavior=newRepeatBehavior(TimeSpan.FromSeconds(13));
除此之外,你还可以将RepeatBehavior的值设置成Forever,让动画一直不停的运行下去。
<DoubleAnimationStoryboard.TargetName="cmdGrow"RepeatBehavior="Forever" Storyboard.TargetProperty="Width"To="300"Duration="0:0:5"></DoubleAnimation>
SimultaneousAnimations
故事板有能力管理多个动画。最重要的是,将这些动画进行分组,就可以同时启动这些动画。这里我们将两个动画放在同一个故事板中,一个动画作用于按钮的Width属性,另一个作用于Height属性。
<Storyboardx:Name="storyboard2"Storyboard.TargetName="cmdGrow"> <DoubleAnimationStoryboard.TargetProperty="Width" To="300"Duration="0:0:5"></DoubleAnimation> <DoubleAnimationStoryboard.TargetProperty="Height" To="300"Duration="0:0:5"></DoubleAnimation> </Storyboard>
有两个属于对多个动画时很有用,一个是BeginTime:控制动画的开始时间。一个是SpeedRatio:控制动画的变化速度。
ControllingPlayback
Storyboard不单单有begin,end等方法,还有pause(暂停),resume(恢复),Seek(跳转)等方法。例如:
Grid设置:
<Grid> <ImageSource="night.jpg"></Image> <ImageSource="day.jpg"x:Name="imgDay"></Image> </Grid>
故事板设置:
<Storyboardx:Name="fadeStoryboard"> <DoubleAnimationx:Name="fadeAnimation" Storyboard.TargetName="imgDay"Storyboard.TargetProperty="Opacity" From="1"To="0"Duration="0:0:10"> </DoubleAnimation> </Storyboard>
后台代码:
privatevoidcmdStart_Click(objectsender,RoutedEventArgse) { fadeStoryboard.Begin(); } privatevoidcmdPause_Click(objectsender,RoutedEventArgse) { fadeStoryboard.Pause(); } privatevoidcmdResume_Click(objectsender,RoutedEventArgse) { fadeStoryboard.Resume(); } privatevoidcmdStop_Click(objectsender,RoutedEventArgse) { fadeStoryboard.Stop(); } privatevoidcmdMiddle_Click(objectsender,RoutedEventArgse) { //Starttheanimation,incaseit'snotcurrentlyunderway. fadeStoryboard.Begin(); //Movetothetimepositionthatrepresentsthemiddleoftheanimation. fadeStoryboard.Seek( TimeSpan.FromSeconds(fadeAnimation.Duration.TimeSpan.TotalSeconds/2)); }
privatevoidsldSpeed_ValueChanged(objectsender,RoutedEventArgse)
{
//Tonothingifthepageisstillbeinginitialized.
if(sldSpeed==null)return;
//Thisalsorestartstheanimationifit'scurrentlyunderway.
fadeStoryboard.SpeedRatio=sldSpeed.Value;
lblSpeed.Text=sldSpeed.Value.ToString("0.0");
}
效果如图:
相关文章推荐
- Silverlight中的动画详解(仅常见问题以及疑难杂症)
- Android中xml设置Animation动画效果详解
- Android 动画系列之属性(Property)动画详解
- Android 动画详解
- iOS疯狂详解之启动分层引导动画
- Android动画效果translate、scale、alpha、rotate详解
- Silverlight for Windows Phone 7开发系列(4):动画开发
- Android动画效果translate、scale、alpha、rotate详解
- Android 三种动画详解
- 详解Android动画之Tween Animation
- C#开发WPF/Silverlight动画及游戏系列教程(转)
- Android开发--图形图像与动画(五)--详解LayoutAnimationController
- 使用blend2 september preview 来为Silverlight程序创建动画资源
- Silverlight MMORPG网页游戏开发课程[一期] 第八课:场景之切换与动画效果
- [Silverlight动画]转向行为 - 介绍
- React Native Animated 动画详解 - 实例篇 (这篇就够了)
- Android动画详解 ,非常详细,从360图书馆复制的!让你登录才能复制~
- cocos2d-x 动画详解之五CCAnimation,
- Silverlight代码编写对控件的PlaneProjection.RotationY属性控制动画
- Android补间动画效果translate、scale、alpha、rotate详解(带源码)XML实现