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

目录
相关文章
|
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