tweenjs简单快速学习

2020-02-22 17:45:43

参考地址 tweenjs学习

tweenjs 是使用 JavaScript 中的一个简单的补间动画库,支持数字、对象的属性和 CSS 样式属性的赋值。

tweenjs 以平滑的方式修改元素的属性值,需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration),之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。

使用

  • tweenjs CDN

    https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js
  • tweenjs 下载到本地,密码是 ywoq

  • tweenjs github

  • tweenjs 实例

    var box = document.createElement('div');box.style.setProperty('background-color', '#008800');box.style.setProperty('width', '100px');box.style.setProperty('height', '100px');document.body.appendChild(box);function animate(time) {
        requestAnimationFrame(animate);
        TWEEN.update(time);}requestAnimationFrame(animate);var coords = { x: 0, y: 0 };var tween = new TWEEN.Tween(coords) 
            .to({ x: 300, y: 200 }, 1000) 
            .easing(TWEEN.Easing.Quadratic.Out) 
            .onUpdate(function() { 
                box.style.setProperty('transform', 'translate(' + coords.x + 'px, '     + coords.y + 'px)');
            })
            .start();

示例说明

  1. 假设有一个对象 position ,它的坐标为 x 和 y

var position = { x: 100, y: 0 }
  1. 改变 x 的值从 100 到 200 ,持续时间为 1s

var tween = new TWEEN.Tween(position)tween.to({x: 200}, 1000)
  1. 创建 tween 对象后,激活它,从而让它开始动画

tween.start();
  1. 为了平滑的动画效果,需要在同一个循环动画中调用 TWEEN.update 方法

animate();function animate(){
    requestAnimationFrame(animate);
    TWEEN.update();}

这个动作将会更新所有被激活的 tweens ,在 1s 内 position.x 将变为 200 。

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

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

这个函数在每次 tween 被更新时都会被调用

tweenjs 动画

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

使用无参数的调用方法,update 将明确当前时间。也可以为 update 方法法明确一个时间。

TWEEN.update(100);

update 的时间为 100毫秒 ,可以使用这种方法来明确代码中所有随时间变化的函数。

控制 tween 动画

  • startstop ==> Tween.startTween.stop 分别用来控制 tween 动画的开始和结束
    对于已经结束和没有开始的动画,Tween.stop 方法不起作用。 Tween.start 可以方法接收一个时间参数,若使用了该参数,tween 动画将在延迟该时间数后才开始动画,否则他将立刻开始动画。

  • update ==> 通过 TWEEN.update 方法执行动画的更新

  • chain ==> 制作多个多行,例如一个动画在另一个动画结束后开始,可以通过 chain 来实现

    tweenA.chain(tweenB);  //tweenB 在 tweenA 之后开始动画,故可以制作一个无线循环的动画tweenB.chain(tweenA);
  • repeat ==> 制作循环动画,优于 chain,接收一个用于描述循环次数的参数

    tween.repeat(10);tween.repeat(infinity);
  • delay ==> 用于控制动画之间的延迟

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

回调函数

可以在每次 tween 循环周期的指定时间点调用自定义的函数

  • onStart ==> tween 动画开始前的回调函数

  • onStop ==> tween 动画结束后的回调函数

  • onUpdate ==> 在 tween 动画每次更新后执行

  • onComplete ==> 在 tween 动画全部结束后执行

var tween = new TWEEN.Tween({}).to({}).onStart(function(){}).onUpdate(function(){})

动画运动算法(缓动函数)easing函数

  • Linear ==> 线性匀速运动效果

  • Quadratic ==> 二次方的缓动(t^2)

  • Cubic ==> 三次方的缓动()

  • Quartic ==> 四次方的缓动()

  • Quintic ==> 五次方的缓动

  • Sinusoidal ==> 正弦曲线的缓动()

  • Exponential ==> 指数曲线的缓动()

  • Circular ==> 圆形曲线的缓动()

  • Elastic ==> 指数衰减的正弦曲线缓动()

  • Back ==> 超过范围的三次方的缓动

  • Bounce ==> 指数衰减的反弹缓动

缓动方式(效果)easing类型

  • easeIn(In) ==> 加速,先慢后快

  • easeOut(Out) ==> 减速,先快后慢

  • easeInOut(InOut) ==> 前半段加速,后半段减速

使用公式

.easing(TWEEN.Easing.easing函数.easing类型)

tweenjs 源码

控制动画方法

缓动函数

6人点赞

进阶



  • 2017-04-12 11:22:43

    WebView你真的熟悉吗?看了才知道

    在Android手机中内置了一款高性能webkit内核浏览器,在SDK中封装为一个叫做WebView组件。下面总结一下使用webview遇到的那些事、那些坑。

  • 2017-04-12 11:28:14

    史上最全webview详解

    WebView在现在的项目中使用的频率应该还是非常高的。 我个人总觉得HTML5是一种趋势。找了一些东西,在此总结。 本篇最后有一个非常不错 的 Html5Activity 加载类,不想看的可以直接跳下载。

  • 2017-04-12 23:11:59

    Android Studio签名打包的两种方式

    给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行。签名就代表着自己的身份(即keystore),多个app可以使用同一个签名。

  • 2017-04-13 10:57:08

    webstorm 怎么关闭jshint

    You need to configure the inspections in Settings/Editor/Inspections, then in the list on the right, find JavaScript/JavaScript validity issues. That worked for me to remove the Chai warnings. (I am using the WebStorm 11 EAP at the moment.)

  • 2017-04-13 14:11:14

    MySQL中的describe关键字

    今天写代码的时候,有一个类的数据始终不能插入,老是提示在You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe, picPath1, picPath2, picPath3, picPath4, picPath5, agentId, belongStore' at line 1。因为用的是SSH进行插入,所以SQL语句不用自己写,检查了每个字段也没写错。

  • 2017-04-15 13:34:08

    Android官方技术文档翻译——清单合并

    一般情况下,有三种类型的清单文件需要合并成一个最终的应用程序清单,这里按照优先级顺序列出: Product flavors 和构建类型所指定的清单文件。 应用程序的主清单文件。 类库的清单文件。

  • 2017-04-15 21:47:44

    Android开发笔记——圆角和边框们

    在做Android界面开发时,我们往往希望它尽可能优美,尽可能显得专业。于是你看了看其他应用,哇,好多边框和圆角啊。你是不是也想给自己的应用加上边框和圆角效果?呃……那怎么做呢?如果你是从web前端跑到Android来的,那么我想你一定想到了不下三种解决方案。如用图片替代,用CSS3定义,用JS画。在Android中,其实也有类似的用法,本文将简单介绍两种Android圆角和边框的实现。