Sliverlight之　故事板

见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页
有时间，再补上...

转载于:https://www.cnblogs.com/huaci/p/4409596.html

Sliverlight之　故事板相关推荐

Silverlight Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations) 正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Bl ...
《iOS 9 开发指南》——第6章，第6.4节 Interface Builder中的故事板——Storyboarding...
本节书摘来自异步社区<iOS 9 开发指南>一书中的第6章,第6.4节 Interface Builder中的故事板--Storyboarding,作者管蕾,更多章节内容可以访问云栖社区 ...
什么是故事板？（故事图、Storyboard）（软件显示效果的视觉草图，用于视频创作和广告设计，表达作者的创意）
故事板是软件显示效果的视觉草图,用于视频创作和广告设计,表达作者的创意.20世纪90年代以来,电脑绘制软件渐渐取代了过去的手绘故事板,许多大制作的商业影片,都在拍摄之前用电脑动画模拟的方式创建故事板, ...
iOS开发那些事--创建基于故事板的iOS 6的HelloWorld
基于故事板的HelloWorld工程 Storyboard(故事板)是用来替代xib的技术,也是iOS 5最重要的新特性之一.我们用Storyboard(故事板)重构HelloWorld. 使用故事板 ...
【WPF学习】第五十章故事板
正如上一章介绍,WPF动画通过一组动画类(Animation类)表示.使用少数几个熟悉设置相关信息,如开始值.结束值以及持续时间.这显然使得它们非常适合于XAML.不是很清晰的时:如何为特定的事件和属 ...
[Xcode 实际操作]九、实用进阶-(23)多个Storyboard故事板中的页面跳转
目录:[Swift]Xcode实际操作本文将演示多个Storyboard故事板中的页面跳转. 使用快捷键[Command]+[N]创建一个新的故事板文件. (在项目文件夹[DemoApp]上点击鼠标 ...
敏捷开发免费管理工具——火星人预览之四：故事板，燃尽图，我的工作项
这是火星人预览系列的第四篇(之一,之二,之三,之四,之五问答,之六,之七). 之一:需求与故事结构之二:编辑故事,产品管理,组织结构之三:迭代,计划会,分配任务之四:故事板,燃尽图,我的工作项 ...
敏捷开发日常跟进系列之三：故事板，看板
这是敏捷开发日常跟进系列的第三篇. (栏目目录) 故事板和看板其实不是一个东西,前者是最初的敏捷开发里边的东西,受到了后者的启发产生的:而后者是制造业的东西,具体内容请参考末尾的百度百科.但是在敏捷开 ...
ios标签控制器怎么用_带故事板的iOS标签栏控制器
ios标签控制器怎么用 In this tutorial we'll look into another type of view controller namely Tab Bar Controll ...

Sliverlight之　故事板

Sliverlight之　故事板相关推荐

最新文章

热门文章

Sliverlight之 故事板

Sliverlight之 故事板相关推荐

最新文章

热门文章

Sliverlight之　故事板

Sliverlight之　故事板相关推荐