transfromjs动画效果
记得以前facebook做过⼀款HTML5游戏。开场动画是⼀块软体类似⾖腐的东西⼀起摇摆。类似的效果如下⾯的gif所⽰：
facebook当时使⽤的是createjs下的⼦项⽬easeljs和tweenjs去制作，基于Canvas的动画。基本的原理主要是：循环运动Canvas抽象的DisplayObject的skewX和scaleY来实现软体摇摆。
⽬前来看transformjs也能做到，因为transformjs也能运动skewX和scaleY。先来看看facebook的⽅式。
tweenjs + transformjs
注意这⾥的tweenjs是createjs下的⼦项⽬，⽽不是github上的tween.js项⽬。
var element = document.querySelector("#test");
Transform(element);
element.skewX = -20;
var Tween = createjs.Tween,
sineInOutEase = createjs.Ease.sineInOut;
<(element, {loop: true}).to({scaleY: .8}, 450, sineInOutEase).to({scaleY: 1}, 450, sineInOutEase);
<(element, {loop: true}).to({skewX: 20}, 900, sineInOutEase).to({skewX: -20}, 900, sineInOutEase);
元素的初始skewX是-20，为了和scale的步调⼀致
元素的originY是100，为的以企鹅的bottom center为基准点
可以看到，由于transformjs⾼度抽象，可以和tweenjs轻松搭配使⽤，没有任何压⼒。
AlloyFlow + transformjs
可能上⾯的代码不是很明⽩具体实现的流程？说实话，第⼀次看到上⾯的代码也没有⼀下看清晰流程。那么就使⽤AlloyFlow分解⼯作流的⽅式去实现同样的效果。
var element = document.querySelector("#test");
Transform(element);
element.skewX = -20;
function sineInOut(a) {
return 0.5 * (1 - s(Math.PI * a));
}
var alloyFlow = new AlloyFlow({
workflow: [
{
work: function () {
<(element, "scaleY", .8, 450, sineInOut);
<(element, "skewX", 20, 900, sineInOut)
},
start: 0
}, {
canvas动画work: function () {
<(element, "scaleY", 1, 450, sineInOut)
},
start: 450
}, {
work: function () {
<(element, "scaleY", .8, 450, sineInOut);
<(element, "skewX", -20, 900, sineInOut)
},
start: 900
}, {
work: function () {
<(element, "scaleY", 1, 450, sineInOut);
},
start: 1350
}, {
work: function () {
this.start();
},
start: 1800
}
]
}).start();
sineInOut速率是先慢后快再慢，刚好符合软体⾃⾝约束作⽤⼒的模拟。
那么，AlloyFlow是何⽅神器？且听下回单独开篇分解。
开始transformjs之旅
有很多童鞋问，transformjs还能做什么酷炫特效？怎么在官⽹看到的都是简单的效果？
其实transformjs他只是提供了基础的transformation能⼒，不与时间、和运动库耦合。可以和任意时间运动库配合使⽤。所以怎么酷炫完全靠⼤家创意和想象⼒，搭配transformjs使⽤就对了。
transformjs会计算出matrix3d赋给dom的 transform msTransform OTransform MozTransform webkitTransform，保证硬件加速和兼容性的同时，不丢失可编程性，点个赞....

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。