balance com transformjs

Antecedente

O Facebook fez um jogo HTML5 há muito tempo. A animação de abertura é um software semelhante ao tofu, o efeito mostrado abaixo é o gif:

O Facebook estava usando easeljs e tweenjs de createjs para produzir, com base na animação Canvas. O princípio básico é: movimento circular skewX scaleY de DisplayObject para implementar o swing de software.
Atualmente, transformjs também pode fazer isso, porque os transformjs também podem definir o skewX e a escalaY do elemento dom. Primeiro olhe a forma como o Facebook.

tweenjs + transformjs

Observe que o tweenjs aqui é um subprojeto no createjs, é o projeto tween.js no github.
“ `js
var element = document.querySelector (” # test “);
Transformar (elemento);
element.originY = 100;
element.skewX = -20;

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

Online demo： [http://alloyteam.github.io/AlloyTouch/transformjs/example/soft2.html](http://alloyteam.github.io/AlloyTouch/transformjs/example/soft2.html)
The code above is very simple. Here's a little explanation:
- The initial skewX of element is -20 in order to keep step with scale
- element's originY is 100, for the penguin's center bottom as the reference point
you can see it, due to the high abstraction of transformjs, can be easily used with tweenjs, without any pressure.

## AlloyFlow + transformjs
May the above code is not very understand the specific implementation of the process? To tell the truth, the first time to see the above code does not look at the clear process. Then use the AlloyFlow workflow to achieve the same way to achieve the same effect.

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

Demonstração online ：http://alloyteam.github.io/AlloyTouch/transformjs/example/soft.html
Pode ver acima o fluxo de trabalho, há uma pilha de trabalho de acordo com o início do tempo para executar e, finalmente, no 1800 ms quando a chamada this.start () retornará ao ponto inicial para começar a funcionar novamente. Também é necessário explicar por que a escolha de atenuação sineInOut. Pode dar uma olhada em sua imagem de easing:

A taxa SineInOut é lenta para rápida e depois lenta, apenas em linha com a simulação de força de ligação do próprio software.
Então, AlloyFlow é o artefato? E ouça a próxima decomposição de abertura.

Comece a usar transformjs

Muitas pessoas perguntam: os transformjs podem fazer alguns efeitos legais?
Na verdade, ele apenas forneceu a base da capacidade de transformação, não com o tempo e o movimento do acoplamento da biblioteca. Pode ser usado em conjunto com qualquer biblioteca de movimento de tempo. Então, como é legal você confiar totalmente na criatividade e na imaginação.
Contabilidade Transformjs para calcular o matrix3d ​​atribuído à transformação msTransform OTransform MozTransform webkitTransform DOM, para garantir a aceleração de hardware e compatibilidade ao mesmo tempo, não perca o programável, aponte um elogio.

Página inicial ：http://alloyteam.github.io/AlloyTouch/transformjs/
Github ：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs