Front-end Animation Learning Resources Summary

[Seasons123]

🥇 【SVG教程】🥇
中文
英文
SVG应用的技术分享网站

🥇 【GreenSock（GASP）-基于svg】🥇
GreenSock github官网
GreenSock 专门用于加强SVG动画制作的相关插件如Greensock DrawSVG plugin
GreenSock简明教程
GreenSock 社区论坛
我的相关总结的学习资料 💯

【前端动画原理与实现】
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

[Seasons123]

关于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 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

[Seasons123]

🥇 为什么用setInterval做动画会掉帧，用requestAnimationFrame不会掉帧。 其实就是解释原理。

关于requestAnimationFrame

【CSS3动画那么强，requestAnimationFrame还有用么？】
http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/

https://www.npmjs.com/package/raf

——《HTML5+JavaScript动画基础 Billy Lamberta &Keith Peters著》
由于开发者对基于HTML5的动画兴趣日增，因此web浏览器为此专门为JavaScript的开发者实现了一个API，通过他提供了基于浏览器的优化实现。window.requestAnimationFrame函数接收一个回调函数作为参数，并确保在重绘屏幕前执行该回调函数。在回调函数中对程序的修改必定发生在下一个浏览器重绘事件之前。可以通过对requestAnimationFrame函数的链式调用实现动画循环：

(function drawFrame(){
  window.requestAnimationFrame(drawFrame,canvas);
// animation code
});

这里定义了drawFrame函数，其中包含了每一帧将要执行的动画代码。该函数的第一行代码调用了window.requestAnimationFrame函数并将drawFrame函数自身的引用作为参数值传入。第二个可选的参数是要绘制的canvas。你可能会觉得惊讶，我么居然可以在完成一个函数的定义之前就把它作为一个参数值传入另一个函数。切记，在函数运行到需要将它作为参数值传入时，它早已定义好了。
当执行drawFrame函数时，window.requestAnimationFrame将drawFrame函数放入队列等待在下一个动画间隔中再次执行，而当它再次执行时又重复这一过程。由于不断的请求执行该函数，因此就串联成了一个循环。所以，该函数中定义的代码会不断的调用，使得我们可以在canvas上以细微的间隔时间绘制动画。

[Seasons123]

动画基础：补间动画

定义：外文名 Tweens
做flash动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动；插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的。
简介
FLASH动画制作中补间动画分两类：一类是形状补间，用于形状的动画；另一类是动画补间用于图形及元件的动画。
Flash CS4补间动画的类型包括：移动补间动画、形状补间动画和传统补间动画
补间动画也是Flash中非常重要的表现手段之一，补间动画
有动作补间动画与形状补间动画两种。
制作方法
动作补间动画是指在Flash的时间帧面板上，在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash 将自动根据二者之间的帧的值创建的动画。动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头；构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状组合（Ctrl+G）或者转换成元件后才可以做动作补间动画。
形状补间动画是在Flash的时间帧面板上，在一个关键帧上绘制一个形状，然后在另一个关键帧上更改该形状或绘制另一个形状等，Flash将自动根据二者之间的帧的值或形状来创建的动画，它可以实现两个图形之间颜色、形状、大小、位置的相互变化。形状补间动画建立后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间也有一个长长的箭头；构成形状补间动画的元素多为用鼠标或压感笔绘制出的形状，而不能是图形元件、按钮、文字等，如果要使用图形元件、按钮、文字，则必先打散（Ctrl+B）后才可以做形状补间动画。

[Seasons123]

关于PopUp组件动效部分注意点

一、动效实现思路(包括对联和非对联广告)来自我的repository: popup https://github.com/Seasons123/popup
1.关于遮罩动画
关键点是css样式：

.cover{
     width:100%;
     height:100%;
     position:absolute;
     top:0;
     left:0;
     z-index:1;
     background-color:#000;
     opacity:0.3;
 }

2.弹窗居中
https://github.com/Seasons123/popup/issues/3

[Seasons123]

Scalable组件动效部分注意点

1.关于Scalable组件全屏收缩动画原理http://blog.csdn.net/u013578101/article/details/45363039

（1）开始是采用的这个思路：
我的依赖OneTween
实际上采用的原理是：利用css3的translate（），
比如向上滑动： transform: translate(0px, -1000px);

但是，经过测试，这个方法是不可行的。因为根据该部分动效的需求：收缩效果，不是单纯滑动。
使用 transform: translate(0px, -1000px);后，相应的元素是向上位移了1000px,但它原来的位置仍然占据了文档流的空间。这使得页面中其余的元素无法跟随该元素的上移一块上移。

（2）收缩原理：向上收缩时，元素的高度匀速减至0
用一个setInterval定时器，每隔10毫秒执行一个函数，每次执行这个函数时就把element的height属性减去一部分。举个例子，如果定义的duration为1600的话，这个函数就会执行(1600/10) = 160次。也就是说要分160次把element的height减为0，那么每次要减去的值就是：元素的初始总高度/160

[Seasons123]

marquee组件

1底层.利用了CSS3 Animation
http://www.w3school.com.cn/cssref/pr_animation.asp
http://blog.sina.com.cn/s/blog_85c1dc100101c5eu.html
注意：animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。

[Seasons123]

10 个优质的 CSS 与 JS LOGO 动画示例
http://www.tuicool.com/articles/iI7FNbI

[Seasons123]

FullScreenAnim组件

#34

[Seasons123]

QQ空间萌宠之舞——HTML5骨骼动画实践

QQ空间萌宠之舞——HTML5骨骼动画实践.pdf

[Seasons123]

canvas

svg转canvas
http://blog.csdn.net/baidu_24024601/article/details/53352079

HTML5 canvas drawImage() 方法
http://www.w3school.com.cn/tags/canvas_drawimage.asp

[Seasons123]

了解【首先考虑css动画然后考虑js，可以考虑的js库有】
velocity：很全面的JavaScript动画库
vivus：可以动态描绘 SVG 的 JS 库, 支持多种动画
Web Animation：Javascript 实现的 Web Animation API
scrollReveal.js：使元素以非常酷帅的方式进入画布 (Viewpoint)
snabbt.js：一个利用 Javascript 和 CSS transform 的 animation 库
transit：jquery实现的css动画
matter-js：2D 物理效果引擎，碰撞、弹跳等
parallax：一个用于响应智能手机 orientation 的库
focusable：是页面上一个元素高亮的库，关灯效果
sensor.js：在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。定位、运动、倾斜等
animatable：仅仅依靠 border-width 和 background-position 实现的各种动态效果
Bounce.js：漂亮的css3动画库
browsers.
dynamics.js：弹性物理效果