专栏首页云前端Tween.js 动画库简介

Tween.js 动画库简介

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

tween.js 使用

  • 例如,假设你有一个对象position,它的坐标为 x 和 y: var position = { x: 100, y: 0 }
  • 如果你想改变 x 的值从100到200,你只需要这样做: var tween = new TWEEN.Tween(position); tween.to({ x: 200 }, 1000);
  • 到这里只是创建了tween对象,你需要激活它,让它开始动画: tween.start();

Tween.js本身不会运行,你需要通过update方法明确的告诉它什么时候开始运行。

  • 推荐在动画主循环中使用该方法。你可以通过调用requestAnimationFrame方法来获得良好的图像性能。 animate(); function animate() { requestAnimationFrame(animate); TWEEN.update(); }

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

```
TWEEN.update(100);
```

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

  • 你也可以使用onUpdate回调函数将结果打印到控制台上。 tween.onUpdate(function() { console.log(this.x); });

这个函数在每次tweens被更新时都被调用。

tween.js 控制

  • 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 stopstween.repeat(Infinity); // repeats forever
  • yoyo 这个函数只在你使用repeat方法是起作用。当它被激活时,tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。
  • delay delay方法用于控制动画之间的延时 ``` tween.delay(1000); tween.start(); ```
  • onStart tween开始动画前的回调函数。
  • onStop tween结束动画后的回调函数。
  • onUpdate 在tween每次被更新后执行。
  • onComplete 在tween动画全部结束后执行。

全局方法

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

  • TWEEN.update(time)

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

  • TWEEN.getAll 和 TWEEN.removeAll

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

  • TWEEN.add(tween) 和 TWEEN.remove(tween)

用于向被激活的tweens中添加一个tween,或移除一个tween。 以上方法通常只是在内部使用,一般情况下你了解即可。

  • 可用的easing函数:TWEEN.Easing

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

  • 使用自定义的Easing函数 你不但可以使用tween.js提供的easing函数,还可以自定义easing函数。但必须遵守下面的规则: 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);
    1. 它必须接收一个参数。
    2. 它必须基于输入参数返回一个值。

回调函数

另外一个有用的特性是你可以在每次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;
   });    

本文分享自微信公众号 - 云前端(fewelife),作者:maclee

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端动画实现总结

    SVG动画由SVG元素内部的元素属性控制,一般通过一下几个元素控制: - 用于控制动画延时 - 对属性的连续改变进行控制 - 颜色变化,但用就能控制 - 控制如...

    江米小枣
  • 实例入门 Vue.js 单元测试

    作为一个以 文档丰富 而广为人知的前端开发框架, Vue.js 的官方文档中分别在《教程-工具-单元测试》、《Cookbook-Vue组件的单元测试》里对 Vu...

    江米小枣
  • [译] 快速原型法入门指南:用 7 分钟了解一切

    原文: https://medium.freecodecamp.org/a-beginners-guide-to-rapid-prototyping-71e87...

    江米小枣
  • iOS 开发从 UIView 动画说起

    毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是...

    春哥大魔王
  • 对具有对抗性噪声的可压缩信号进行恢复保证

    摘要:我们为已经被噪声破坏的可压缩信号提供恢复保证,并扩展了[1]中引入的框架,以防御神经网络对抗l0范数和ℓ2范数攻击。具体地说,对于在某些变换域中近似稀疏并...

    罗大琦
  • 一个可以套路别人的python小程序~

    程序是使用pycharm工具,python语言所写。程序包括客户端 client.py 和服务器端 server.py 两部分,利用了python中的socke...

    公众号---志学Python
  • SAP CRM settype的创建,背后发生了什么

    当我们在CRM系统里创建一个settype之后,其实系统后台悄悄的帮我们创建了很多ABAP对象,比如对应的database tables, other ABAP...

    Jerry Wang
  • 关于使用Eric6和pyqt5,写一个四级联动的demo

    选择下拉框以及label和按钮,还有一个tableview用来展示数据。设计完成后

    andrew_a
  • sql server之数据库语句优化

    一切都是为了性能,一切都是为了业务 一、查询的逻辑执行顺序 (1) FROM left_table (3) join_type JOIN right_table...

    逸鹏
  • 安全测试工具(连载6)

    Pangolin(穿山甲)一款帮助渗透测试人员进行SQL注入测试的安全工具。它能够通过一系列非常简单的操作,达到最大化的攻击测试效果。它从检测注入开始到最后控制...

    小老鼠

扫码关注云+社区

领取腾讯云代金券