transformjs/example/soft.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img  src="../asset/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="//alloyteam.github.io/github.png" alt="" />
    </a>

    <script src="../transform.js" ></script>
    <script src="../asset/to.js"></script>
    <script src="../asset/alloy_flow.js"></script>
    <script>

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

    </script>
</body>
</html>