和transformjs一起摇摆

转载

mob604756f3c518 2016-11-28 20:20:00

文章标签 github html facebook 官网缓动 文章分类 运维

写在前面

记得以前facebook做过一款HTML5游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的gif所示：

和transformjs一起摇摆_github

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title> </head> <body> <img  src="alloy.png" id="test" style="display: block; width: 210px;height: 210px;position: absolute;left: 50%;margin-left: -105px;margin-top: -105px;top:50%;"> <a href="https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs" target="_blank" style="position: absolute; right: 0; top: 0;">     <img src="http://alloyteam.github.io/AlloyGameEngine/AlloyPaper/example/asset/img/github.png" alt="" /> </a>  <script src="../transform.min.js" ></script> <script src="createjs.tween.js"></script>  <script>           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);  </script> </body> </html>

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.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为基准点

可以看到，由于transformjs高度抽象，可以和tweenjs轻松搭配使用，没有任何压力。

AlloyFlow + transformjs

可能上面的代码不是很明白具体实现的流程？说实话，第一次看到上面的代码也没有一下看清晰流程。那么就使用AlloyFlow分解工作流的方式去实现同样的效果。

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();