## 和transformjs一起摇摆

2016-11-28 13:06  【当耐特】  阅读(1816)  评论(0编辑  收藏

## tweenjs + transformjs

var element = document.querySelector("#test");
Transform(element);
element.originY = 100;
element.skewX = -20;

var Tween = createjs.Tween,
sineInOutEase = createjs.Ease.sineInOut;
Tween.get(element, {loop: true}).to({scaleY: .8}, 450, sineInOutEase).to({scaleY: 1}, 450, sineInOutEase);
Tween.get(element, {loop: true}).to({skewX: 20}, 900, sineInOutEase).to({skewX: -20}, 900, sineInOutEase);



• 元素的初始skewX是-20，为了和scale的步调一致
• 元素的originY是100，为的以企鹅的bottom center为基准点

## AlloyFlow + transformjs

var element = document.querySelector("#test");
Transform(element);
element.originY = 100;
element.skewX = -20;

function sineInOut(a) {
return 0.5 * (1 - Math.cos(Math.PI * a));
}

var alloyFlow = new AlloyFlow({
workflow: [
{
work: function () {
To.go(element, "scaleY", .8, 450, sineInOut);
To.go(element, "skewX", 20, 900, sineInOut)
},
start: 0
}, {
work: function () {
To.go(element, "scaleY", 1, 450, sineInOut)
},
start: 450
}, {
work: function () {
To.go(element, "scaleY", .8, 450, sineInOut);
To.go(element, "skewX", -20, 900, sineInOut)
},
start: 900
}, {
work: function () {
To.go(element, "scaleY", 1, 450, sineInOut);
},
start: 1350
}, {
work: function () {
this.start();
},
start: 1800
}
]
}).start();



sineInOut速率是先慢后快再慢，刚好符合软体自身约束作用力的模拟。

## 开始transformjs之旅

transformjs会计算出matrix3d赋给dom的 transform msTransform OTransform MozTransform webkitTransform，保证硬件加速和兼容性的同时，不丢失可编程性，点个赞....