tween.js 用户指南 - 与 Three.js 配合使用的补间动画库
2017-12-12 11:15
1181 查看
Learning Three.js - Tween.jsfor Smooth Animation
tween.js 用户指南tween.js user guide
注意,这是一个进行中的工作,请原谅其中的不足。无论何时,你看到标记为 TODO 的内容,就说明它是还未做的部分。如果你有哪些东西不清楚或缺少细节内容,请提交一个问题,以帮助使这个指南变得更好。或者如果你觉得你也可以提供帮助的话,你可以随意提交你自已的说明或改进。NOTE this is a work in progress, please excuse the gaps. Wherever you see something marked as TODO, it's not done yet. If you something is unclear or missing details, please filean issue and help make this guide better. Or feel free to submit clarifications or improvements of your own if you feel you can help too!什么是补间动画?他们如何工作?为什么你想要使用它们?What is a tween? How do they work? Why do you want to use them?
A tween (from in-between) is a concept that allows you to change the values of the properties of an object in a smoothway. You just tell it which properties you want to change, which final values should they have when the tween finishes running, and how long should this take, and the tweening engine will take care of finding the intermediate values from the starting to theending point. For example, suppose you have apositionobjectwith
xand
ycoordinates:
var position = { x: 100, y: 0 }If you wanted to change the
xvalue from
100to
200,you'd do this:
// 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);Actually this won't do anything yet. The tween has been created but it's not active. You need to start it:
// And set it to start tween.start();Finally in order to run as smoothly as possible you should call the
TWEEN.updatefunctionin the same main loop you're using for animating. This generally looks like this:
animate(); function animate() { requestAnimationFrame(animate); // [...] TWEEN.update(); // [...] }This will take care of updating all active tweens; after 1 second (i.e. 1000 milliseconds)
position.xwillbe
200.But unless you print the value of
xto the console, you can'tsee its value changing. You might want to use the
onUpdatecallback:
tween.onUpdate(function() { console.log(this.x); });This function will be called each time the tween is updated; how often this happens depends on many factors--how fast (and how busy!) your computer or device is, for example.So far we've only used tweens to print values to the console, but you could use it for things such as animating positions of three.js objects:
var tween = new TWEEN.Tween(cube.position); .to({ x: 100, y: 100, z: 100 }, 10000) .start(); animate(); function animate() { requestAnimationFrame(animate); TWEEN.update(); threeRenderer.render(scene, camera); }In this case, because the three.js renderer will look at the object's position before rendering, you don't need to use an explicit
onUpdatecallback.You might have noticed something different here too: we're chaining the tween function calls! Each tween function returns the tween instance, so you can rewrite the following code:
var tween = new TWEEN.Tween(position); tween.to({ x: 200 }, 1000); tween.start();into this
var tween = new TWEEN.Tween(position) .to({ x: 200 }, 1000) .start();You'll see this a lot in the examples, so it's good to be familiar with it! Check 04-simplest fora working example.
使用 tween.js 的动画Animating with tween.js
Tween.js doesn't run by itself. You need to tell it when to run, by explicitly calling theupdatemethod.The recommended method is to do this inside your main animation loop, which should be called with
requestAnimationFrameforgetting the best graphics performance:We've seen this example before:
animate(); function animate() { requestAnimationFrame(animate); // [...] TWEEN.update(); // [...] }If called without parameters,
updatewill determine the currenttime in order to find out how long has it been since the last time it ran.However you can also pass an explicit time parameter to
update.Thus,
TWEEN.update(100);means "update with time = 100 milliseconds". You can use this to make sure that all the time-dependent functions in your code are using the very same time value. For example suppose you've got a player and want to run tweens in sync. Your
animatecodecould look like this:
var currentTime = player.currentTime; TWEEN.update(currentTime);We use explicit time values for the unit tests. You can have a look at TestTweens to seehow we call TWEEN.update() with different values in order to simulate time passing.
控制一个补间动画Controlling a tween
启动和停止
start
and stop
So far we've learnt about the Tween.startmethod, but there aremore methods that control individual tweens. Probably the most important one is the
startcounterpart:
stop.If you want to cancel a tween, just call this method over an individual tween:
tween.stop();Stopping a tween that was never started or that has already been stopped has no effect. No errors are thrown either.The
startmethod also accepts a
timeparameter.If you use it, the tween won't start until that particular moment in time; otherwise it will start as soon as possible (i.e. on the next call to
TWEEN.update).
更新
update
Individual tweens also have an updatemethod---this is in factcalled by
TWEEN.update. You generally don't need to call thisdirectly, but might be useful if you're doing crazy hacks.
链接
chain
Things get more interesting when you sequence different tweens in order, i.e. setup one tween to start once a previous one has finished. We call this chaining tweens, and it's done with the chainmethod.Thus, to make
tweenBstart after
tweenAfinishes:
tweenA.chain(tweenB);Or, for an infinite chain, set
tweenAto start once
tweenBfinishes:
tweenA.chain(tweenB);tweenB.chain(tweenA);Check Hello world to see an example of these infinite chains.
重复
repeat
If you wanted a tween to repeat forever you could chain it to itself, but a better way is to use the repeatmethod.It accepts a parameter that describes how many repetitions you want:
tween.repeat(10); // repeats 10 times and stopstween.repeat(Infinity); // repeats foreverCheck the Repeat example.
摇摇乐
yoyo
This function only has effect if used along with repeat. Whenactive, the behaviour of the tween will be like a yoyo, i.e. it will bounce to and from the start and end values, instead of just repeating the same sequence from the beginning.
延迟delay
More complex arrangements might require delaying a tween before it actually starts running. You can do that using the delaymethod:
tween.delay(1000);tween.start();will start executing 1 second after the
startmethod has beencalled.
控制所有的补间动画Controlling all the tweens
The following methods are found in the TWEEN global object, and you generally won't need to use most of them, except forupdate.
TWEEN.update(time)
We've already talked about this method. It is used to update all the active tweens.If timeis not specified, it will use the current time.
TWEEN.getAll
and TWEEN.removeAll
Used to get a reference to the active tweensarray and to removeall of them from the array with just one call, respectively.
TWEEN.add(tween)
and TWEEN.remove(tween)
Used to add a tween to the list of active tweens, or to remove an specific one from the list, respectively.These methods are usually used internally only, but are exposed just in case you want to do something funny.修改 easing 功能(AKA make it councy)Changing the easing function (AKA make it bouncy)
Tween.js will perform the interpolation between values (i.e. the easing) in a linear manner, so the change will be directly proportional to the elapsed time. This is predictable but also quite uninteresting visually wise. Worry not--this behaviour can be easilychanged using theeasingmethod. For example:
tween.easing(TWEEN.Easing.Quadratic.In);This will result in the tween slowly starting to change towards the final value, accelerating towards the middle, and then quickly reaching its final value. In contrast,
TWEEN.Easing.Quadratic.Outwouldstart changing quickly towards the value, but then slow down as it approaches the final value.
Easing类型从这里选一个吧~!:http://sole.github.io/tween.js/examples/03_graphs.html[javascript] viewplain copytween.easing(TWEEN.Easing.Elastic.InOut)
可用的 easing 函数Available easing functions: TWEEN.Easing
There are a few existing easing functions provided with tween.js. They are grouped by the type of equation they represent: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back and Bounce, and then by the easing type:In, Out and InOut.Probably the names won't be saying anything to you unless you're familiar with these concepts already, so it is probably the time to check the Graphs example,which graphs all the curves in one page so you can compare how they look at a glance.Credit where credit is due: these functions are derived from the original set of equations that Robert Penner graciously made available as free software a few years ago, but have been optimised to play nicely with JavaScript.使用自定义的easing 函数Using a custom easing function
Not only can you use any of the existing functions, but you can also provide your own, as long as it follows a couple of conventions:it must accept one parameter:k: the easing progress, or how far along the durationof the tween we are. Allowed values are in the range [0, 1].it must return a value based on the input parameters.The easing function is only called once per tween on each update, no matter how many properties are to be changed. The result is then used with the initial value and the difference (the deltas) between this and thefinal values, as in this pseudocode:
easedElapsed = easing(k);for each property:newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;For the performance obsessed people out there: the deltas are calculated only when
start()iscalled on a tween.So let's suppose you wanted to use a custom easing function that eased the values but appplied a Math.floor to the output, so only the integer part would be returned, resulting in a sort of step-ladder output:
function tenStepEasing(k) {return Math.floor(k * 10) / 10;}And you could use it in a tween by simply calling its easing method, as we've seen before:
tween.easing(tenStepEasing);Check the graphs for custom easing functions example to see this in action(and also some metaprogramming for generating step functions).
回调Callbacks
Another powerful feature is to be able to run your own functions at specific times in each tween's life cycle. This is usually required when changing properties is not enough.For example, suppose you're trying to animate some object whose properties can't be accessed directly but require you to call a setter instead. You can use anupdatecallbackto read the new updated values and then manually call the setters:
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 );});Or imagine you want to ensure the values of an object are in an specific state each time the tween is started. You'll assign a
startcallback:
var tween = new TWEEN.Tween(obj).to({ x: 100 }).onStart(function() {this.x = 0;});The scope for each callback is the tweened object.
启动时回调onStart
Executed right before the tween starts-i.e. before the deltas are calculated. This is the place to reset values in order to have the tween always start from the same point, for example.停止时回调onStop
Executed when a tween is explicitly stopped (not when it is completed normally), and before stopping any possible chained tween.更新时回调onUpdate
Executed each time the tween is updated, after the values have been actually updated.完成时回调onComplete
Executed when a tween is finished normally (i.e. not stopped).高级补间动画Advanced tweening
相对值Relative values
You can also use relative values when using thetomethod. Whenthe tween is started, Tween.js will read the current property values and apply the relative values to find out the new final values. But you need to use quotes or the values will be taken as absolute. Let's see this with an example:
// This will make the `x` property be 100, alwaysvar absoluteTween = new TWEEN.Tween(absoluteObj).to({ x: 100 });// Suppose absoluteObj.x is 0 nowabsoluteTween.start(); // Makes x go to 100// Suppose absoluteObj.x is -100 nowabsoluteTween.start(); // Makes x go to 100// In contrast...// This will make the `x` property be 100 units more,// relative to the actual value when it startsvar relativeTween = new TWEEN.Tween(relativeObj).to({ x: "+100" });// Suppose relativeObj.x is 0 nowrelativeTween.start(); // Makes x go to 0 +100 = 100// Suppose relativeObj.x is -100 nowrelativeTween.start(); // Makes x go to -100 +100 = 0Check 09_relative_values for an example.
补间到数组值Tweening to arrays of values
In addition to tweening to an absolute or a relative value, you can also have Tween.js change properties across a series of values. To do this, you just need to specify an array of values instead of a single value for a property. For example:var tween = new TWEEN.Tween(relativeObj).to({ x: [0, -100, 100] });will make
xgo from its initial value to 0, -100 and 100.The way these values are calculated is as follows:first the tween progress is calculated as usualthe progress (from 0 to 1) is used as input for the interpolation functionbased on the progress and the array of values, an interpolated value is generatedFor example, when the tween has just started (progress is 0), the interpolation function will return the first value in the array. When the tween is halfway, the interpolation function will return a value approximately in the middle of the array, and when thetween is at the end, the interpolation function will return the last value.You can change the interpolation function with the
interpolationmethod.For example:
tween.interpolation( TWEEN.Interpolation.Bezier );The following values are available:TWEEN.Interpolation.LinearTWEEN.Interpolation.BezierTWEEN.Interpolation.CatmullRomThe default is
Linear.Note that the interpolation function is global to all properties that are tweened with arrays in the same tween. You can't make property A change with an array and a Linear function, and property B with an array too and a Bezier function using the same tween;you should use two tween objects running over the same object but modifying different properties and using different interpolation functions.Check 06_array_interpolation for an example.获得最佳性能Getting the best performanceWhile Tween.js tries to be performant on its own, nothing prevents you from using it in a way that is counterperformant. Here are some of the ways you can avoid slowing down your projects when using Tween.js (or when animating in the web, in general).
使用高性能的CSSUse performant CSS
When you try to animate the position of an element in the page, the easiest solution is to animate thetopand
leftstyleproperties, like this:
var element = document.getElementById('myElement');var tween = new TWEEN.Tween({ top: 0, left: 0 }).to({ top: 100, left: 100 }, 1000).onUpdate(function() {element.style.top = this.top + 'px';element.style.left = this.left + 'px';});but this is really inefficient because altering these properties forces the browser to recalculate the layout on each update, and this is a very costly operation. Instead of using these, you should use
transform,which doesn't invalidate the layout and will also be hardware accelerated when possible, like this:
var element = document.getElementById('myElement');var tween = new TWEEN.Tween({ top: 0, left: 0 }).to({ top: 100, left: 100 }, 1000).onUpdate(function() {element.style.transform = 'translate(' + this.left + 'px, ' + this.top + 'px);';});If you want to read more about this, have a look at this article.However, if your animation needs are that simple, it might be better to just use CSS animations or transitions, where applicable, so that the browser can optimise as much as possible. Tween.js is most useful when your animation needs involvecomplex arrangements, i.e. you need to sync several tweens together, have some start after one has finished, loop them a number of times, etc.
做好垃圾回收(别名GC)Be good to the Garbage collector (alias the GC)
If you use anonUpdatecallback, you need to be very careful withwhat you put on it. This function will be called many times per second, so if you're doing costly operations on each update, you might block the main thread and cause horrible jank, or---if your operations involve memory allocations,you'll end up getting the garbage collector to run too often, and cause jank too. So just don't do either of those things. Keep your
onUpdatecallbacksvery lightweight, and be sure to also use a memory profiler while you're developing.
超级补间动画Crazy tweening
This is something you might not use often, but you can use the tweening equations outside of Tween.js. They're just functions, after all. So you could use them to calculate smooth curves as input data. For example, they're used to generate audio data in thisexperiment.转:http://blog.csdn.net/opengl_es/article/details/37908641相关文章推荐
- tween.js 用户指南 - 与 Three.js 配合使用的补间动画库
- KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库
- KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库
- 使用threejs+tweenjs实现图片炸裂效果
- 详解tween.js 中文使用指南
- tween.js 用户指南
- window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果
- tween.js 中文使用指南
- 系列博文-Three.js入门指南(张雯莉)-网格 setInterval方法 requestAnimationFrame方法 使用stat.js记录FPS
- Three.js开发指南---使用three.js里的各种光源
- Tween.js 使用指南
- Ajax开源JS包Prototype使用指南
- 推荐:ESRI用户使用Python指南
- prototype使用学习手册指南之event.js
- Ext 使用指南-用户基本登录
- Prototype使用学习手册指南之dom.js
- Prototype使用学习手册指南之ajax.js
- Prototype使用指南之selector.js说明
- Prototype使用指南之hash.js
- Prototype使用指南之dom.js