Sliverlight之 故事板
见Project19
(1) 将一张图片每隔一秒旋转72度,看看效果是什么样(使用定时器)
说明:
前端
<Image.RenderTransform>
<RotateTransform Angle="" x:Name="myRotate"></RotateTransform>
</Image.RenderTransform>
代码
DispatcherTimer dt = new DispatcherTimer();
dt.Interval = TimeSpan.FromMilliseconds();
dt.Tick += dt_Tick;
dt.Start(); void dt_Tick(object sender, EventArgs e)
{
myRotate.Angle += ;
}
(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="" To=""
Duration="0:0:1" AutoReverse="False" RepeatBehavior="3x"></DoubleAnimation>
</Storyboard>
</UserControl.Resources> <Image.RenderTransform>
<RotateTransform Angle="" 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="" To=""
Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="myTranslate2" Storyboard.TargetProperty="X" From="" To=""
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();
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(); //第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 X, Y
to X, Y over 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="">
<Path.Data>
<GeometryGroup>
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="200,100" RadiusX="" RadiusY="" />
<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="" KeyTime="0:0:1" />
<DiscreteDoubleKeyFrame Value="" KeyTime="0:0:3" /> <SplineDoubleKeyFrame KeySpline="0.9,0.0 0.3,0.0" Value="" KeyTime="0:0:2"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources> <Button.RenderTransform>
<RotateTransform Angle="" 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="" 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页
有时间,再补上...
Sliverlight之 故事板的更多相关文章
- iOS系列 基础篇 02 StoryBoard 故事板文件
iOS基础 02 StoryBoard 故事板文件 目录: 1. 故事板的导航特点 2. 故事板中的Scene和Segue 3. 本文最后 在上篇HelloWorld工程中有一个Main.storyb ...
- [IOS 开发] TableView、多个TableViewCell、自定义Cell、Cell上画画(故事板+代码方式)
第一步: //UserTableViewCell.h这里定义第一种Cell #import <UIKit/UIKit.h> @interface UserTableViewCell : U ...
- 故事板(Storyboard)
1 使用Storyboard完成各项常见功能 1.1 问题 故事板Storyboard是IOS5开始引入的一个新的系统,将多个视图文件(类似xib文件)集中到一个单独的可视化工作区间,负责创建和管理所 ...
- iOS 5 故事板入门(3)
原文: http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-2 Segues 介绍 是时候在我们的故事板中加入更 ...
- iOS 5 故事板入门(4)
原文: http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-2 让 AddPlayer 窗口动起来 现在,我们先 ...
- Swift - 故事板storyboard的用法
故事板(UIStoryboard)可以很方便的进行界面的设计,下面总结了常用的几个操作方法: 1,初始场景 选中View Controller,在属性面板里勾选Is Initial View Cont ...
- 1.3.1. 新建Xcode项目并设置故事板(Core Data 应用程序实践指南)
创建名为Grocery Dude的Single View程序,并按默认设置处理,不勾选Core Date 和 Git. 设计故事板: 选择Main.Storyboard 拖放一个 Table View ...
- iOS 5 故事板进阶(1)
译自<iOS 5 by tutorials> 在上一章,你已经学习了故事板的基本用法.包括如何向故事板中添加 View Controller,通过 segues 切换 View Contr ...
- iOS 5 故事板进阶(2)
让我们回到游戏排行窗口Ranking.创建一个 UITableViewController子类,命名为 RankingViewController. 编辑 RankingViewController. ...
随机推荐
- Linux程序设计学习笔记----多线程编程线程同步机制之相互排斥量(锁)与读写锁
相互排斥锁通信机制 基本原理 相互排斥锁以排他方式防止共享数据被并发訪问,相互排斥锁是一个二元变量,状态为开(0)和关(1),将某个共享资源与某个相互排斥锁逻辑上绑定之后,对该资源的訪问操作例如以下: ...
- C++不确定行为
一个简单的程序引发了一块让人纠结的领域,也许强调编程规范的重要性也在这把.规范了就easy避免一些问题. 程序是这种 int Change(int& a) { a = 4; return a; ...
- Pyhon安装media模块
都是教科书惹的祸,它没有说清楚.media看着很标准,其实不是python自带的库.需要安装第三方软件后才能用. 在这里http://pythonhosted.org/PyGraphics/insta ...
- HDU 4597 Play Game 2013 ACM-ICPC吉林通化全国邀请赛H题
九野的博客,转载请注明出处: http://blog.csdn.net/acmmmm/article/details/10833941 题意:给定T个测试数据,下面有2副牌,每副n张,每张都有一个分 ...
- HDU 4704 Sum (费马定理+快速幂)
Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Subm ...
- Android入门之login设计
效果图: MainActivity.java package jk.quickpay.login; import jk.quickpay.login.FileService; import java. ...
- 【ThinkingInC++】52、函数内部的静态变量
/** * 书本:[ThinkingInC++] * 功能:函数内部的静态变量 * 时间:2014年9月17日18:06:33 * 作者:cutter_point */ #include " ...
- 为何要fork()两次来避免产生僵尸进程?
为何要fork()两次来避免产生僵尸进程? 当我们只fork()一次后,存在父进程和子进程.这时有两种方法来避免产生僵尸进程: 父进程调用waitpid()等函数来接收子进程退出状态. 父进程先结 ...
- Unity3D游戏开发从零单排(四) - 制作一个iOS游戏
提要 此篇是一个国外教程的翻译,尽管有点老,可是适合新手入门. 自己去写代码.debug,布置场景,能够收获到非常多.游戏邦上已经有前面两部分的译文,这里翻译的是游戏的最后一个部分. 欢迎回来 在第一 ...
- jQuery中的getJSON()
json文件是一种轻量级的数据交互格式.一般在jQuery中使用getJSON()方法读取. $.getJSON(url,[data],[callback]) url:json文件地址 data:可选 ...