栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 游戏开发 > Unity3D

js使用tween动画(Tween.js)

Unity3D 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js使用tween动画(Tween.js)

一、 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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/951330.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号