Hello World
Spiga

WPF/E CTP Quick Start - 第九部分:动画(翻译)

2006-12-14 22:49 by 老赵, 4961 visits

WPF/E能够让您使用标记来定义动画。这篇QuickStart介绍了WPF/E的动画特性,并且带领您创建您的第一个WPF/E动画。

这篇QuickStart包含了如下部分:

 

演练:为一个对象添加动画效果

第一步:寻找对象

首先,您需要一个对象,可以把动画效果添加之上。让我们先使用一个Ellipse。下面的例子创建了一个Ellipse并将它填充成黑色。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Ellipse x:Name="ellipse"
        Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
        Fill="black" />
</Canvas>

重新开始查看内容

请注意,这个Ellipse有一个名字:

x:Name="ellipse"

这个Ellipse需要有一个名字,这样它才能够被添加动画。现在您可以有一个用于动画的对象了,下一步则是添加一个用于开始动画的EventTrigger

 

第二步:创建一个EventTrigger

EventTrigger会在被它被触发时执行一个动作。从它的名字可以看出,触发它的是一个事件,一个由它的RoutedEvent属性指定的事件。因为您希望这个EventTrigger开始一个动画,那么使用一个BeginStoryBoard对象作为它的动作。

您也需要决定是由哪个事件来触发这个动画。在这里非常简单,因为EventTrigger只支持一个事件,Loaded事件,因此我们将RoutedEvent属性设为Canvas.Loaded(最终我们会使用别的东西来触发这个动画)。这样,当Canvas加载时我们的动画就会被开启。下面是到此为止的标记。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    
                    <!-- Insert Storyboard here. -->
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Canvas.Triggers>
    
    <Ellipse x:Name="ellipse"
        Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
        Fill="black"/>
</Canvas>

重新开始查看内容

现在,您已经为创建一个Storyboard和动画做好准备了。

 

第三步:创建一个Storyboard和一个动画

一个Storyboard可以用于描述和控制一个或多个动画。在这个例子里,我们只用了一个动画。在WPF/E中,您通过把动画应用到对象的属性上来添加动画效果。使用一个DoubleAnimation把一个动画效果运用在EllipseCanvas.Left属性上。您使用了DoubleAnimation因为这个被操作的属性,Canvas.Left,是一个Double类型(一个双精度浮点数)的属性。

为了使动画生效,需要为它指定一个目标名称(Storyboard.TargetName="ellipse")、一个目标属性(Storyboard.TargetProperty="(Canvas.Left)")、一个变换的值(To="300")和一个Duration(Duration="0:0:1")。这个Duration属性指定了动画效果从它的起始值到结束值的变化所用的时间长度。0:0:1表示这个Duration为1秒钟。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation 
                            Storyboard.TargetName="ellipse"
                            Storyboard.TargetProperty="(Canvas.Left)"
                            To="300" Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Canvas.Triggers>
    <Ellipse x:Name="ellipse"
        Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
        Fill="black"/>
</Canvas>

重新开始查看内容

您使用了DoubleAnimation因为这个被操作的属性,Canvas.Left,是一个Double类型(一个双精度浮点数)的属性。

恭喜!您刚才创建了您的第一个WPF/E动画。如果您希望对WPF/E动画系统了解更多,请继续阅读下面的内容。

 

其它类型的动画

WPF/E还支持颜色的动画(ColorAnimation)和点的动画效果(PointAnimation)。当您对颜色添加动画效果时,请记住一个颜色和SolidColorBrush的区别。当您为一个形状的StrokeFill属性指定一个颜色名或者十六进制值时,WPF/E会将其转换为使用SolidColorBrush的方式。当您要为一个形状的StrokeFill添加动画时,您需要操作设置该属性的SolidColorBrush对象的Color。通常,当您要使用一个动画操作一个包含画刷的属性时,最好是使用复杂的语法来声明那个画刷,而不是使用一个颜色名或者十六进制值,这样您就可以为它添加一个名字了。

下面的例子为两个Ellipse添加了动画效果。第一个Ellipse的属性使用一个SolidColorBrush显式设置了Fill属性。在例子里为SolidColorBrush提供了一个名字,并操作了它的Color属性。第二个动画就有些复杂了,因为第二个Ellipse的Fill属性被设置为一个颜色名。当这个标记被执行时,系统会创建一个SolidColorBursh,我们只能间接地为属性添加动画。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation 
                            Storyboard.TargetName="e1_brush"
                            Storyboard.TargetProperty="Color"
                            From="Red" To="Blue" Duration="0:0:5" />
                        <ColorAnimation 
                            Storyboard.TargetName="e2"
                            Storyboard.TargetProperty="(Fill).(Color)"
                            From="Red" To="Blue" Duration="0:0:5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Canvas.Triggers>
    
    <Ellipse Fill="Black"
        Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
        <Ellipse.Fill>
            <SolidColorBrush x:Name="e1_brush" Color="black"/>
        </Ellipse.Fill>
    </Ellipse>
    
    <Ellipse x:Name="e2" Fill="Black"
        Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
</Canvas>

重新开始查看内容

 

Timeline的属性

StoryboardDoubleAnimation都是Timeline类型的对象。Timeline有许多有用的属性:

  • Storyboard.TargetName:您操作的对象的名称。如果您不指定一个Storyboard.TargetName的值,Timeline会使用它父Timeline的Storyboard.TargetName。如果您不不指定任何父Timeline的Storyboard.TargetName属性,Timeline则会找到使用EventTrigger来启动它的那个对象。
  • Storyboard.TargetProperty:您操作的属性。如果您不指定Storyboard.TargetProperty,Timeline会使用它父Timeline的Storyboard.TargetProperty。这个属性所使用的语法由它操作的属性类型决定:
    • 指定附加属性时所用的语法:"(ownerType.propertyName)"。例如:"(Canvas.Top)"指定了Canvas.Top属性。
    • 指定其它类型属性时所用的语法:"proeprtyName"。例如:"Opacity"指定了Opacity属性。
  • BeginTime:Timeline开始的时间。请注意您在使用的语法,因为在这里默认的单位是“天”(简单地将该属性设为2,则表示BeginTime为2天!)。使用下面的语法来指定小时,分钟和秒:“小时:分钟:秒”。例如,“0:0:2”将BeginTime设为2秒(0小时,0分钟,2秒)。如果您不指定BeginTime,这个属性的值将默认为0秒。
  • Duration:Timeline执行一次所需的时间长度。对于一个动画来说,这表示它从起始值进行到结束值所用的时间长度。Duration属性使用与BeginTime相同的语法。再强调一下,请注意不要在您想表示“秒”的时候却设成了“小时”!Duration能够被设为两个特殊的值:“Forever”和“Automatic”。该属性的默认值为“Automatic”。如果您想了解有关这两个特殊值的详细信息,请参考WPF/E SDK中的Duration相关章节。
  • FillBehavior:指定了Timeline会停止之后会做什么。这个属性可以使用两个值:Stop或HoldEnd。“Stop”会再Timeline结束时将被操作的属性设为它的起始值;“HoldEnd”说明被操作的属性将再结束时保持最后的值不变。该属性默认值为“HoldEnd”。
  • RepeatBehavior:说明Timeline在重复的次数。这个属性能够被设为三种类型的值:重复次数,一个时间段,以及一个特殊值“Forever”。
    • “Forever”使Timeline不断地重复。
    • 一个时间段表示Timeline运行的时间长度。例如,将一个Duration为2.5秒的动画的RepeatBehavior设为“0:0:5”会使动画重复两次。
    • 重复次数指定了Timeline运行的次数。您使用下面的语法来指定重复次数:重复次数x。例如,“4x”表示Timeline重复四次。
    该属性默认值为“1x”,表示时间线只会执行一次。

下面的例子展示了这些Timeline的属性。

<Storyboard 
    Storyboard.TargetName="e1"
    Storyboard.TargetProperty="(Canvas.Left)"
    BeginTime="0:0:1">
    <DoubleAnimation To="300" />
    <DoubleAnimation To="300" Storyboard.TargetName="e2"/>
    <DoubleAnimation To="80" Storyboard.TargetName="e3"
        Storyboard.TargetProperty="Width"/>
    <DoubleAnimation From="200" To="300" 
        Storyboard.TargetName="e4"/>
    <DoubleAnimation To="300" Duration="0:0:5.3"
        Storyboard.TargetName="e5"/>
    <DoubleAnimation FillBehavior="HoldEnd" To="200"
        Storyboard.TargetName="e6"/>
    <DoubleAnimation FillBehavior="Stop" To="200"
        Storyboard.TargetName="e7"/>
    <DoubleAnimation RepeatBehavior="Forever" To="300"
        Storyboard.TargetName="e8"/>
</Storyboard>

重新开始查看内容

 

指定动画变换的值

DoubleAnimationColorAnimationPointAnimation都有FromTo两个属性,用于指定被操作属性的起始值和结束值。如果没有制动From属性的值,起始值则为被操作属性的当前值。此外您可以使用By属性来设定偏移量的大小,而不是使用To属性来设置属性的结束值。

 

在同一个对象上添加多个动画

您可以使用多个动画操作同一个对象的同一个属性。如果您想让让动画依次执行,那么可以将动画的BeginTimeDuration设为合适的值。下面的示例将两个动画应用到了同一个属性上,第二个动画将在第一个动画结束以后开始。

<Storyboard 
    Storyboard.TargetName="e1"
    Storyboard.TargetProperty="(Canvas.Left)">
    <DoubleAnimation BeginTime="0" Duration="0:0:2" To="250" />
    <DoubleAnimation BeginTime="0:0:2" Duration="0:0:2" To="20" />
</Storyboard>

重新开始查看内容

 

下面该做什么呢?

在下一部分“脚本和鼠标事件”中,您会了解如何使用JavaScript代码来添加交互内容。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

14 条回复

  1. 坏啊[未注册用户]
    *.*.*.*
    链接

    坏啊[未注册用户] 2006-12-15 09:11:00

    人人都可以

  2. 老赵
    admin
    链接

    老赵 2006-12-15 09:42:00

    @坏啊
    是啊。:)

  3. favory[未注册用户]
    *.*.*.*
    链接

    favory[未注册用户] 2006-12-17 00:17:00

    有意思,支持一下!

  4. rr[未注册用户]
    *.*.*.*
    链接

    rr[未注册用户] 2006-12-17 06:49:00

    不知道wpf这东西具体能干什么?谁来说说
    微软网站上一个demo的链接,拿浏览器打开,不管是ie或者是ff,统统假死,也不知道是什么原因
    还有,不知道wpf/e这东西拿来做在线游戏性能行不行

  5. 老赵
    admin
    链接

    老赵 2006-12-17 16:33:00

    @favory
    多谢支持!

  6. 老赵
    admin
    链接

    老赵 2006-12-17 16:35:00

    @rr
    您装了WPF/E的Runtime吗?我打开是不错的。
    其实WPF/E的作用是提供浏览器一个更强的表现能力,游戏性能的话还不知道,这应该更像是在考验WPF/E的三维动画的处理能力。

  7. heweitykc[未注册用户]
    *.*.*.*
    链接

    heweitykc[未注册用户] 2006-12-19 12:12:00

    flash垃圾回收比较差吧 有些flash游戏玩半个小时以上就cpu使用100%了

  8. 老赵
    admin
    链接

    老赵 2006-12-19 12:24:00

    @heweitykc
    应该还是开发人员的失误吧,呵呵。

  9. 老陈[未注册用户]
    *.*.*.*
    链接

    老陈[未注册用户] 2007-02-09 23:31:00

    @heweitykc

    主要是FLASH图形计算完全依赖于CPU,FLASH里无法通过AS调用显卡资源

  10. ququ[未注册用户]
    *.*.*.*
    链接

    ququ[未注册用户] 2007-03-06 11:07:00

    你好:

    请看以下代码:
    <Ellipse Fill="Black"
    Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
    <Ellipse.Fill>
    <SolidColorBrush x:Name="e1_brush" Color="black"/>
    </Ellipse.Fill>
    </Ellipse>
    其中的Fill="Black"属性在代码下面已经定义,这样的程序是编译不通过的。清确认!

  11. ququ[未注册用户]
    *.*.*.*
    链接

    ququ[未注册用户] 2007-03-06 11:55:00

    你好:

    在最后一个例子中,对同一个对象实现了两个动画,那么,我想在它移动的过程中,同时伴随颜色的变化,BeginTime设置为0,也就是自始至终。请问怎么实现呢,我在代码:<DoubleAnimation BeginTime="0:0:2" Duration="0:0:2" To="20" />
    后又添加了一行<ColorAnimation BeginTime ="0"
    From="Blue" To ="Yellow"/>
    怎么实现不了,编译都不通过,请教!

  12. miss zhang[未注册用户]
    *.*.*.*
    链接

    miss zhang[未注册用户] 2008-05-17 19:57:00

    我想请你帮我制作以下的程序,如需要什么条件才可以的话邮件联系,谢谢

    要求:1.web新技术的理念.(到微软官方网站上)
    http://msdn2.microsoft.com/en-us/library/bb190632.aspx
    2.在VS 2005或vs 2008里通过WPF/E项目模板生成一个含有动画效果的项目或应用程序。(可以仿照官方网站实例)
    3.参考博客:http://blog.joycode.com/saucer/archive/2006/12/06/88636.aspx
    4. 根据所学内容,整理一片2500-3000字的论文。要突出WPF/E技术如何应用,要有应用的实例。其中特别要归纳利用VS 2005或vs 2008自作wpf应用程序的过程。

  13. 老赵
    admin
    链接

    老赵 2008-05-17 20:05:00

    @miss zhang
    自己的东西清自己做

  14. miss zhang[未注册用户]
    *.*.*.*
    链接

    miss zhang[未注册用户] 2008-05-18 20:10:00

    好吧,我也是迫不得已,我只能在网吧里面用电脑,公司里不能用,本来对它就不了解。短期完成困难才求救于人的.

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我