关键词:
tween.js是一款可生成平滑动画效果的js动画库。相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件。
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动画
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); |
控制tween动画
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.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); |
回调函数
另外一个有用的特性是你可以在每次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动画全部结束后执行。
更多关于tween的资料请参考:https://github.com/sole/tween.js/blob/master/docs/user_guide.md
tween的相关资料:Tween.js for Smooth Animation
typescript中集成tween.js踩坑(代码片段)
首选,采用的是webpack的架构,在ts中使用tween.js,非常麻烦,配置教程少的可怜,浪费了我一个下午,在这里记录一下,往有缘人别踩坑。tween.js版本为18.6.0一、安装npmi@tweenjs/tween.jsNote:必须这... 查看详情
关于tween.js测试介绍
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>tweenDemo-01</title> <styletype="text/css"> *{margin:0;padding:0;} div{height:100px;width:100p 查看详情
tween.js动画效果
一、apply,和call的用法。先来一个与本次博文无关的东西,就是apply和call的用法。其实apply和call的用法都一样,只是他们的传参不一样。apply是数组,而call是单独的传,类似枚举。1.列子一把arguments转化为标准数组,可以使用push... 查看详情
利用tween.js算法生成缓动效果
在讲tween类之前,不得不提的是贝塞尔曲线了。首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线。它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等。无论运用在哪里,它... 查看详情
typescript中集成tween.js踩坑(代码片段)
首选,采用的是webpack的架构,在ts中使用tween.js,非常麻烦,配置教程少的可怜,浪费了我一个下午,在这里记录一下,往有缘人别踩坑。tween.js版本为18.6.0一、安装npmi@tweenjs/tween.jsNote:必须这... 查看详情
three.js:结合 tween.js 围绕世界轴旋转对象
】three.js:结合tween.js围绕世界轴旋转对象【英文标题】:three.js:rotateobjectaroundworldaxiscombinedwithtween.js【发布时间】:2016-02-2911:08:53【问题描述】:我目前正在尝试在3D中对立方体进行补间旋转,并且感谢这篇文章(Howtorotateaobjectona... 查看详情
关于tween.js封装的方法
今天做的是匀速情况下div的运动。首先开始之前先了解运动的原理A------------>>BA移动到B这段距离是总距离 用一个变量保存下来:vardA移动到B移动的总次数 用一个变量保存下来:varcA移动到B每次移动的距离 ... 查看详情
tween缓动动画(代码片段)
在讲tween类之前,不得不提的是贝塞尔曲线了。首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线。它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等。无论运用在哪里,它... 查看详情
window.requestanimationframe与tween.js配合使用实现动画缓动效果
window.requestAnimationFrame概述window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。注意: 如果想得到连... 查看详情
threejs基础代码段tweenjs补间动画(代码片段)
一、Tweenjs是什么? tween.js是一款可生成平滑动画效果的js动画库,只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画... 查看详情
webgl实现--three.js笔记整理
...erer渲染器 性能测试工具:stats.js 动画引擎实现:Tween.js 相机:{正投影:THREE.OrthographicCamera(left,right,top,bottom,near,far );透视投影:THREE.PerspectiveCame 查看详情
THREE.JS 中动画的最佳选择
...对象等)的最佳选择是什么?你是否使用额外的库。比如tween.js或者别的什么?谢谢。【问题讨论】:【参考方案1】:2017年小总结:查看这个简单的时间线库,它可以轻松触发上述FSM(基于状态的动画)和twe 查看详情
运动算法
/**Tween.js*t:currenttime(当前时间);*b:beginningvalue(初始值);*c:changeinvalue(变化量);*d:duration(持续时间)。*youcanvisit‘http://easings.net/zh-cn‘togeteffect*/varTween={Linear:function(t,b,c,d){returnc*t/d+b;},Qua 查看详情
移动端滑屏全应用移动端动画贞动画函数mtween封装(代码片段)
首先此函数是基于大家都知道的Tween动画算法的,在此基础上使用了三中讲到的兼容版动画贞,可以使动画变得更流畅。1.首先要记得引入Tween.js2.引入mTween.js3.调用*mTwee.js文件如下:(这里的m意为mobile)(function()window.requestAnimationFr... 查看详情
idea打包时可以设置不用跟新包
...改密码真有用?Snap和Flatpak通吃所有发行版的打包方式。tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。通过替换frm文件方式修改表结构... 查看详情
Android 4+ html5画布不重绘
...在android4+上它不会重绘画布。我尝试将kinetic.js和easel.js/tween.js用于我的 查看详情
three.js进阶之旅:页面平滑滚动-王国之泪💧(代码片段)
...网这些showcase案例页面就非常优秀,它们大多数都是使用Tween.js、gasp及greensock提供的一些动画扩展库实现的。使用Three.js也能很容易实现丝滑的滚动效果,本文使用React+Three.js+ReactThreeFiber技术栈,实现一个《塞尔达传说:王国之... 查看详情
three.js进阶之旅:全景漫游-初阶移动相机版(代码片段)
...种方式、在 3D 全景图中添加交互热点、利用 Tween.js 实现相机切换动画、多个全景图之间的切换等。效果本文最终将实现如下的效果,左右控制鼠标旋转屏幕可以预览室内三维全景图,同时全景图内有多个交互热... 查看详情