zoukankan      html  css  js  c++  java
  • silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发)

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

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

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

    开始我们的教程

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

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

    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)

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

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

    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%处得改下就好了

    8.用纯色填充stroke。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    说明:本文出处:http://www.cnblogs.com/WWLB/archive/2011/05/06/2038875.html 非常感谢

  • 相关阅读:
    Linux 学习 step by step (1)
    ubuntu server nginx 安装与配置
    ubuntu server samba服务器配置
    iOS app集成支付宝支付流程及后台php订单签名处理
    mac 连接windows 共享内容
    linux 文件查找,which,whereis,locate,find
    ubuntu server vsftpd 虚拟用户及目录
    ubuntu server 安装 mantis bug tracker 中文配置
    ubuntu server vsftpd 匿名用户上传下载及目录设置
    linux 用户管理,用户权限管理,用户组管理
  • 原文地址:https://www.cnblogs.com/zxbzl/p/2940413.html
Copyright © 2011-2022 走看看