Seasons123
commented
7 years ago 关于tween
【关于tween】 https://github.com/tweenjs/tween.js
https://github.com/CreateJS/TweenJS (http://www.createjs.com/docs/tweenjs/modules/TweenJS.html)
【张鑫旭：如何使用Tween.js各类原生动画运动缓动算法】 http://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/ 【tween.js的介绍】 http://www.qdfuns.com/notes/27225/983a65df303c523ea1ccbb8a4e55c363.html
【张鑫旭：小折腾：JavaScript与元素间的抛物线轨迹运动】 http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%E5%85%83%E7%B4%A0-%E6%8A%9B%E7%89%A9%E7%BA%BF-%E8%BF%90%E5%8A%A8-%E5%8A%A8%E7%94%BB/
https://en.wikipedia.org/wiki/Inbetweening
【讲解】
https://github.com/tweenjs/tween.js
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 foreveryoyo 这个函数只在你使用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
:1st_place_medal: 【SVG教程】:1st_place_medal: 中文 英文 SVG应用的技术分享网站
:1st_place_medal: 【GreenSock（GASP）-基于svg】:1st_place_medal: GreenSock github官网 GreenSock 专门用于加强SVG动画制作的相关插件如Greensock DrawSVG plugin GreenSock简明教程 GreenSock 社区论坛 我的相关总结的学习资料 :100:
【前端动画原理与实现】 http://matrix.h5jun.com/slide/show?id=117#/
【 JavaScript动画实现初探】 http://www.iteye.com/news/30363
【前端动画原理与实现】 http://www.tuicool.com/articles/z2eEjan
【React 动画】 http://www.tuicool.com/articles/Ifq2qe7
【TimelineJS横向时间轴】 http://www.jq22.com/jquery-info1921
【缓动函数】 https://zhuanlan.zhihu.com/p/26535740?group_id=839867732110491648
【react实现动画效果】 http://blog.csdn.net/xiangzhihong8/article/details/52918231