时间戳

首页 > 技术文章 > Sliverlight之　故事板

Sliverlight之　故事板

huaci 2015-04-09 14:32 原文

见Project19

(1) 将一张图片每隔一秒旋转72度，看看效果是什么样(使用定时器)

说明：
前端

<Image.RenderTransform>
<RotateTransform Angle="0" x:Name="myRotate"></RotateTransform>
</Image.RenderTransform>

 

代码

DispatcherTimer dt = new DispatcherTimer();
dt.Interval = TimeSpan.FromMilliseconds(1000);
dt.Tick += dt_Tick;
dt.Start();

void dt_Tick(object sender, EventArgs e)
{
myRotate.Angle += 72; 
}

 

 

(2) 什么是故事板，它用什么标签表示,它被定义在哪里

说明：
故事板，可以定义动画效果,它比定时器，效果更平滑，更简单
故事板使用StoryBoard标签定义,一般定义在Resource资源标签内
故事板本质是更改某个控件或标签的属性值

作用源：Storyboard.TargetName和Storyboard.TargetProperty

常用属性：
From 初始值
To(或By) To为终点值,By的终点值=From值+By值
Duration 动画持续时间
AutoReverse 是否倒着播放
RepeatBehavior 播放次数 3次则写成"3x" 永久播放则写成"Forever"

启动动画 动画名.Begin();

 

(3) Animation有哪些类型,应该如何根据实际情况去使用不同的Animation

说明：

动画类别常用的包括3大类
DoubleAnimation 被修改的属性值是Double类型(也包括int和float类型)
ColorAnimation 被修改的属性值是Color一类,常用于修改Brush画刷的Color值
PointAnimation 更改一个Point点，在几何绘图Geometry中用到比较多

 


(4) 将(1)中的效果，用故事板实现

说明：

<UserControl.Resources>
<Storyboard x:Name="myStoryBoard">
<DoubleAnimation Storyboard.TargetName="myRotate2" Storyboard.TargetProperty="Angle" From="0" To="72"
Duration="0:0:1" AutoReverse="False" RepeatBehavior="3x"></DoubleAnimation> 
</Storyboard> 
</UserControl.Resources>

<Image.RenderTransform>
<RotateTransform Angle="0" x:Name="myRotate2"></RotateTransform>
</Image.RenderTransform>

 

代码：

myStoryBoard.Begin();

 


(5) 请区分在xaml中Name和x:Name的用法及区别的

说明：
一般在控件中，可以直接使用Name
而在一些属性标签中定义，就不能直接使用Name,需要用x:Name
另外，在控件中，也可以用x:Name,x:Name的应用范围更大些

 

(6) Animation中的属性To和By有什么区别

说明：
From="30" To="70" By="70"
To 终点值70
By　终点值100 (30+70)


(7) 将(2)示例再加一个位移的动画

说明：

<UserControl.Resources>
<Storyboard x:Name="myStoryBoard">
<DoubleAnimation Storyboard.TargetName="myRotate2" Storyboard.TargetProperty="Angle" From="50" To="72"
Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="myTranslate2" Storyboard.TargetProperty="X" From="0" To="100"
Duration="0:0:2"></DoubleAnimation>
</Storyboard> 
</UserControl.Resources>

<Image.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="myRotate2"></RotateTransform>
<TranslateTransform x:Name="myTranslate2"></TranslateTransform>
</TransformGroup>
</Image.RenderTransform>

 

代码：
myStoryBoard.Begin();

myStoryBoard.Begin();

 


(8) 故事板的开始，暂停，继续，停止，分别对应什么方法

说明：
开始 Begin()
暂停 Pause()
继续 Resume()
停止 Stop()

 

(9) 在中文帮助里，搜索“动画概述”，了解一下动画

说明：

两大动画类型

From/To/By动画: 起始值和结束值之间进行动画处理
关键帧动画：可以有多个目标值，相对前者，更强大

 

(10) DoubleAnimation中的AutoReverse属性有什么作用，用示例演示

说明：
AutoReverse 是否倒着播放


(11) DoubleAnimation中的RepeterBehavior有什么作用，用示例演示(它的值3x,或者Forever分别代表什么意思)

说明：
RepeatBehavior 播放次数 3次则写成"3x" 永久播放则写成"Forever"


(12) 有两个动画，如何让第2个动画延迟3秒后开始播放，用示例演示(使用BeginTime属性)

说明：

myStoryBoard.Begin();
story2.BeginTime = TimeSpan.FromSeconds(5);
story2.Begin();

 


(13) 用ColorAnimation实现一个Rectangel由红变绿，一次时间5秒，重复3次。你会遇到哪些问题，说明原因，怎么解决

说明：
第1种方式,为画刷定义动画

<Storyboard x:Name="story1">
<ColorAnimation Storyboard.TargetName="mySolid" Storyboard.TargetProperty="Color"
From="Red" To="Green" Duration="0:0:5" RepeatBehavior="3x"></ColorAnimation>

</Storyboard>

 


</Storyboard>

第2种:为控件自身定义动画,注意Storyboard.TargetProperty="Fill"会报错哦，所以要写成"(Rectangle.Fill).(SolidColorBrush.Color)"

<Storyboard x:Name="story2">
<ColorAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
From="Red" To="Yellow" Duration="0:0:5" RepeatBehavior="3x"></ColorAnimation>

</Storyboard>

 

 

(14) 动画按顺序播放，有哪两种方法

说明：
第1种 BeginTime()方法

story1.Begin();
story2.BeginTime = TimeSpan.FromSeconds(3); //第2个动画3秒后，开始播放
story2.Begin();

 

第2种方法 Completed事件

<Storyboard x:Name="story1" Completed="story1_Completed">

private void story1_Completed(object sender, EventArgs e) //动画1完成以后，动画2开始播放
{
story2.Begin();
}

 

第1种方法，更精确到具体时间,前面的动画或许没有播放完成
第2种动画，表示前面的动画已经播放完成了


(15) 演示一下PointAnimation动画效果

说明：
PointAnimation更改的是一个Point坐标属性，一般用在几何绘图Geometry中比较多

 

<UserControl.Resources>
<Storyboard x:Name="myStoryboard">
<!-- Animate the center point of the ellipse from 100 X, 300 Y
to 400 X, 100 Y over 5 seconds. -->
<PointAnimation
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5" 
From="100,300"
To="400,100"
RepeatBehavior="Forever" />
<PointAnimation
Storyboard.TargetName="myLineGeometry"
Storyboard.TargetProperty="EndPoint"
Duration="0:0:3"
From="100,100"
To="200,200"
RepeatBehavior="3x"
AutoReverse="True" />
</Storyboard>
</UserControl.Resources>

<Path Fill="Blue" Loaded="Start_Animation" Stroke="Red" StrokeThickness="3">
<Path.Data>
<GeometryGroup>
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="200,100" RadiusX="15" RadiusY="15" />
<LineGeometry x:Name="myLineGeometry" StartPoint="100,100" EndPoint="200,200"></LineGeometry>
</GeometryGroup>

</Path.Data>
</Path>

 


(16) 什么是关键帧动画，查看中文帮助和示例了解

说明：
关键帧动画，通过设置多种多个动画补间，可以做出很炫的动画效果，它比线性插值动画更强大，可以控制动画变化节奏的快慢

以关键帧动画DoubleAnimationUsingKeyFrames为例
它有3种动画补间
LinearDoubleKeyFrame 匀速运动
DiscreteDoubleKeyFrame 离散运动，直接跳到这个值，没有任何变化特性
SplineDoubleKeyFrame 多键关键帧，采用KeySpline设置两个控制点，控制运动快慢

 

(17) 用关键帧动画实现将一个按钮的旋转

说明：

使用关键帧动画DoubleAnimationUsingKeyFrames

<UserControl.Resources>
<Storyboard x:Name="myStory"
Storyboard.TargetName="myRotate"
Storyboard.TargetProperty="Angle"
Duration="0:0:10" RepeatBehavior="2x" >
<DoubleAnimationUsingKeyFrames>

<LinearDoubleKeyFrame Value="50" KeyTime="0:0:1" />
<DiscreteDoubleKeyFrame Value="110" KeyTime="0:0:3" />

<SplineDoubleKeyFrame KeySpline="0.9,0.0 0.3,0.0" Value="260" KeyTime="0:0:2"></SplineDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>

<Button.RenderTransform>
<RotateTransform Angle="0" x:Name="myRotate"></RotateTransform>
</Button.RenderTransform>

 

(18) 关键帧动画中的KeyTime表示什么含义，它和Duration有什么区别

说明：
KeyTime="0:0:2" 表示在第2秒时，执行当前这个补间,而并非是一个时间段
而Duration　表示的是一个时间段,指整个动画的时长

 

(19) SplineDoubleKeyFrame中的KeySpline表示什么含义

说明：

KeySpline可以控制运动的快慢节奏，它通过两个控制点Point(x,y)来设置
KeySpline="0.0,0.0 0.0,0.0" 表示匀速运动
KeySpline="0.9,0.0 0.3,0.0" 表示先快后慢
KeySpline="0.0,0.9 0.0,0.3" 没发现什么显著变化

官方解释：
KeySpline="控制点1(x,y) 控制点2(x2,y2)",这两个控制点对应一条三次贝塞尔曲线上的两个控制点，但并非对应实际的x轴和y轴坐标，而是表示两个逻辑控制点
控制点的x,y坐标值0至1之间


(20) 关键帧动画和线性插值动画有哪些区别

说明：
关键帧动画：可以控制动画变化快慢的节奏
线性播值动画：匀速运动

它们都对应着这几种动画类型：Double,Color,Point
关键帧动画标签＝线性播值动画标签 + UsingKeyFrames

 

(21) 把(13)用关键帧动画实现

说明：

第1秒先快后慢变Blue,第4秒猛然变Yellow,第7秒渐渐的匀速变成Green

<UserControl.Resources>
<Storyboard x:Name="myStory" Storyboard.TargetName="mySolid" Storyboard.TargetProperty="Color" Duration="0:0:10">
<ColorAnimationUsingKeyFrames>
<LinearColorKeyFrame Value="Green" KeyTime="0:0:7" />
<DiscreteColorKeyFrame Value="Yellow" KeyTime="0:0:4" />
<SplineColorKeyFrame KeySpline="0.9,0.0 0.6,0.00" Value="Blue" KeyTime="0:0:1" />
</ColorAnimationUsingKeyFrames> 
</Storyboard>
</UserControl.Resources>
<Rectangle.Fill>
<SolidColorBrush Color="Red" x:Name="mySolid" />
</Rectangle.Fill>

 


 

(22) 把(15)用关键帧动画实现

说明：使用关键帧动画PointAnimationUsingKeyFrames实现
我的观察：vs2012运行时，在第2次启动时，浏览器卡死了(不知道是不是消耗资源的缘故)

<UserControl.Resources>
        <Storyboard x:Name="myStory" Storyboard.TargetName="myLine" Storyboard.TargetProperty="EndPoint" Duration="0:0:12">
            <PointAnimationUsingKeyFrames>
                <LinearPointKeyFrame Value="150,150" KeyTime="0:0:2" />
                <DiscretePointKeyFrame Value="200,200" KeyTime="0:0:4" />
                <SplinePointKeyFrame Value="600,400" KeySpline="0.9,0.0 0.6,0.00" KeyTime="0:0:6" />
                <LinearPointKeyFrame Value="150,150" KeyTime="0:0:10" />
            </PointAnimationUsingKeyFrames>            
        </Storyboard>
    </UserControl.Resources>

<Path Stroke="Red" StrokeThickness="3" Margin="10,0,-10,0" UseLayoutRounding="False">
            <Path.Data>
                <LineGeometry x:Name="myLine" StartPoint="100,100" EndPoint="300,100" />
            </Path.Data>
        </Path>

 


(23) 会使用C#管理动画

说明：参照“银光志”278页
有时间，再补上...


(24) 任务：结合动画与控件开发跑马灯图片浏览器

说明：参照“银光志”281页
有时间，再补上...

推荐阅读