惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Google DeepMind News
Google DeepMind News
爱范儿
爱范儿
J
Java Code Geeks
L
LangChain Blog
V
V2EX
大猫的无限游戏
大猫的无限游戏
S
SegmentFault 最新的问题
博客园 - Franky
Microsoft Azure Blog
Microsoft Azure Blog
Jina AI
Jina AI
Blog — PlanetScale
Blog — PlanetScale
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
The Cloudflare Blog
博客园 - 司徒正美
B
Blog
G
Google Developers Blog
Stack Overflow Blog
Stack Overflow Blog
罗磊的独立博客
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Apple Machine Learning Research
Apple Machine Learning Research
Engineering at Meta
Engineering at Meta
MyScale Blog
MyScale Blog
有赞技术团队
有赞技术团队
Hugging Face - Blog
Hugging Face - Blog

博客园 - everx

CruiseControl.net - 找到的一些文档。分享出来 【摘抄】回归测试(Regression Test) 那就来说说ASP.NET MVC中的Routing吧 ASP.NET MVC - View ASP.NET MVC - Controller(part Ⅱ) ASP.NET MVC - Controller(part Ⅰ) ASP.NET MVC - Model 学一下ASP.NET MVC C# 3.0的新特性 jQuery学习笔记(八) jQuery 学习笔记(七) Silverlight学习之路(三) - everx - 博客园 JQuery学习笔记(六) JQuery学习笔记(五) 初次使用log4net Silverlight学习之路(二) JQuery学习笔记(四) 播下silverlight的种子 JQuery学习笔记(三)
SilverLight学习之路(四)
everx · 2008-02-29 · via 博客园 - everx

七、动画和互动
快到最后了,忽然间有点懒了,正好体现了黎明前的黑暗,一定得要紧牙关继续下去才行啊:)
好了,给自己打完气了,开始吧

1、根据一个例子来进入SilverLight的动画世界
a. 找出将要进行动画处理的控件

<Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black" />
也就是要给控件声明一个名字, x:Name

b. 创建EventTrigger
<Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
         
          <!-- Insert Storyboard here. -->
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
使用RoutedEvent指定事件,在BeginStoryboard中开始动画
EventTrigger仅仅支持一个事件,那就是Loaded

c. 创建Storyboard和一个动画
使用DoubleAnimation 来控制Canvas.Left,因为Canvas.Left是double型的
<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>

Duration是指动画一共用多长时间,格式为hour:minute:second
To是指变化的最终值
Storyboard.TargetName是指将要进行动画的控件名
Storyboard.TargetProperty是指将要变化的属性名

2、其他类型的动画
SilverLight还支持其他类型的动画,如ColorAnimation,PointAnimation等
多说无益,还是看例子吧
<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
      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>

有两种不同的方式表示颜色,并使其变化
一个是直接指定Fill属性,另一个是声明一个SolidColorBrush,再指定其color属性
表现在动画上,不同之处就是TargetProperty

3、Timelines的属性
Storyboard 和 DoubleAnimation 都是Timeline类的子类
Timeline的一些有用属性是
Storyboard.TargetName:
Storyboard.TargetProperty:
BeginTime:
Duration: 这个属性除了设置时间间隔外,还有两个特殊值 "Forever" 或"Automatic". 默认值

是 "Automatic".
FillBehavior: 是指在他停止运行时做的行为,有两个值 Stop 或HoldEnd. "Stop" 将其属性值

设置成刚刚开始动画时的状态; "HoldEnd" 表示动画属性将停止在最后那一刻的值上. 默认值是

"HoldEnd".
RepeatBehavior: 这个属性可以有三种类型的值: 循环计数, 时间值, 或者是Forever. "Forever"

导致时间帧无线循环
例如,设置 RepeatBehavior 为"0:0:5" 然后 Duration 为 2.5 秒,这个动画将运行两次;循环

技术可以指定循环几次,例如,4x,1x

<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>

4、需要特别指出的关于动画的属性
DoubleAnimation, ColorAnimation, 和PointAnimation都有以下重要的属性
From:指定开始值
To:指定结束值
By:指定偏移量