silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发)

简介: 原文:silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发)这章有点长,所以我分成了两章。这一章主要是准备工作,差不多算美工篇吧,这章基本不会介绍多少动画效果,主要讲的是blend中工具的使用,利用哪些工具做出哪些效果。
原文: silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发)

这章有点长,所以我分成了两章。这一章主要是准备工作,差不多算美工篇吧,这章基本不会介绍多少动画效果,主要讲的是blend中工具的使用,利用哪些工具做出哪些效果。下一章会教你怎么样把这些给组合起来实现动画效果。这张的源码我会上传,可是不会传,哪位知道的留言告诉我一下。

开始之前我想抱怨下,前几天要实现一个效果,去网上搜资料,资料找到了。但是,给你了一张效果图,然后是一堆代码。代码虽然能看懂,但是我才不信是你自己写出来。你要是把那么多代码靠自己写出来,我佩服。我觉的非常不好,你没时间至少写点简单步骤好不,不要一张图,尼玛一堆代码,你给谁看的啊!当然这个原因也是我写教程的原因,教大家怎么样真正的接触silverlight,WPF的UI设计。大家觉的好的帮忙顶顶,让更多的人看到。

再说一句,贴代码的那些最讨厌了。我们的目标是没有代码,偶也!顺便说一句,大家觉的有哪些网站什么的动画特效不错的,可以留言,我帮大家做成教程。

开始我们的教程

1.打开我们前面的项目,在parts文件夹中新建一个usercontrol,命名为cloud.

img_f36bc6ee2dacc2772ce924f991d97447.jpeimg_f53cfef43db90f24d4890dfb6056a17d.jpe

2.选择钢笔工具绘制路径,先大概画出一朵云得形状。现在看不出来云,等会就会像了

img_0db936a5eb8b2f803d55ec673075ad70.jpe

3.选择工具栏上的第二个指针,direct section。然后按住alt键,在路径的顶点上拖一下,出现两个小点,然后通过拖拽小点来改变弧度。(你点在顶点上出现的两个点是你一这点为中心旁边控制旁边两条线,点在路径上出现的两个点是控制这条线条的两个点)。

不会画云得童鞋给你们代码,复制到data中就可以

(M282.5,0.5C343.389,0.499996 396.713,25.4695 426.178,62.8495L426.268,62.9694L433.421,62.6282C436.097,62.5431 438.79,62.5 441.5,62.5C528.209,62.5 598.5,106.6 598.5,161C598.5,215.4 528.209,259.5 441.5,259.5C411.694,259.5 383.828,254.289 360.09,245.24L359.604,245.044L355.335,246.73C333.301,254.914 308.595,259.5 282.5,259.5C231.759,259.5 186.272,242.16 155.467,214.748L154.956,214.282L153.178,214.492C146.599,215.156 139.86,215.5 133,215.5C59.8223,215.5 0.5,176.325 0.5,128C0.5,79.6751 59.8223,40.5 133,40.5C139.86,40.5 146.599,40.8443 153.178,41.5082L159.024,42.1976L160.89,40.6527C191.487,15.9149 234.658,0.499996 282.5,0.5z)

img_6732d0d803b7adf6f04d69de11ad5a32.jpe

img_b5781f67244bb01370f1f1aed3ec1442.jpe

4.按照下图,在属性面板使用渐变画刷填充Fill。

img_ca23a20bf6e5d2a1bfc2b9c89c7c3ec6.jpeimg_95b14654e20d622d65d891bd1907cdb5.jpeimg_c0b3afe32347aadfa0b4f4b87c95676a.jpe

5.按照下图,使用纯色画刷填充stroke。

img_a95ba2d48a29bd7908aa6e4d32cdd216.jpeimg_45e82965226f8e342066cc516951cf81.jpeimg_dd1fd384eec58a407ba9346804c374e4.jpe

6.利用同样的手法在云得内部画一个小点的云朵。

路径(M231.5,0.5C282.862,0.499999 324.804,24.8699 327.375,55.5153L327.381,55.6152L329.986,55.7143C371.84,57.8395 404.5,75.5127 404.5,97C404.5,101.118 403.3,105.097 401.066,108.852L400.676,109.467L402.765,109.262C408.494,108.762 414.425,108.5 420.5,108.5C469.101,108.5 508.5,125.289 508.5,146C508.5,166.711 469.101,183.5 420.5,183.5C388.606,183.5 360.674,176.269 345.24,165.445L344.554,164.937L343.491,166.146C326.642,184.226 293.78,196.5 256,196.5C207.058,196.5 166.369,175.902 158.054,148.767L157.987,148.53L157.12,149.153C140.656,160.424 116.906,167.5 90.5,167.5C40.7944,167.5 0.5,142.428 0.5,111.5C0.5,80.5721 40.7944,55.5 90.5,55.5C106.033,55.5 120.647,57.9484 133.399,62.2589L135.803,63.1188L135.78,62.9625C135.594,61.4897 135.5,60.0015 135.5,58.5C135.5,26.4675 178.481,0.499999 231.5,0.5z)

7.渐变填充值。把100%处得改下就好了

img_c51c70212eb4b346aad33a625996295a.jpe

8.用纯色填充stroke。

img_bfc6f215bf9b2e2769c92bb1b9e1d3e0.jpeimg_cdc4169e62316cd0a9d6281f33dfa359.jpe

9.将两个路径放到一个canvas里面。

img_d10b1f87109379f59f73ed89df2a2f59.jpeimg_fb61190ee53ea06099c47675cd267828.jpe

10.我们的云朵做完了,绘制云朵我们用了钢笔工具,我觉的要想做好美工钢笔工具是基础的基础。

11.车开动的时候会上下有轻微颠簸,我们把这个颠簸状态单独拿出来做成一个类似usercontrol.有点类似于NET的web开发中的用户自定义控件。接下来我们开始车的状态的制作,素材图片。

img_fcf8bd0e470c81f855e3774f331464f0.png

12.在项目中新建一个images文件夹,将图片放入。

img_1328c2c85ebd1c281ab18dcb9b62cd7f.jpeimg_f7a1d2e5a2bcf825b5c5fda492f886f0.jpe

13.在parts文件夹中新建一个usercontrol,命名为car。

img_9b5a6a88668c9b3845ebee4d5743c293.jpeimg_1b7f0cfa074185fb275899b560834dea.jpe

14.将layoutroot的宽,高设为400*200.然后将图片拖入,调整位置。

img_0123b7eb5f63d35cf5704ac99d41239e.jpeimg_a7ddfe80eaa8cd2e362310332b44252e.jpe

15.新建一个stroyboard,命名为salta。然后按F6进入动画模式。

img_60a831a926e3f1cfbe49fec15d93cc88.jpeimg_cd2f13c25e2bbeca43c2b114bfd66f14.jpe

16.在0s,3s,5s处设置关键帧。

img_d1e109a89d5ef1dbef0f31cf9c6d62cc.jpe

17.将时间轴(那根黄线)拉到1s处,然后在transfrom类别中将Y的值改为2.同样处理在2s处。

img_998340736dfa80256697bc902e3dbca4.jpeimg_a85be8b1ded8b2fbee811fa6859c79a0.jpe

img_a0a265d48fac14e93ce60e743a26dcd1.jpe

18.在1.5s,2.5s处将Y的值改为1.也许你会发现你1.5s和2.5s处得值本来就是1,但是你还是要在这边添加一个关键帧,你添加了关键帧,动画到这边时就要执行一个过渡效果。你可以试试效果有什么不一样。

img_af1f7fed3fe6e5321a8dfa16cfb76812.jpe

19.在0.35s,0.45s处将Y值改为-1,在0.4s处将Y值改为-2.

img_6d9e9ace5d303582c8558aaa2560a553.jpe

20.最后选中salta,将它的repeatbehavior设置为forever。

img_b7849e20c4de6e495a41e1531e5dd498.jpeimg_253fdfc4ccc086c5d4c435598c85e608.jpe

21.点击播放按钮看下效果,是不是又上下颠簸的效果了。

22.还记得我们第一章做的小鸟不,同样将它做成一个会飞走的小鸟控件。

23.新建一个usercontrol,重命名birdgo.xaml。

24.代开代码界面,这边我们要用一些代码来实现。这句代码的意思相当于引入命名空间。我们这边引入的是我们项目名称,这样我们就可以调用项目中的文件。

img_0b7e5f7269a9ffed8714942783cbc3b0.jpe

25.添加引用之后开始调用我们以前做的小鸟。看,我们打了local之后出来我们可以调用的东西了吧。如果还是找不到,看下你项目的命名空间,或者把项目重新编译一下。

img_6521348c3b87b47f53942fc2ce8bcff1.jpe

26.回到设计界面,可是让小鸟飞走。

img_1dd32140045e66ae248c6583cb4e6d81.jpe

这里的鸟是会动的哦,如果你鸟没动或者动了一次,你就是前面的动画repeatbehavior的属性没设问哦forever.

27.新建一个stroyboard,命名为leave.

img_32afb51c01602177a643c7d380f1fd7d.jpe

28.在将时间指针移到1.2s处,然后将小鸟拖到右上方就可以了(要在可视区域外面)。我这样是直接飞出去,你可以随便设一些关键帧将小鸟放在不同位置,小鸟就会按照你设定的方向飞出去了。完成后按播放按钮试一下吧,是不是很飞走了。

img_c77efca4394b883c4a5764d5a3458ea2.jpe

29.好了,又完成了一小块的内容。下面还是一个动画的处理。效果就是一张图片从远处越来越大,然后越来越小,产生一种从远方过来的视觉效果。这个效果在图片展示,弹出框中用的很多。大家最好找一张透明背景的图片,我这边是我画出来的。

30.新建一个usercontrol,命名为logo。

31.才canvas里面放一张图片,我的canvas是我画的东西。包裹两层的canvas。

img_fa33ab17e7c6a5cd3eafef0f91efb2d2.jpe

32.新建一个一stroyboard.命名为come.

33.选中最外面层得canvas在0s出设置关键帧,然后再transform类别的scale属性改为0.

img_54419ea29d540caae4caebf32b5ef244.jpeimg_b818757cfee6f6ab17b2b9bcd7fa5636.jpe

34.将时间指针拖到1s处,然后transform类别的scale属性改为0.8.(你自己觉的多少大小合适)。

img_b2e3b26c9d2f64e64f4ab37bd22e89ec.jpeimg_83be3ddb165d2b2b97bbb0aac655115d.jpeimg_fa965d765751b23976753114189fe5ce.jpe

35.在7S出设置关键帧。(1s-7s是画面显示的时间)

img_52eeea8dc38ed6e5cb81097e3ad970e2.jpe

36.将时间指针拖到8s处,然后修改opacity的值。

img_94e2b22e33bf67cfdb8b8222ba92a6a6.jpeimg_3e1f4def0a4a7e029793509a6696c741.jpeimg_09ef833f942883e37c624b6bd2058ea8.jpe

37.完成后,按播放键可以看下效果。

到这里,我们的准备工作已经差不多了。接下来我们把这些全部放到mainpage里面去。不过这是下一章得内容了,下一章,我们将把所有的组合起来形成一个完整的动画。

期待下一章吧,大家觉的好的多多推荐哈。

我们的目标是没有代码,偶也!

http://files.cnblogs.com/WWLB/Animals.zip

目录
相关文章
|
3月前
|
C# 开发者 Windows
WPF 应用程序开发:一分钟入门
本文介绍 Windows Presentation Foundation (WPF),这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架,支持 XAML 语言,方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例,并深入探讨常见问题及解决方案,包括数据绑定、控件样式与模板、布局管理等方面,帮助开发者高效掌握 WPF 开发技巧。
174 65
|
4月前
|
C#
WPF中动画教程(DoubleAnimation的基本使用)
WPF中动画教程(DoubleAnimation的基本使用)
85 0
|
3月前
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
|
4月前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
330 1
|
4月前
|
容器 C# Docker
WPF与容器技术的碰撞:手把手教你Docker化WPF应用,实现跨环境一致性的开发与部署
【8月更文挑战第31天】容器技术简化了软件开发、测试和部署流程,尤其对Windows Presentation Foundation(WPF)应用程序而言,利用Docker能显著提升其可移植性和可维护性。本文通过具体示例代码,详细介绍了如何将WPF应用Docker化的过程,包括创建Dockerfile及构建和运行Docker镜像的步骤。借助容器技术,WPF应用能在任何支持Docker的环境下一致运行,极大地提升了开发效率和部署灵活性。
163 1
|
4月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据
|
4月前
|
测试技术 C# 开发者
“代码守护者:详解WPF开发中的单元测试策略与实践——从选择测试框架到编写模拟对象,全方位保障你的应用程序质量”
【8月更文挑战第31天】单元测试是确保软件质量的关键实践,尤其在复杂的WPF应用中更为重要。通过为每个小模块编写独立测试用例,可以验证代码的功能正确性并在早期发现错误。本文将介绍如何在WPF项目中引入单元测试,并通过具体示例演示其实施过程。首先选择合适的测试框架如NUnit或xUnit.net,并利用Moq模拟框架隔离外部依赖。接着,通过一个简单的WPF应用程序示例,展示如何模拟`IUserRepository`接口并验证`MainViewModel`加载用户数据的正确性。这有助于确保代码质量和未来的重构与扩展。
120 0
|
4月前
|
前端开发 C# 设计模式
“深度剖析WPF开发中的设计模式应用:以MVVM为核心,手把手教你重构代码结构,实现软件工程的最佳实践与高效协作”
【8月更文挑战第31天】设计模式是在软件工程中解决常见问题的成熟方案。在WPF开发中,合理应用如MVC、MVVM及工厂模式等能显著提升代码质量和可维护性。本文通过具体案例,详细解析了这些模式的实际应用,特别是MVVM模式如何通过分离UI逻辑与业务逻辑,实现视图与模型的松耦合,从而优化代码结构并提高开发效率。通过示例代码展示了从模型定义、视图模型管理到视图展示的全过程,帮助读者更好地理解并应用这些模式。
129 0