XWT – Animation 支持

    XWT内置了Trident作为动画引擎。

   Trident 是一个由 Substance look-and-feel 编写的在应用中驱动动画的动画层的新一代解决方案。底层的动画引擎已经开发和生产应用超过两年了，但是UI API非常难以使用。Trident 的主要目标是保留原项目的强大的功能，性能和现存动画引擎的表现力，同时提供一套简单的API用于使用。 Trident实现原理很像Flash,提供了时间轴(Timeline)概念，

   在XWT中很容易使用Trident，目前提供了一下几种属性动画(Property Anmimation)

对应的类	属性	组件
ColorAnimation	background,foreground	Control
IntAnmiation	alpha	Shell
PointAnimation	location	Control
SizeAnmiation	size	Control
RectangleAnimation	bounds	Control

 

ColorAnmiation

支持颜色的动态变化，用法：

<ColorAnimation targetName="labelTarget" targetProperty="background" duration="0:0:8" from="red" to="blue" />

通过targetName指定目标组件的名称,targetProperty指定目标组件的属性,duration指定持续时间(时:分:秒),from指起始颜色,to目标颜色，通过RGB值变换达到效果。

完整的例子：

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt">
    <Composite.layout>
        <GridLayout numColumns="1"/>
    </Composite.layout>    
    <Label name="labelTarget" text="Move mouse in button to see the animation"/>
    <Button name="startButton" text="Start"/>
    <Composite.triggers>
        <!-- Begin the Storyboard -->
        <EventTrigger routedEvent="SelectionEvent" sourceName="startButton">
          <BeginStoryboard name="MyBeginStoryboard">
            <Storyboard>
              <ColorAnimation 
                 targetName="labelTarget" 
                 targetProperty="background" 
                   duration="0:0:8" from="red" to="blue" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
    </Composite.triggers>
</Composite>

这里是通过XWT触发器完成颜色变换的，触发器调用BeginStoryboard,然后将动画任务属性传达给目标组件和属性。这和WPF的设计思想是一脉相承的。

点击start按钮后,标签的背景色会由red变成blue。

你也可以扩展这个程序,加上停止、暂停和恢复功能。

往.xwt文件拖入几个按钮，然后添加触发器

<Composite.triggers>
        <!-- Begin the Storyboard -->
        <EventTrigger routedEvent="SelectionEvent" sourceName="startButton">
          <BeginStoryboard name="MyBeginStoryboard">
            <Storyboard>
              <ColorAnimation 
                 targetName="labelTarget" 
                 targetProperty="background" 
                   duration="0:0:8" from="red" to="blue" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        <--新增加代码 start>
            <EventTrigger routedEvent="SelectionEvent" sourceName="stopButton">
                <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />  
            </EventTrigger>
            <EventTrigger routedEvent="SelectionEvent" sourceName="pauseButton">
                <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />  
            </EventTrigger>
            <EventTrigger routedEvent="SelectionEvent" sourceName="resumeButton">
                <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />  
            </EventTrigger>
        <--新增加代码 end>
</Composite.triggers>

 

IntAnimation

可以用于窗口的透明度变换,从完全透明到不透明。

<IntAnimation
                 targetName="window"
                 targetProperty="alpha" 
                   duration="0:0:3" from="0" to="255" />

PointAnimation

支持组件大小的变化，用法和ColorAnmiation差不多的：

<PointAnimation
                targetName="window"
                targetProperty="size" 
                duration="0:0:6" from="150, 150" to="600, 600" />

 

SizeAnmiation

  与PointAnmiation类似

 

RectangleAnmiation

   改变窗口的坐标和大小

<RectangleAnimation
                targetName="window"
                targetProperty="bounds" 
                duration="0:0:1" from="10, 10, 150, 150" to="300, 300, 600, 600" />

 

  你可以可以将多种动画效果一起使用：一边改变大小,一边更改坐标。

<Storyboard>
  <PointAnimation
     targetName="window"
     targetProperty="size"
     duration="0:0:1" from="150, 150" to="600, 600" />
  <PointAnimation
     targetName="window"
     targetProperty="location"
     duration="0:0:3" from="10, 10" to="600, 600" />
</Storyboard>

 

    XWT的动画设置和WPF步骤非常相似。

 

    以上这就是XWT支持的最基本动画效果,虽然功能不是非常强大,但是用起来也不怎么复杂，感兴趣可以研究一下。

 

参考资料:System.Windows.Media.Animation Namespace