详解tween.js的使用教程


Posted in Javascript onSeptember 14, 2017

前面的话

TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性,并允许链接补间动画和行动结合起来,创造出复杂的序列。本文将详细介绍tween.js的使用

 概述

tween.js允许以平滑的方式修改元素的属性值。只需要告诉tween想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效果

例如,假设有一个对象position,它的坐标为 x 和 y:

var position = { x: 100, y: 0 }

如果想改变 x 的值从100到200,只需要这样做:

// Create a tween for position first
var tween = new TWEEN.Tween(position);
 
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);

到这里只是创建了tween对象,需要激活它,让它开始动画:

// And set it to start
tween.start();

最后为了平滑动画效果,需要在同一个循环动画中调用TWEEN.update方法。代码如下:

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

这个动作将会更新所有被激活的tweens,在1秒钟(例如1000ms)position.x 将变为200。

也可以使用onUpdate回调函数将结果打印到控制台上

tween.onUpdate(function() {
  console.log(this.x);
});

这个函数在每次tweens被更新时都被调用。它的出现频次依赖于很多因素。例如:依赖于你的电脑或设备的运行速度

开始动画

Tween.js本身不会运行,需要通过update方法明确的告诉它什么时候开始运行。推荐在动画主循环中使用该方法。可以通过调用requestAnimationFrame方法来获得良好的图像性能

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

这里使用无参数调用方式,update方法将明确当前时间,以便于获取上一次动画的执行时间。

也可以为update方法明确一个时间:

TWEEN.update(100);

上面语句的意思是说:update的时间=100毫秒。可以使用这种方法来明确代码中所有随时间变化的函数。例如,动画已经开始,想所有动画都同步进行,animate代码改成这样:

var currentTime = player.currentTime;
TWEEN.update(currentTime);

控制动画

【start和stop】

Tween.start和Tween.stop分别用于控制tween动画的开始和结束

对于已经结束和没有开始的动画,Tween.stop方法不起作用。Tween.start方法同样接收一个时间参数。如果使用了该参数,tween动画将在延时该时间数后才开始动画。否则它将立刻开始动画

【update】

可以通过TWEEN.update方法来执行动画的更新

【chain】

如果你制作多个多行,例如:一个动画在另一个动画结束后开始。可以通过chain方法来使实现。如下代码,tweenB 在 tweenA 之后开始动画

tweenA.chain(tweenB);

可以像下面这样制作一个无限循环的动画:

tweenA.chain(tweenB);
tweenB.chain(tweenA);

【repeat】

如果你制作循环动画可以使用chain来实现,但是更好的方法是使用repeat方法。它接收一个用于描述想循环多少次的参数

tween.repeat(10); // repeats 10 times and stops
tween.repeat(Infinity); // repeats forever

【yoyo】

这个函数只在使用repeat方法时起作用。当它被激活时,tween的效果类似yoyo球效果。该效果是动画会在开始或结束处向反方向反弹

【delay】

delay方法用于控制动画之间的延时

tween.delay(1000);
tween.start();

全局方法

以下的方法定义在 TWEEN 的全局对象中,其中大多数方法都用不上,除了update方法:

【TWEEN.update(time)】

该方法用于所有被激活的tweens,如果time没有被指定,将使用当前时间。

【TWEEN.getAll 和 TWEEN.removeAll】

这两个方法用于获取被激活的tweens数组的一个引用,或从数组中删除所有tweens。

【TWEEN.add(tween) 和 TWEEN.remove(tween)】

用于向被激活的tweens中添加一个tween,或移除一个tween

easing函数

tween.js提供了一些可用的easing函数。可用函数有:Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。easing 类型分为: In, Out 和 InOut

不但可以使用tween.js提供的easing函数,还可以自定义easing函数。但必须遵守下面的规则

1、它必须接收一个参数

2、它必须基于输入参数返回一个值

easing函数仅在每个tween每次被更新时调用,而不管有多少属性被改变。结果随后会被用于初始值

easedElapsed = easing(k);
for each property:
  newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来做easing效果的例子:

function tenStepEasing(k) {
  return Math.floor(k * 10) / 10;
}

可以在tween 这样使用它

tween.easing(tenStepEasing);

回调函数

另外一个有用的特性是可以在每次tween循环周期的指定时间点调用自定义的函数。

例如:假设想使一些不能直接修改参数的对象执行动画,要访问该对象的参数只能通过setter方法,可以通过update方法的回调函数来设置新的setter值

var trickyObjTween = new TWEEN.Tween({
  propertyA: trickyObj.getPropertyA(),
  propertyB: trickyObj.getPropertyB()
})
  .to({ propertyA: 100, propertyB: 200 })
  .onUpdate(function() {
    this.setA( this.propertyA );
    this.setB( this.propertyB );
  });

或者如果想确认tween动画开始后某个对象指定状态下的某个值,可以通过start回调来获取它:

var tween = new TWEEN.Tween(obj)
  .to({ x: 100 })
  .onStart(function() {
    this.x = 0;
  });

【onStart】

tween开始动画前的回调函数。

【onStop】

tween结束动画后的回调函数。

【onUpdate】

在tween每次被更新后执行。

【onComplete】

在tween动画全部结束后执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
vue实现拖拽效果
Dec 23 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
JS库之wow.js使用方法
Sep 14 #Javascript
JavaScript正则表达式和级联效果
Sep 14 #Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 #Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 #Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 #Javascript
JS中跳出循环的示例代码
Sep 14 #Javascript
JS验证码实现代码
Sep 14 #Javascript
You might like
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript实现动态标签云
2015/10/16 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
js中的 || 与 && 运算符详解
2018/05/24 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python中append实例用法总结
2019/07/30 Python
Python实现把类当做字典来访问
2019/12/16 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
django中related_name的用法说明
2020/05/20 Python
python如何导入依赖包
2020/07/13 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
导师鉴定意见
2015/06/05 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python