createjs-tweenjs初体验

最新推荐文章于 2023-07-02 22:15:36 发布

yi-giao-wo-li-giao

最新推荐文章于 2023-07-02 22:15:36 发布

阅读量2k

点赞数

分类专栏： Createjs

本文链接：https://blog.csdn.net/qq_31799003/article/details/85273590

版权

本文介绍了如何初识和使用createjs的TweenJS库来创建动画效果。通过引入tweenjs文件，设置loop属性实现动画循环播放，使用.to()方法控制对象移动和变化，如改变位置和透明度。同时，通过调整fps和使用ticker类进行舞台刷新，实现更加灵活的动画控制。最终，实现了圆形对象的水平移动、淡入淡出并返回原位的效果。

摘要由CSDN通过智能技术生成

1.从简单开始，引入tweenjs文件

<script src="https://code.createjs.com/1.0.0/tweenjs.min.js"> </script>

2.先移除在init函数底部的 stage.update（）

在底部的空白区可以放置我们的tweenjs ，首先获取circle实例

（1）将 loop：true 传入，然后我们动画就可以循环播放了。

（2）.to（）方法可以让对象移动到一个位置，并且让其做一些事（eg：改变x的值可以改变水平位置，改变alpha可以改变透明度）

createjs.Tween.get(circle, {loop:true}) // 循环播放动画
    .to({ x: 400}, 1000, createjs.Ease.getPowInOut(4))
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
    .to({ alpha: 0, y: 225 }, 100,)
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

3.还记得第二步开始为什么要删除 stage.update() 方法吗？这是因为tween 有自己的刷新舞台的方式，

（1）设置fps（帧数）

（2）添加事件监听中的ticker类（打点器），它会让stage