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翻转效果,很多人都对页面切换很疑惑,希望对大家有帮助吧,我争取在下个星期之前发出来。

目录
相关文章
|
2月前
|
C# 开发者 Windows
WPF 应用程序开发:一分钟入门
本文介绍 Windows Presentation Foundation (WPF),这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架,支持 XAML 语言,方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例,并深入探讨常见问题及解决方案,包括数据绑定、控件样式与模板、布局管理等方面,帮助开发者高效掌握 WPF 开发技巧。
163 65
|
3月前
|
C#
WPF中动画教程(DoubleAnimation的基本使用)
WPF中动画教程(DoubleAnimation的基本使用)
70 0
|
2月前
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
|
3月前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
230 1
|
3月前
|
测试技术 C# 开发者
“代码守护者:详解WPF开发中的单元测试策略与实践——从选择测试框架到编写模拟对象,全方位保障你的应用程序质量”
【8月更文挑战第31天】单元测试是确保软件质量的关键实践,尤其在复杂的WPF应用中更为重要。通过为每个小模块编写独立测试用例,可以验证代码的功能正确性并在早期发现错误。本文将介绍如何在WPF项目中引入单元测试,并通过具体示例演示其实施过程。首先选择合适的测试框架如NUnit或xUnit.net,并利用Moq模拟框架隔离外部依赖。接着,通过一个简单的WPF应用程序示例,展示如何模拟`IUserRepository`接口并验证`MainViewModel`加载用户数据的正确性。这有助于确保代码质量和未来的重构与扩展。
82 0
|
3月前
|
前端开发 C# 设计模式
“深度剖析WPF开发中的设计模式应用:以MVVM为核心,手把手教你重构代码结构,实现软件工程的最佳实践与高效协作”
【8月更文挑战第31天】设计模式是在软件工程中解决常见问题的成熟方案。在WPF开发中,合理应用如MVC、MVVM及工厂模式等能显著提升代码质量和可维护性。本文通过具体案例,详细解析了这些模式的实际应用,特别是MVVM模式如何通过分离UI逻辑与业务逻辑,实现视图与模型的松耦合,从而优化代码结构并提高开发效率。通过示例代码展示了从模型定义、视图模型管理到视图展示的全过程,帮助读者更好地理解并应用这些模式。
97 0
|
3月前
|
容器 C# Docker
WPF与容器技术的碰撞:手把手教你Docker化WPF应用,实现跨环境一致性的开发与部署
【8月更文挑战第31天】容器技术简化了软件开发、测试和部署流程,尤其对Windows Presentation Foundation(WPF)应用程序而言,利用Docker能显著提升其可移植性和可维护性。本文通过具体示例代码,详细介绍了如何将WPF应用Docker化的过程,包括创建Dockerfile及构建和运行Docker镜像的步骤。借助容器技术,WPF应用能在任何支持Docker的环境下一致运行,极大地提升了开发效率和部署灵活性。
120 0
|
3月前
|
区块链 C# 存储
链动未来:WPF与区块链的创新融合——从智能合约到去中心化应用,全方位解析开发安全可靠DApp的最佳路径
【8月更文挑战第31天】本文以问答形式详细介绍了区块链技术的特点及其在Windows Presentation Foundation(WPF)中的集成方法。通过示例代码展示了如何选择合适的区块链平台、创建智能合约,并在WPF应用中与其交互,实现安全可靠的消息存储和检索功能。希望这能为WPF开发者提供区块链技术应用的参考与灵感。
62 0
|
3月前
|
开发者 C# Windows
WPF与游戏开发:当桌面应用遇见游戏梦想——利用Windows Presentation Foundation打造属于你的2D游戏世界,从环境搭建到代码实践全面解析新兴开发路径
【8月更文挑战第31天】随着游戏开发技术的进步,WPF作为.NET Framework的一部分,凭借其图形渲染能力和灵活的UI设计,成为桌面游戏开发的新选择。本文通过技术综述和示例代码,介绍如何利用WPF进行游戏开发。首先确保安装最新版Visual Studio并创建WPF项目。接着,通过XAML设计游戏界面,并在C#中实现游戏逻辑,如玩家控制和障碍物碰撞检测。示例展示了创建基本2D游戏的过程,包括角色移动和碰撞处理。通过本文,WPF开发者可更好地理解并应用游戏开发技术,创造吸引人的桌面游戏。
184 0
|
3月前
|
开发者 C# 自然语言处理
WPF开发者必读:掌握多语言应用程序开发秘籍,带你玩转WPF国际化支持!
【8月更文挑战第31天】随着全球化的加速,开发多语言应用程序成为趋势。WPF作为一种强大的图形界面技术,提供了优秀的国际化支持,包括资源文件存储、本地化处理及用户界面元素本地化。本文将介绍WPF国际化的实现方法,通过示例代码展示如何创建和绑定资源文件,并设置应用程序语言环境,帮助开发者轻松实现多语言应用开发,满足不同地区用户的需求。
70 0