silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发)
本教程基本涵盖了WPF和silverlight中的各种动画。先上张效果图。
声明下,这个做的不是让大家照搬的,只是让大家熟悉下动画效果,这个成品基本涵盖了sl里面所有的动画效果。如果大家真的想掌握动画,我建议按着做一遍。看的不如动手的说.
觉的好的别忘记推荐下,谢谢了
很多人对这个网站应该很熟悉,我用这个做案例,一步步实现他所有的动画效果。相信你做完以后动画水平能有不小的提高。
看上面的图可以发现他是由几块动画组成的。这节我们开始小鸟的制作。
开发环境,blend 4.
1.在blend 4中新建一个silverliht程序。
2.应该小鸟只是整个动画中的其中的一个部分,所以新建一个文件夹,在其中新建一个usercontrol。
3.设置可视区为width:400,height:412.同时将页面大小设为375*319(默认情况下,silverlight总会有一个固定的尺寸,要想让其自动扩展,很简单把Height="640",Width="480"删除即可(或设置成Auto),但是这样处理后,用blend再打开该xaml文件,可视区域就为0了,很不方便选取对象,这时我们可以加上这标识mc:Ignorable="d" ,再用blend打开时,会发现可视区域变成640*480了,而运行时即仍然可以自动扩展)
4.选择钢笔工具,绘制小鸟的尾巴。用钢笔绘制出其中一根羽毛(画圆弧时按住alt键,等出现一个v形时拖动)。绘制完成后,用渐变画刷作为填充(#FFF4DF00,#FFB15800)。同时设置路径的边框为6.
5.将路径复制3次,一共得到4个路径。调整每个路径到合适的位置,然后按住ctrl键选中4个路径,右击将他们合并到一个grid中,并将grid命名为tail。
6.画一个圆作为小鸟的身体。用椭圆工具,按住alt键画圆。给圆形填充线性渐变(#FFF4C900,#FFA15000)。这时候你会发现你的渐变方向不对,选择渐变工具来调整方向。
7.复制刚才画的圆,将圆略微缩小,用纯色画刷填充(#FF8E4903)。去掉stroke画刷,并改变透明度为41%。
8.再次复制2个圆形,缩小后用纯色画刷填充(#FFFFFFFF)。并改变透明度为10%。
9.复制最小的那个圆,移动到合适位置,用纯色画刷填充(#FF000000)。并改变透明度为20%。这个圆用来做小鸟眼部的阴影。将这个圆重命名为shadowEye。
10.复制一个圆作为小鸟的眼睛。按照下图设置圆的属性。效果不一样的情况:没有讲透明度改为100,渐变的位置不对。
11.绘制小鸟嘴吧。选择钢笔工具,绘制两个三角形。并按下图设置属性。用渐变工具可以改变渐变方向。如果小鸟嘴巴没有被身体遮住,调整一下位置。
12.绘制小鸟的脚。选择椭圆工具,按住shift键,画出一个圆,并按照下图设置属性。(同样方法画出另外两个脚)
13.画出小鸟眼睛。先用椭圆画出一个圆,设置一下属性。
14.用同样的方法在中间画出瞳孔。(将两个圆合并到grid中,命名为eye_grid)
15.选择钢笔工具,画出一个月牙形,并设置一下属性。
(注意一下位置,eye_grid中只有2个椭圆,路径不在里面)
16.画闭着眼睛的鸟。用椭圆工具画出3个园,属性分别为。
17.用钢笔工具绘制一条曲线。设置如下属性。
18.将3个园和一个路径合并到一个grid中,并命名为eyesClosed。然后将eyesClosed的opactity属性设为0.
19.选择钢笔工具,绘制一个路径。设置如下属性。
20.复制路径。设置如下属性。完成后将两个路径合并到一个grid中,命名为wingDown。
20.将19步的路径复制,然后移动到合适位置。然后将改路径放入grid中,命名为wingUp。然后将wingUp的opacity设置为0.
21.到这里我们的小鸟完成了。将所有的元素放到一个canvas中,命名为sbird。
22.按F6开始动画设计。点击左下角的state,状态管理器。新建state group命名为Loop。然后再该组新建state命名为Hover。
23.然后回到object and timeline面板,在sbird元素和tai元素的0帧处添加关键帧。(那一排0旁边的那个按钮就是添加关键帧按钮)
24.选择sbird元素,将时间指针调到0.5s处(就是那根黄色的线)。然后按住方向键中的↓,让sbird元素向下位移一段距离。
25.将时间指针调到1s处,然后按住方向键中的↑,让sbird元素回到原来位置。(tip:你可以先选中sbird元素在0s的关键帧,右击选择copy,然后将时间指针调到1s处按ctrl+v)。
26.选中tail元素,将时间指针调到0.5s处。在属性面板中的transoft类别中,选择转换。在angle中填入你要让尾巴摆动的幅度。
27.继续保持tail元素为选中状态,然后将时间指针调到1s处。在angle处输入0,小鸟尾巴变回原来形状。
28.点击0s处得关键帧,右边出现属性面板,将easing变成如图所示。(0s处有2个关键帧!)
29.点击0.5s处的关键帧。设置如图的属性。(0.5s的两个指针设置属性相同)。
30.点击1s出的关键帧,重复29的步骤。属性设置为上图。完成后可以点击播放按钮看一下效果,小鸟是不是在上下动了。最后一步,点击hover,然后在属性面板将repeatbehavior属性设为forever。
31.让小鸟眨动眼睛。在左下角的state面板中新建state group命名为Eye,然后新建两个state,分别命名为Blink,NoBlink。选中Blink开始动画。
32.选中eyesClosed元素,分别在0,1 , 1.03 ,1.18 ,1.21 , 3.7 ,3.73 ,3.89 ,3.92 ,4.8 ,4.83 ,4.99 ,5.02处设置关键帧。
33.保持eyesClosed元素为选中状态,分别点击1.03, 1.18 , 3.73,3.89,4.83, 4.99处得关键帧,将eyesClosed元素的opacity属性设置为100.
34.分别点击每个关键帧,按照下图更改每个关键帧的属性。
35.完成后按播放键,发现小鸟是不是开始眨眼了。选中Bink,然后在属性面板将repeatbehavior属性设为forever。最后一步,让小鸟会飞。
36.点击左下角的state面板,新建state group命名为Wing,然后新建state命名为Wings。
37.选择wingDown元素,然后在0, 0.1, 0.117, 0.233处设置关键帧。(对wingUp元素做同样处理)
38.先保持wingDown元素为选中状态,然后在0.117s处修改wingDown元素的opacity属性。将opacity改为0.
39.保持wingUp元素为选中状态,然后在0.117s处修改wingUp元素的opacity属性。将opacity改为100.
40.选中wings,然后在属性面板将repeatbehavior属性设为forever。
41.最后的最后,让你的小鸟在页面中运行。按F6退出动画模式,在VS中写入代码。没有VS的童鞋直接copy代码吧。
42.在最外面的LayoutRoot中添加loaded事件。
43.在bird的cs文件中写入事件。
44.打开appApp.xaml.cs文件将Application_Startup事件做一些改动。
this.RootVisual=new bird();这里的bird就是你要启动的项目,比如你项目中还有个cat文件呀作为启动项,这里就是cat。
45.完工,按F5在页面中看看你的小鸟吧。
silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发)的更多相关文章
- silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来. 1.新建一个user ...
- silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发) 这章有点长,所以我分成了两章.这一章主要是准备工作,差不多算美工篇吧,这章基本不会介绍多少动画效果,主要讲 ...
- silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发) 有个问题想请教下大家,我仿了腾讯的SL版QQ,相似度95%以上.我想写成教程教大家怎么开发出来,会不会 ...
- silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发) 前面我们画了一只会飞动的小鸟,今天我们在目标是一个会发光的太阳.本章节的动画虽然简单,但是实现的效果可是一点也不打折 ...
- WPF知识点全攻略03- XAML
XAML 是一种声明性标记语言,XAML 是一种基于 XML 并对 XML 结构规则进行了扩展. XAML特点: 定义应用程序的界面元素 显示的声明WPF资源(样式.模板.动画等) 可扩展性(自定义U ...
- WPF知识点全攻略02- WPF体系结构
WPF体系结构图: PersentationFramework.dll包含WPF顶层的类型,包括哪些表示窗口.面板以及其他类型控件的类型.他还实现了高层编程抽象,如样式.开发人员直接使用的大部分类都来 ...
- WPF知识点全攻略01- WPF相对WinFrom的优缺点
对比WPF和WinFrom前,先来了解下GUI现阶段在用的其他一些开发技术: MFC:微软基础类库,以C++的形式封装了Windows API,加上一些实用工具类. QT:奇趣科技开发的跨平台C++图 ...
- WPF知识点全攻略00- 目录
知识点目录如下: 1.WPF相对WinFrom的优缺点 2.WPF体系结构 3.XAML 4.XAML页面布局 5.XAML内容控件 6.WPF中的“树” 7.Binding 8.依赖属性 9.附加属 ...
- WPF知识点全攻略10- 路由事件
路由事件是WPF不得不提,不得不会系列又一 先来看一下他的定义: 功能定义:路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件. 实现定义:路由事件是一个 C ...
随机推荐
- position:absolute和margin:auto 连用实现元素水平垂直居中
有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素. 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left ...
- CImage将图片转为指定像素大小
CFileDialog fDlg(true, "jpg", "", OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT, &q ...
- PatentTips - Enhanced I/O Performance in a Multi-Processor System Via Interrupt Affinity Schemes
BACKGROUND OF THE INVENTION This relates to Input/Output (I/O) performance in a host system having m ...
- [Angular2 Animation] Delay and Ease Angular 2 Animations
By default, transitions will appear linearly over time, but proper animations have a bit more custom ...
- Booth算法
Booth算法 算法描述(载自维基百科) 对于N位乘数Y,布斯算法检查其2的补码形式的最后一位和一个隐含的低位,命名为y-1,初始值为0.对于yi, i = 0, 1, ..., N - 1,考察yi ...
- 用IBM WebSphere DataStage进行数据整合: 第 1 部分 分类: H2_ORACLE 2013-08-23 11:20 688人阅读 评论(0) 收藏
转自:http://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0602zhoudp/ 引言 传统的数据整合方式需要大量的手工 ...
- windows phone8.1:页面导航详解
小梦给大家带来windows phone 8.1应用开发实战教程,分享自己学习,开发过程中的经验和技巧. 今天给大家分享windows phone 8.1页面导航相关知识.涉及知识点如下: 页面一导航 ...
- nginx源代码分析--ngx_http_optimize_servers()函数
这个函数做了连部分工作:1)以port为入口点 将实用的信息存放到hash表内 2)调用ngx_http_init_listening()函数 对port进行监听 1. 在ngx_http_core_ ...
- js获取浏览器尺寸
Javascript: alert(document.body.clientWidth); //网页可见区域宽(body) alert(document.body.clientHeigh ...
- Android使用JNI实现Java与C之间传递数据
介绍Java如何将数据传递给C和C回调Java的方法. java传递数据给C,在C代码中进行处理数据,处理完数据后返回给java.C的回调是Java传递数据给C,C需要用到Java中的某个方法,就需要 ...