首页 > 其他 > 详细

Egret入门学习日记 --- 第三十三篇(书中 10.2 节 内容)

时间:2019-08-11 21:25:13      阅读:104      评论:0      收藏:0      [点我收藏+]

 第三十三篇(书中 10.2 节 内容)

  今天要记录的内容呢,是用 Tween 来做动画效果。

  先来看看我试验成功的效果。

  技术分享图片

  接下来,开始归类书中的重点:

    1、使用Tween的前提。

    2、Tween的参数说明。

    3、动画执行完成后,怎么知道动画执行完毕?

    4、Tween的链式结构调用 。

    5、Tween如何执行多次?

    6、Tween位移的变化。

    7、Tween延迟执行。

    8、Tween执行的实时函数变化。

    9、Tween约束下的影响。

  重点的确有点多,不过慢慢来。开始操作:

    1、使用Tween的前提。

      保证你已经引入了Tween库。

      技术分享图片

    2、Tween的参数说明。            

      技术分享图片

    3、动画执行完成后,怎么知道动画执行完毕?

      技术分享图片

    4、Tween的链式结构调用 。

      Tween的方法总会返回 一个 Tween 对象,可以链式的调用。

      技术分享图片

      如果你想给call()里的 回调函数 传递参数的话,可以在call()的第三个参数设置。

      技术分享图片

    5、Tween如何执行多次?

      在get第二个参数里面进行填写{loop:true}。

      技术分享图片

      如果没有 loop:true 的话,Tween动画就只会执行一次。

      技术分享图片

      可是 loop:true 是无限循环。并不能设置循环播放几次。

      如果需要设置指定播放几次的话,需要自己封装一个 doAnimation 方法。

      技术分享图片

      这是运行效果。

      技术分享图片

    6、Tween位移的变化。

      其实就是变一下坐标位置,比较简单了。

      技术分享图片

    7、Tween延迟执行。

      通过 wait(毫秒) 来让动画等待指定毫秒

      技术分享图片

    8、Tween执行的实时函数变化。

      通过 get()的第二个参数,{onChange:function,onChangeObj:any} 来获取动画位置。

      技术分享图片

    9、Tween约束下的影响。

      书中描述这个现象。。。太模糊了。

      技术分享图片

      技术分享图片

      就这些信息。。。没了。。。。。。

      我研究了半天,终于搞懂了。

      为了更明显的展示功能点,我弄了三层布局。

      技术分享图片

       那么:

        最外层是 “蓝色背景色”,

        第二层是 “粉色背景色”,叫“group”

        第三层是 “黄色背景色” ,叫 “mcGroup”。而且还包含了动画对象。

      现在,我把第三层的 includeInLayout 属性 设为 false。

      技术分享图片

      可以看到,第三层跑到了第二层的左上角了。

      接着,我再还原。

      技术分享图片

      可见,第三层又跑到了第二层的中心点了。

      那我再把第二层的 includeInLayout 属性 设为 false。

      技术分享图片

      所以,现在就明白了 includeInLayout 属性的作用了吧。

      就是跳出父类,并且以爷类的左上角为对齐方向。

  至此,10.2节 内容结束。

    

  又是好几个小时过去了。从下午三点弄到现在。太累了。

  我洗澡去了。

Egret入门学习日记 --- 第三十三篇(书中 10.2 节 内容)

原文:https://www.cnblogs.com/dmc-nero/p/11335252.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!