始建基本动画,从长远的角度考虑Silverlight

一、对于前一篇创制**天空盒的少数补给

[索引页]
[源码下载]

**    

多加商量Silverlight(11) – 2.0卡通之ColorAnimation, DoubleAnimation,
PointAnimation, 内插关键帧动画

      
在事先那篇小说中,大家在穹幕盒中创立了一块木板,可是,你会意识,那块木板还不够诚实,因为在天上中是有太阳的,大家从分歧的见识去观望它,应该现身明暗变化,为了完成如此的效益,我们只须要对Box做如下修改:

作者:webabcd

1   <Geomentry:Box Dimension=”20,1,20″ InteractionEnabled=”True” x:Name=”box”  >
2                 <Geomentry:Box.Material>
3                     <Material:Material Ambient=”Black”  Specular=”White” Shade=”Gouraud” DiffuseMap=”/MaterialDemo;component/Assets/f.png” />
4                 </Geomentry:Box.Material>
5             </Geomentry:Box>

介绍
Silverlight 2.0 动画:
    ColorAnimation – 在七个 Color 值之间做线性内插动画处理
    DoubleAnimation – 在三个 Double 值之间做线性内插动画处理
    PointAnimation – 在七个 Point 值之间做线性内插动画处理
    内插关键帧动画 – 在 Color 或 Double 或 Point
动画中内插关键帧,以做线性, 离散, 三回贝塞尔曲线的动画处理
    动态改变动画 – 通进程控,动态地改变动画

细心察看,就会发现,大家扩大了Ambient(环境光),Specular(镜面反射),Shade(阴影)效果,就行了。具体有关它们的介绍,请参考3D统一筹划光线相关质地,对此,由于作者对此素不相识,就不多做牵线了,以防误导别人。

在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

 

示例
1、ColorAnimation.xaml

② 、本篇主旨Balder中的动画

图片 1<UserControl x:Class=”Silverlight20.Animation.ColorAnimation”
图片 2    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
图片 3    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml"&gt;
图片 4    <StackPanel HorizontalAlignment=”Left”>
图片 5
图片 6        <Ellipse x:Name=”ellipse” Fill=”Red” Width=”200″ Height=”100″>
图片 7            <Ellipse.Triggers>
图片 8            
图片 9                <!–
图片 10                Routed伊芙nt – 所属对象的路由事件,仅有Loaded这一个事件
图片 11                –>
图片 12                <EventTrigger RoutedEvent=”Ellipse.Loaded”>
图片 13                    <BeginStoryboard x:Name=”beginStoryboard”>
图片 14                        <Storyboard x:Name=”storyboard”>
图片 15                        
图片 16                            <!–ColorAnimation – 在四个 Color 值之间做线性内插动画处理–>
图片 17                            <!–
图片 18                            Storyboard.TargetName – 要实行动画处理的目的的称呼
图片 19                            Storyboard.TargetProperty – 要开始展览动画处理的目标的习性
图片 20                            BeginTime – 时间线在被触发 BeginTime 的时刻后才能起头广播
图片 21                                TimeSpan – [-][日.]时:分:秒[.壹人到7为的秒后的小数](可为正;可为负;可为空;私下认可值为 0)
图片 22                            From – 动画的起头值
图片 23                            To – 动画的结束值
图片 24                            By – 动画从起始值开首猜度,所需转变的总量(To 优先于 By)
图片 25                            Duration – 时间线的持续时间
图片 26                                TimeSpan – [-][日.]时:分:秒[.一人到7为的秒后的小数]
图片 27                                Automatic – 自动明确
图片 28                                Forever – 无限长
图片 29                            AutoReverse – 动画完毕后是还是不是要原路再次来到。暗中认可值为 false
图片 30                            RepeatBehavior – 动画重复播放的岁月、次数或项目
图片 31                                TimeSpan – [-][日.]时:分:秒[.一人到7为的秒后的小数]
图片 32                                nx – 播放次数。1x, 2x, 3x 图片 33
图片 34                                Forever – 永久播放
图片 35                            SpeedRatio – 时间线的速率的翻番。默许值 1
图片 36                            FillBehavior – 动画停止后的行事 [System.Windows.Media.Animation.FillBehavior枚举]
图片 37                                FillBehavior.HoldEnd – 动画截至后,保留动画属性的结束值。私下认可值
图片 38                                FillBehavior.Stop – 动画截至后,恢复生机动画属性为其初步值
图片 39                            –>
图片 40                            <ColorAnimation 
图片 41                                Storyboard.TargetName=”ellipse” 
图片 42                                Storyboard.TargetProperty=”(Ellipse.Fill).(SolidColorBrush.Color)” 
图片 43                                BeginTime=”00:00:0″ 
图片 44                                From=”Red” 
图片 45                                To=”Yellow” 
图片 46                                Duration=”Automatic” 
图片 47                                AutoReverse=”True” 
图片 48                                RepeatBehavior=”3x”>
图片 49                            </ColorAnimation>
图片 50                        </Storyboard>
图片 51                    </BeginStoryboard>
图片 52                </EventTrigger>
图片 53            </Ellipse.Triggers>
图片 54        </Ellipse>
图片 55
图片 56    </StackPanel>
图片 57</UserControl>
图片 58

        

2、DoubleAnimation.xaml

         
Balder中的动画,其实,在事先的稿子中曾经应用过了,具体请看Pepsi-Cola初次相遇,那时,你会骂道:“楼主,那。。那。。已经讲过了,也用过了,还将个屁啊。”没错,其实,后日讲的卡通和万分动画一样又有点不平等。在上次中,我们见到首要代码是那般的:

图片 59<UserControl x:Class=”Silverlight20.Animation.DoubleAnimation”
图片 60    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
图片 61    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml"&gt;
图片 62    <StackPanel HorizontalAlignment=”Left”>
图片 63    
图片 64        <Rectangle x:Name=”rectangle” Width=”200″ Height=”100″ Stroke=”Black” StrokeThickness=”6″ RadiusX=”25″ RadiusY=”25″>
图片 65            <Rectangle.Fill>
图片 66                <ImageBrush ImageSource=”/Silverlight20;component/Images/Logo.jpg” Stretch=”Fill” />
图片 67            </Rectangle.Fill>
图片 68        </Rectangle>
图片 69        
图片 70        <StackPanel.Resources>
图片 71            <BeginStoryboard x:Name=”beginStoryboard”>
图片 72                <Storyboard x:Name=”storyboard”>
图片 73
图片 74                    <!–DoubleAnimation – 在三个 Double 值之间做线性内插动画处理–>
图片 75                    <!–
图片 76                    Storyboard.TargetName – 要开始展览动画处理的靶子的名号
图片 77                    Storyboard.TargetProperty – 要拓展动画处理的靶子的性情
图片 78                    BeginTime – 时间线在被触发 Begin提姆e 的年华后才能发轫广播
图片 79                        TimeSpan – [-][日.]时:分:秒[.1位到7为的秒后的小数](可为正;可为负;可为空;暗中同意值为 0)
图片 80                    From – 动画的初始值
图片 81                    To – 动画的终止值
图片 82                    By – 动画从起始值开头盘算,所需转变的总量(To 优先于 By)
图片 83                    Duration – 时间线的持续时间
图片 84                        TimeSpan – [-][日.]时:分:秒[.1个人到7为的秒后的小数]
图片 85                        Automatic – 自动明显
图片 86                        Forever – 无限长
图片 87                    AutoReverse – 动画达成后是还是不是要原路重返。暗中同意值为 false
图片 88                    RepeatBehavior – 动画重复播放的时间、次数或项目
图片 89                        TimeSpan – [-][日.]时:分:秒[.1个人到7为的秒后的小数]
图片 90                        nx – 播放次数。1x, 2x, 3x 图片 91
图片 92                        Forever – 永久播放
图片 93                    SpeedRatio – 时间线的速率的翻番。暗许值 1
图片 94                    FillBehavior – 动画甘休后的行事 [System.Windows.Media.Animation.FillBehavior枚举]
图片 95                        FillBehavior.HoldEnd – 动画停止后,保留动画属性的利落值。默许值
图片 96                        FillBehavior.Stop – 动画结束后,恢复生机动画属性为其伊始值
图片 97                    –>
图片 98                    <DoubleAnimation 
图片 99                        Storyboard.TargetName=”rectangle” 
图片 100                        Storyboard.TargetProperty=”Width”
图片 101                        From=”100″
图片 102                        By=”100″
图片 103                        BeginTime=”0:0:3″
图片 104                        Duration=”00:00:03″
图片 105                        AutoReverse=”False”
图片 106                        RepeatBehavior=”Forever”>
图片 107                    </DoubleAnimation>
图片 108                </Storyboard>
图片 109            </BeginStoryboard>
图片 110        </StackPanel.Resources>
图片 111        
图片 112    </StackPanel>
图片 113</UserControl>
图片 114

 1 <Grid.Triggers>
 2  <EventTrigger RoutedEvent=”Grid.Loaded”>
 3  <BeginStoryboard>
 4  <Storyboard AutoReverse=”true” RepeatBehavior=”Forever”>
 5  <DoubleAnimation Storyboard.TargetName=”Camera” Storyboard.TargetProperty=”(Camera.Position).(X)” From=”-100″ To=”100″ Duration=”00:00:05″>
 6  <DoubleAnimation.EasingFunction>
 7  <ElasticEase/>
 8  </DoubleAnimation.EasingFunction>
 9  </DoubleAnimation>
10  </Storyboard>
11  </BeginStoryboard>
12  </EventTrigger>
13  </Grid.Triggers>

3、PointAnimation.xaml

这里是使用了一个轩然大波触发器,来触发动画,然则,你要领悟,在Silverlight中,Routed伊夫nt只是永葆Loaded事件的,假设您要更大的油滑,那怎么做?例如你要点击某些按钮来触发动画,曾几何时让动画甘休,开头另五个动画,那不是说利用触发器是至极的,只是操作起来相对不是那么直接了,你需求这么做:

图片 115<UserControl x:Class=”Silverlight20.Animation.PointAnimation”
图片 116    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
图片 117    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml"&gt;
图片 118    <StackPanel HorizontalAlignment=”Left”>
图片 119    
图片 120        <StackPanel Orientation=”Horizontal”>
图片 121
图片 122            <Button Click=”Animation_Begin” Width=”65″ Height=”30″ Margin=”2″ Content=”Begin” />
图片 123
图片 124            <Button Click=”Animation_Pause” Width=”65″ Height=”30″ Margin=”2″ Content=”Pause” />
图片 125
图片 126            <Button Click=”Animation_Resume” Width=”65″ Height=”30″ Margin=”2″ Content=”Resume” />
图片 127
图片 128            <Button Click=”Animation_Stop” Width=”65″ Height=”30″ Margin=”2″ Content=”Stop” />
图片 129            
图片 130        </StackPanel>
图片 131    
图片 132        <Path Fill=”Red”>
图片 133            <Path.Data>
图片 134                <EllipseGeometry x:Name=”ellipseGeometry” Center=”50,50″ RadiusX=”15″ RadiusY=”15″ />
图片 135            </Path.Data>
图片 136        </Path>
图片 137        
图片 138        <StackPanel.Resources>
图片 139            <Storyboard x:Name=”storyboard”>
图片 140
图片 141                <!–PointAnimation – 在四个 Point 值之间做线性内插动画处理–>
图片 142                <!–
图片 143                Storyboard.TargetName – 要拓展动画处理的对象的名称
图片 144                Storyboard.TargetProperty – 要举办动画处理的对象的属性
图片 145                BeginTime – 时间线在被触发 BeginTime 的光阴后才能开播
图片 146                    TimeSpan – [-][日.]时:分:秒[.一人到7为的秒后的小数](可为正;可为负;可为空;默许值为 0)
图片 147                From – 动画的初始值
图片 148                To – 动画的利落值
图片 149                By – 动画从起首值伊始盘算,所需变更的总量(To 优先于 By)
图片 150                Duration – 时间线的持续时间
图片 151                    TimeSpan – [-][日.]时:分:秒[.一人到7为的秒后的小数]
图片 152                    Automatic – 自动分明
图片 153                    Forever – 无限长
图片 154                AutoReverse – 动画落成后是或不是要原路重临。暗中认可值为 false
图片 155                RepeatBehavior – 动画重复播放的岁月、次数或项目
图片 156                    TimeSpan – [-][日.]时:分:秒[.一位到7为的秒后的小数]
图片 157                    nx – 播放次数。1x, 2x, 3x 图片 158
图片 159                    Forever – 永久播放
图片 160                SpeedRatio – 时间线的速率的翻番。暗中同意值 1
图片 161                FillBehavior – 动画结束后的一言一行 [System.Windows.Media.Animation.FillBehavior枚举]
图片 162                    FillBehavior.HoldEnd – 动画截止后,保留动画属性的截止值。暗中同意值
图片 163                    FillBehavior.Stop – 动画停止后,复苏动画属性为其起先值
图片 164                –>
图片 165                <PointAnimation
图片 166                    Storyboard.TargetName=”ellipseGeometry”
图片 167                    Storyboard.TargetProperty=”Center”
图片 168                    BeginTime=”00:00:00″
图片 169                    From=”50,50″
图片 170                    To=”300,500″
图片 171                    Duration=”0:0:3″
图片 172                    AutoReverse=”True”
图片 173                    RepeatBehavior=”00:00:10″>
图片 174                </PointAnimation>
图片 175            </Storyboard>
图片 176        </StackPanel.Resources>
图片 177        
图片 178    </StackPanel>
图片 179</UserControl>
图片 180

  • 要对不属于控件的靶子的习性实行动画处理,请将演示图板放在页面或应用程序的常规
    Resources
    中。然后在放置”Triggers”的要素上分红3个事件处理程序。响应相关事件时,该事件处理程序应从能源字典中摸索演示图板。然后,您对寻找到的
    Storyboard
    调用 Begin

PointAnimation.xaml.cs

  • 要对属于控件的指标的特性举办动画处理(派生自 Control),请使用
    VisualStateManager
    技术,并通过调用 GoToState
    根据控件的动静或输入新闻运维适当的卡通片。

  • (以上摘自Silverlight官方文书档案)

图片 181using System;
图片 182using System.Collections.Generic;
图片 183using System.Linq;
图片 184using System.Net;
图片 185using System.Windows;
图片 186using System.Windows.Controls;
图片 187using System.Windows.Documents;
图片 188using System.Windows.Input;
图片 189using System.Windows.Media;
图片 190using System.Windows.Media.Animation;
图片 191using System.Windows.Shapes;
图片 192
图片 193namespace Silverlight20.Animation
图片 194图片 195图片 196{
图片 197    public partial class PointAnimation : UserControl
图片 198图片 199    图片 200{
图片 201        public PointAnimation()
图片 202图片 203        图片 204{
图片 205            InitializeComponent();
图片 206        }
图片 207
图片 208        private void Animation_Begin(object sender, RoutedEventArgs e)
图片 209图片 210        图片 211{
图片 212            // 播放
图片 213            storyboard.Begin();
图片 214        }
图片 215
图片 216        private void Animation_Pause(object sender, RoutedEventArgs e)
图片 217图片 218        图片 219{
图片 220            // 暂停
图片 221            storyboard.Pause();
图片 222        }
图片 223
图片 224        private void Animation_Resume(object sender, RoutedEventArgs e)
图片 225图片 226        图片 227{
图片 228            // 继续
图片 229            storyboard.Resume();
图片 230        }
图片 231
图片 232        private void Animation_Stop(object sender, RoutedEventArgs e)
图片 233图片 234        图片 235{
图片 236            // 停止
图片 237            storyboard.Stop();
图片 238        }
图片 239    }
图片 240}
图片 241

         
,为此,依旧选择对后台代码进行动画编制程序比较一向。而且,你会意识合法的例证,它的卡通片大部分都是在xaml中定义的,关于那地点,此前园子里Nowpaper已经介绍过局地了,请看那里http://www.cnblogs.com/nowpaper/archive/2010/11/16/1878242.html ,那里早已介绍了balder中的不难动画,而且讲得很好,其实,那篇小说中简单的动画片总括起来便是经过计时器来定时的对模型和现象的观测角度和考察地方的更动,或许对模型直接的任务和角度变化。大家明日讲另一种动画达成格局:通过使用storyboard(传说板)来实行。

4、KeyFrame.xaml

      
storyboard相信大家都很熟稔,正是经过时间线控制动画,并为其子动画提供对象和性质目的音讯。子动画有DoubleAnimation,ColorAnimation等等,那里大家是对模型可能录制机的坐标进行变更,所以理应是DoubleAnimation,首要实行的性质变化本来是Position了,当中,Position又有多个轻重:X,Y,Z分别表示相继方向轴坐标的坐标点。所以设置模型的靶子属性是(Node.Position).(X),摄像机的对象属性是:”(Camera.Position).(X)” ,不过你会发现,那里每种动画都都言之有物到种种X,Y,Z分量,假若大家要同时举行X,Y,Z几个方向的动画片就得定义一回。为此,在balder中针对于那种情况,封装了多个类:

图片 242<UserControl x:Class=”Silverlight20.Animation.KeyFrame”
图片 243    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
图片 244    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml"&gt;
图片 245    <StackPanel HorizontalAlignment=”Left”>
图片 246    
图片 247        <!–
图片 248        ColorAnimationUsingKeyFrames – 在一组 KeyFrame 中所设置的八个 Color 值之间做动画处理
图片 249        DoubleAnimationUsingKeyFrames – 在一组 KeyFrame 中所设置的四个 Double 值之间做动画处理
图片 250        PointAnimationUsingKeyFrames – 在一组 KeyFrame 中所设置的多个 Point 值之间做动画处理
图片 251        –>
图片 252        
图片 253        <!–
图片 254        LinearColorKeyFrame – 在前八个关键帧的 Color 值及其本身的 Value 之间开始展览线性内插动画处理
图片 255        DiscreteColorKeyFrame – 在前二个关键帧的 Color 值及其自身的 Value 之间开始展览离散内插动画处理
图片 256        SplineColorKeyFrame – 在前五个关键帧的 Color 值及其本身的 Value 之间按 2回贝塞尔曲线 举行内插动画处理
图片 257        
图片 258        LinearDoubleKeyFrame – 在前3个关键帧的 Double 值及其本人的 Value 之间开始展览线性内插动画处理
图片 259        DiscreteDoubleKeyFrame – 在前3个关键帧的 Double 值及其本人的 Value 之间展开离散内插动画处理
图片 260        SplineDoubleKeyFrame – 在前一个关键帧的 Double 值及其自个儿的 Value 之间按 一回贝塞尔曲线 进行内插动画处理
图片 261        
图片 262        LinearPointKeyFrame – 在前二个关键帧的 Point 值及其自身的 Value 之间开展线性内插动画处理
图片 263        DiscretePointKeyFrame – 在前3个关键帧的 Point 值及其本人的 Value 之间开始展览离散内插动画处理
图片 264        SplinePointKeyFrame – 在前一个关键帧的 Point 值及其自身的 Value 之间按 3遍贝塞尔曲线 举办内插动画处理
图片 265        –>
图片 266        
图片 267        <!–
图片 268        Value – 关键帧的靶子值
图片 269        KeyTime – 到达关键帧指标值的年华
图片 270        KeySpline – 一遍贝塞尔曲线的八个控制点:x1,y1 x2,y2(该三回贝塞尔曲线的源点为0,0,终点为1,1)
图片 271        –>
图片 272    
图片 273        <Grid Margin=”5″ >
图片 274            <Grid.Resources>
图片 275                <Storyboard x:Name=”caStoryboard”>
图片 276                    <ColorAnimationUsingKeyFrames
图片 277                        Storyboard.TargetName=”caBrush”
图片 278                        Storyboard.TargetProperty=”Color”
图片 279                        Duration=”0:0:10″
图片 280                    >
图片 281                        <LinearColorKeyFrame Value=”Green” KeyTime=”0:0:3″ />
图片 282                        <DiscreteColorKeyFrame Value=”Blue” KeyTime=”0:0:4″ />
图片 283                        <SplineColorKeyFrame Value=”Red” KeySpline=”0.6,0.0 0.9,0.00″ KeyTime=”0:0:6″ />
图片 284                    </ColorAnimationUsingKeyFrames>
图片 285                </Storyboard>
图片 286            </Grid.Resources>
图片 287
图片 288            <Rectangle x:Name=”caRectangle” MouseLeftButtonDown=”caRectangle_MouseLeftButtonDown” Width=”100″ Height=”50″>
图片 289                <Rectangle.Fill>
图片 290                    <SolidColorBrush x:Name=”caBrush” Color=”Red” />
图片 291                </Rectangle.Fill>
图片 292            </Rectangle>
图片 293        </Grid>
图片 294
图片 295        <Grid Margin=”5″ >
图片 296            <Grid.Resources>
图片 297                <Storyboard x:Name=”daStoryboard”>
图片 298                    <DoubleAnimationUsingKeyFrames
图片 299                        Storyboard.TargetName=”daTransform”
图片 300                        Storyboard.TargetProperty=”X”
图片 301                        Duration=”0:0:10″
图片 302                    >
图片 303                        <LinearDoubleKeyFrame Value=”500″ KeyTime=”0:0:3″ />
图片 304                        <DiscreteDoubleKeyFrame Value=”400″ KeyTime=”0:0:4″ />
图片 305                        <SplineDoubleKeyFrame Value=”0″ KeySpline=”0.6,0.0 0.9,0.00″ KeyTime=”0:0:6″ />
图片 306                    </DoubleAnimationUsingKeyFrames>
图片 307                </Storyboard>
图片 308            </Grid.Resources>
图片 309
图片 310            <Rectangle x:Name=”daRectangle” MouseLeftButtonDown=”daRectangle_MouseLeftButtonDown” Fill=”Red” Width=”100″ Height=”50″>
图片 311                <Rectangle.RenderTransform>
图片 312                    <TranslateTransform x:Name=”daTransform” X=”0″ Y=”0″ />
图片 313                </Rectangle.RenderTransform>
图片 314            </Rectangle>
图片 315        </Grid>
图片 316
图片 317        <Grid Margin=”5″ >
图片 318            <Grid.Resources>
图片 319                <Storyboard x:Name=”paStoryboard”>
图片 320                    <PointAnimationUsingKeyFrames
图片 321                        Storyboard.TargetName=”paGeometry”
图片 322                        Storyboard.TargetProperty=”Center”
图片 323                        Duration=”0:0:10″
图片 324                    >
图片 325                        <LinearPointKeyFrame Value=”100,100″ KeyTime=”0:0:3″ />
图片 326                        <DiscretePointKeyFrame Value=”200,200″ KeyTime=”0:0:4″ />
图片 327                        <SplinePointKeyFrame Value=”50,50″ KeySpline=”0.6,0.0 0.9,0.00″ KeyTime=”0:0:6″ />
图片 328                    </PointAnimationUsingKeyFrames>
图片 329                </Storyboard>
图片 330            </Grid.Resources>
图片 331
图片 332            <Path Fill=”Red” MouseLeftButtonDown=”paPath_MouseLeftButtonDown”>
图片 333                <Path.Data>
图片 334                    <EllipseGeometry x:Name=”paGeometry” Center=”50,50″ RadiusX=”15″ RadiusY=”15″ />
图片 335                </Path.Data>
图片 336            </Path>
图片 337        </Grid>
图片 338    </StackPanel>
图片 339</UserControl>
图片 340

1.CoordinateAnimation

KeyFrame.xaml.cs

2.StoryboardExtensions

图片 341using System;
图片 342using System.Collections.Generic;
图片 343using System.Linq;
图片 344using System.Net;
图片 345using System.Windows;
图片 346using System.Windows.Controls;
图片 347using System.Windows.Documents;
图片 348using System.Windows.Input;
图片 349using System.Windows.Media;
图片 350using System.Windows.Media.Animation;
图片 351using System.Windows.Shapes;
图片 352
图片 353namespace Silverlight20.Animation
图片 354图片 355图片 356{
图片 357    public partial class KeyFrame : UserControl
图片 358图片 359    图片 360{
图片 361        public KeyFrame()
图片 362图片 363        图片 364{
图片 365            InitializeComponent();
图片 366        }
图片 367
图片 368        private void caRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
图片 369图片 370        图片 371{
图片 372            caStoryboard.Begin();
图片 373        }
图片 374
图片 375        private void daRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
图片 376图片 377        图片 378{
图片 379            daStoryboard.Begin();
图片 380        }
图片 381
图片 382        private void paPath_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
图片 383图片 384        图片 385{
图片 386            paStoryboard.Begin();
图片 387        }
图片 388    }
图片 389}
图片 390

个中,CoordinateAnimation类的组织比较简单:

5、Programmatically.xaml

 

图片 391<UserControl x:Class=”Silverlight20.Animation.Programmatically”
图片 392    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
图片 393    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml"&gt;
图片 394    <StackPanel HorizontalAlignment=”Left”>
图片 395
图片 396        <!–
图片 397        MouseLeftButtonDown – 在该Canvas上单击鼠标后所推行的风云
图片 398        –>
图片 399        <Canvas x:Name=”canvas” Background=”Yellow” Width=”640″ Height=”480″ MouseLeftButtonDown=”Canvas_MouseLeftButtonDown”>
图片 400            <Path Fill=”Red”>
图片 401                <Path.Data>
图片 402                    <EllipseGeometry x:Name=”ellipseGeometry” Center=”200,100″ RadiusX=”15″ RadiusY=”15″ />
图片 403                </Path.Data>
图片 404            </Path>
图片 405        </Canvas>
图片 406
图片 407        <StackPanel.Resources>
图片 408            <Storyboard x:Name=”storyboard”>
图片 409                <PointAnimation 
图片 410                    x:Name=”pointAnimation”
图片 411                    Storyboard.TargetProperty=”Center”
图片 412                    Storyboard.TargetName=”ellipseGeometry”
图片 413                    Duration=”0:0:2″/>
图片 414            </Storyboard>
图片 415        </StackPanel.Resources>
图片 416    </StackPanel>
图片 417
图片 418</UserControl>
图片 419

 1 public class CoordinateAnimation
 2  {
 3  public string TargetName { get; set; }
 4  public string TargetProperty { get; set; }
 5  public DependencyObject Target { get; set; }
 6  public Coordinate From { get; set; }
 7  public Coordinate To { get; set; }
 8  public IEasingFunction EasingFunction { get; set; }
 9  public TimeSpan? BeginTime { get; set; }
10  public Duration Duration { get; set; }
11  }
12 

Programmatically.xaml.cs

而相对复杂的是StoryboardExtensions,要留心的是它是2个静态类,因而,在采纳的时候不能够对它实行实例化,而是通过使用其静态方法:static
void SetCoordinateAnimation(DependencyObject obj, CoordinateAnimation
coordinateAnimation)

图片 420using System;
图片 421using System.Collections.Generic;
图片 422using System.Linq;
图片 423using System.Net;
图片 424using System.Windows;
图片 425using System.Windows.Controls;
图片 426using System.Windows.Documents;
图片 427using System.Windows.Input;
图片 428using System.Windows.Media;
图片 429using System.Windows.Media.Animation;
图片 430using System.Windows.Shapes;
图片 431
图片 432namespace Silverlight20.Animation
图片 433图片 434图片 435{
图片 436    public partial class Programmatically : UserControl
图片 437图片 438    图片 439{
图片 440        public Programmatically()
图片 441图片 442        图片 443{
图片 444            InitializeComponent();
图片 445        }
图片 446
图片 447        private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
图片 448图片 449        图片 450{
图片 451            // 鼠标相对与canvas的坐标
图片 452            double newX = e.GetPosition(canvas).X;
图片 453            double newY = e.GetPosition(canvas).Y;
图片 454            Point myPoint = new Point(newX, newY);
图片 455
图片 456            // 将动画片的利落值设置为鼠标的此时此刻坐标
图片 457            pointAnimation.To = myPoint;
图片 458
图片 459            // 播放动画
图片 460            storyboard.Begin();
图片 461        }
图片 462    }
图片 463}
图片 464

来实行起首化,方法中的参数obj是三个依靠对象,那里只要传入三个Storyboard实例就行了,而背后的参数正是3个CoordinateAnimation类的对象,那几个目的在前头就安装好内部的顺序属性,例如TargetName,TargetProperty,Target等质量。尤其需求注意的是Target属性,假如没有点名的话,会冒出TargetName
无法解析的那多少个。那么使用这么些类,为何能落到实处多个坐标方向的卡通片呢?秘密就在StoryboardExtensions类中,在它当中,对Storyboard添加了八个轻重的自对象:

OK
[源码下载]

1.storyboard.Children.Add(xAnimation);

2.storyboard.Children.Add(yAnimation);

3.storyboard.Children.Add(zAnimation);

那全体都归功于依靠属性的强大之处。说了那么多,大家照旧来实战一下呢,依然在上次木板天空盒的例证上转移:笔者是对木板完成各种方向的旋转动画。

**

三 、实战动画之旋转

**

因为是旋转,因而,那里的TargetProperty不是Position而是Rotation。
第一步:
打开上次的工程,在xaml中大家抬高中二年级个ComboBox,来提供差别方向的转动:
         <ComboBox Width=”100″ Height=”40″
SelectionChanged=”ComboBox_SelectionChanged” Margin=”30″>
                <ComboBoxItem Content=”沿着X轴转动”
IsSelected=”True”/>
                <ComboBoxItem Content=”沿着Y轴转动”/>
                <ComboBoxItem Content=”沿着Z轴转动”/>
            </ComboBox>

第二步:
在后台代码的SelectionChanged事件处理程序中添加如下重要代码:

 1  CoordinateAnimation  ca=new CoordinateAnimation();
 2                 ca.From =new Balder.Math.Coordinate(0,0,0);//沿着X轴旋转360度
 3                 ca.To = new Balder.Math.Coordinate(365,0,0);
 4                 ca.TargetProperty = “(Node.Rotation)”;       //目的属性
 5                 ca.TargetName = “box”;
 6                 ca.Target = box;                             //目的对象
 7                 ca.Duration = TimeSpan.FromMilliseconds(1000);
 8                 Storyboard sb = new Storyboard();
 9                 sb.RepeatBehavior = RepeatBehavior.Forever;
10                 StoryboardExtensions.SetCoordinateAnimation(sb, ca);
11                 
12                 sb.Begin();

那边只交给了根本代码,因为任何多少个趋势的操作与之相似,就不多啰嗦了,别的要留心的是其一box是在xaml中的博克斯对象的实例,在xaml中的定义是:x:Name=“box”,然后在后台代码中援引,还有别忘记引用命名空间:Balder.Animation.Silverlight;最终看看效果:

图片 465