silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)

简介: 原文:silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)有个问题想请教下大家,我仿了腾讯的SL版QQ,相似度95%以上。我想写成教程教大家怎么开发出来,会不会有版权什么问题的。
原文: silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)

有个问题想请教下大家,我仿了腾讯的SL版QQ,相似度95%以上。我想写成教程教大家怎么开发出来,会不会有版权什么问题的。

最近一直比较懒,迟来的第三章!

首先打开我们前面的项目吧。

1.接着做完我们还差一点的美工。首先,新建一个usercontrol,命名为tree.

img_6c4ec04307992e3f3c6e2de5bc62f07a.jpe

2.选择钢笔工具绘制路径。顺便说一句做好美工,钢笔工具是基础。这棵树有点复杂,我直接给出效果图了,大家可以自己去画个简单点的试试!

img_d1dea9064d108a418eff8e088e01656d.jpeimg_6540bd68a2fe116b2c70dd8fb2b090fa.jpe

3。我们画树的目的不是教大家怎么使用钢笔,练习自己去就好了,这边有个小知识点,大家经常会纠结的地方。

4.再次新建一个usercontrol,命名为bigtree.

img_3c32de79b40a06f558976b29872b4a34.jpe

5.还记得怎么在一个页面中引用另一个不。打开bigTree的XMAL的代码界面。引入命名空间,然后引入我们的tree.

img_c30a126dcc617120a344a7c468a23bba.jpeimg_3538de0980844c2726b4b00f1e757583.jpe

6.既然叫bigtree,就要把树放大。有些同学直接选中然后拖拉,发现框的大小改变了,可是树的大小一点也没变。如下图。

img_9793fccf76a71a11708d491a12a0cbba.jpe

7.其实这个tree是我们引用过来的,拖拉只能改变位置大小,改变不了原来文件中的树大小。其实大家想想,树的大小改变了树不就是变形了嘛,所以我们要用变形来改变树的大小。选中树,然后改变属性面板的transform的scale的值。

img_6c768af94d3919eb50c75ea863bc771c.jpeimg_c88bb148f340b9f9eeebd11d7abf6e17.jpe

8.树的大小改变了吧。也许你看到X的值为负值有点疑惑,你可以对比下我们的2棵树,发现是不是沿X轴翻转了。大家可以将这些值改变正负看看效果。

9.好了,到这边,我们的准备工作已经结束了,下面开始把所有东西整合到一起。打开MainPage.xaml。然后将part所有的项目添加进去。

img_06bf7c5cc8e6638b347265c2c8fa2a52.jpe

10.然后回到设计界面将他们调整大小放到对应的位置。

img_ce6e137e1b611bf774e0b07227e58f18.jpeimg_5f556bb60dc39d22dfc46ac98c255dee.jpe

11.使用矩形工具绘制一个矩形,按照下图设置属性。你可能需要调整一下元素的顺序。

img_5b17bd5e4c1342302e1133d0a8ffc972.jpeimg_745e5b014b4a41b015c23ce29acc80f6.jpeimg_9c7de2f6365fcd6527d61bbd377ef032.jpeimg_60bb652d84cb09f852b82d60ebaa5c84.jpe

12.使用钢笔工具绘制一个矩形,设置一下属性。

img_c7a2a9f265a778c73a35dde13825dbd8.jpeimg_22a315c151ee9dc667a18aceb6fc01f4.jpeimg_f8d61395bb2f25a505528660f93194ea.jpe

13.选中路径,在属性面板添加Effct特效。

img_4379a9f793936d4255d44ccb774a5db6.jpeimg_58c5523a14fb8628e7dc73777f654722.jpeimg_297d976ddd5c7c1b255c2d42d9276280.jpe

14.复制路径,设置一下属性。

img_5fb2e4bc2eb75f38d419925b4725725d.jpeimg_60a17f53dcec270644c3c3f758301ba5.jpe

15.选中layoutroot,设置如下属性。

img_5a7a5385295bf1c88542544276ba1c50.jpeimg_fb9bfaca7f9a761707344e84841333f2.jpeimg_296d6d5d629e5bf982411a6a57be4ab3.jpeimg_21fad413f26eb8f4aa87ec66d6e12d46.jpeimg_d07cbe975f7ae25771e08e2904bd0c00.jpeimg_48e0305926ad624dd1960c06b8b2f516.jpeimg_b8412ff8ebfad316a50e0a83ac2efa1f.jpe

16.给树和云朵加上阴影特效。

img_0570449149b780cf53ad2fa5fe7ba610.jpeimg_9680bf39a09ae826203265b9ea00c06b.jpeimg_d6dad5007edf1d8e2647296e9ca3f8d7.jpe

17.对另一颗树做同样处理。

img_ebe6528783330181dffba70187797fdb.jpeimg_605c99e967bc045c08f25d2dc35c6a65.jpe

18.在最下面新建一个grid,将整个可视区域覆盖。

img_ae4030585efbb64cb14e5014833ee0e3.jpe

19.新建一个stroyboard,命名为sunraise.在零处添加关键帧,并将grid填充为黑色。

img_8c6985206c9f842ad26ee3f65ff19493.jpeimg_2dd4c17fe04b06596d90099d7241a31c.jpe

20.然后再10S处设置关键帧,将背景改为透明。

img_713c5ee674b492edb3467e9234df5bd1.jpe

21.选中layout元素,在0s处添加关键帧。然后将时间轴拉到8S处,按照下图设置属性。

img_eab96a96ba682bfc9d82a2a7e7304d97.jpeimg_ff8db67a02c46647b37ab8392100a991.jpeimg_7713f455443ef4b687cc164ad6f259ca.jpeimg_852f1b02ff75494b4803e2b25b2b3b9e.jpeimg_3223a0d2a3e60c4e66d776a324e36f9d.jpeimg_498af378e5cf6a6eadad8cb04c97b6e9.jpe

22.在14s处设置关键帧,然后将第4个渐变点拉到51%

img_7b9a0f0e9d0fd4a357ab3f393a1a8c04.jpe

23.选中sun元素,然后再0s和8s处分别设置关键帧。

img_64b43fd877f5b1ead4fddda3eae8e32d.jpe

24.在8S处将太阳往上位移一段距离。

img_16194e627fa1fd5ec18c2eaf09a80318.jpe

25.黑夜到黎明的动画完成,可以先预览以下。接下来新建一个stroyboard,命名为birdfly.

26.选中左边的那只小鸟,然后再1.5s,3.5s,4.5s,11.5s,15s处设置关键帧。

27.然后你想你的小鸟怎么飞走,就在不同的关键帧处设置你的小鸟的位置。

img_291e26a8b8820863426ec9802a4c421d.jpe

28.选中每个关键帧,添加过渡效果。

img_8521fc8db7284139287f966a0d5fd7e5.jpeimg_ad71569f899b53eb1c8d3428cadaab55.jpe

29.新建一个stroyboard,命名为birdmove.

30.在6S和10S处分别设置关键帧。然后在10S处将在下面的小鸟移动到上方可见区域。

img_e3ae30408d5f8f0e9f1bb5d6dd8d527e.jpe

img_c0694fcb085ba0a4f438650ad52b8d60.jpeimg_58773cd506de4c0eeb4f82d8a6ead54c.jpe

31。下面还有汽车移动,云朵移动都是同样的处理手法,我这边就不在写一遍了,大家自己试验下吧。都是用的位移实现动画。

32.下面还有个logo的显示,新建一个stroyboard,命名为show。

33.在0s,1s,7s,8s处分别设置关键帧。

34.在0S处将logo的transform的scale属性设为0.,在1S处将logo的transform的scale属性设为0.5(具体大小自己调)

img_3a0350ece9f75fbe5e5126a00c27cd95.jpeimg_69fb92f6d7ccd44b33895430eb01a2b0.jpe

35.在7s处得关键帧将logo的transform的scale属性设为0.5,在8S处将logo的opacity属性设置为0.

img_6fca4a441b36759832c25221390d0208.jpeimg_6c3848b59d7dde76c78b620e0201995a.jpe

36.到这里我们的动画整合就结束了,当然你也可以添加一些背景音乐,具体的操作参照我前面写过的一篇文章把。

37.下面我们需要写入一些代码,让动画运行起来。

给每个动画加入completed事件,然后完善后台代码

img_e4846805bcd405576d86dbeffed55d65.jpe

哪个动画结束后,开始哪个动画,可以根据自己的喜好来决定。到这里我们就完成了所有的工作。

这章写了很久,个人比较懒,呵呵。下面还有篇额外篇,写的是sl中网页切换,我用的是3D翻转效果,很多人都对页面切换很疑惑,希望对大家有帮助吧,我争取在下个星期之前发出来。

目录
相关文章
|
10月前
|
数据库连接 API C#
WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(二)(下)
WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(二)(下)
167 0
|
5天前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
19 0
|
6月前
|
程序员 C# 异构计算
一个为程序员定制的、WPF开发的小巧、美观桌面快捷工具
一个为程序员定制的、WPF开发的小巧、美观桌面快捷工具
62 0
|
6月前
|
C# 开发者
一款WPF开发的网易云音乐客户端 - DMSkin-CloudMusic
一款WPF开发的网易云音乐客户端 - DMSkin-CloudMusic
134 36
|
8月前
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
135 0
|
10月前
|
设计模式 前端开发 测试技术
WPF开发之Prism详解【内附源码】
WPF开发之Prism详解【内附源码】
235 0
|
10月前
|
C#
WPF工控组态软件之冷却塔和空气压缩机开发
WPF工控组态软件之冷却塔和空气压缩机开发
180 0
|
10月前
|
C#
WPF工控组态软件之管道和冷却风扇开发
WPF工控组态软件之管道和冷却风扇开发
172 0
|
10月前
|
C# 数据库 C++
WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(完)(下)
WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(完)(下)
306 0
|
10月前
|
前端开发 C# UED
WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(完)(上)
WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(完)(上)
192 0