一、 itween.js是个非常强大的动画库,可以将它看成是动画脚本。在很多平台上都留有它的身影:Unity、UE4等平台。
下面几篇文章带你了解TweenJS的各种介绍,其中它的下载路径可以从github里下载最新版本,或者在我的资源库里下载2022年最新版。
github:
https://github.com/tweenjs/tween.js/
我的资源库:
TweenJS2022最新版本(tween.js)-Javascript文档类资源-CSDN下载
以下几篇供参考文章,详细介绍Twenn.js的功能。
https://codepen.io/mikebolt/pen/zzzvZg
https://sbcode.net/threejs/tween/
TweenJS v1.0.0 API Documentation : TweenJS
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
二、将Gitclub上的TweenJS工程下载下来,或者在我的分享资源里下载下来,解压打开:在examples目录下就有TweenJS的使用demo
三、以第一个hello_word.html为例
tween = new TWEEN.Tween(position) //position--变化的目标
.to({x: 700, y: 200, rotation: 359}, 2000)//变化的最终值
.delay(1000) //延迟时间
.easing(TWEEN.Easing.Elastic.InOut)//Tween的运动方式
.onUpdate(update)//Tween的更新函数,提供实时刷新
Tween操控对象的运动,可以是对象的坐标、缩放值、旋转值等,也可以是单纯数值变量的大小调整方式。
四、Tween有多种运动方式,选择适合自己的直接在easing上调用即可
例如需要使用Quadratic下的InOut方式,修改为:.easing(TWEEN.Easing.Quadratic.InOut)即可。
五、更多效果,请直接查看效果介绍页,让你对Tween的运动方式有更直观的认识:
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
https://createjs.com/demos/tweenjs/tween_sparktable



