对普通对象使用动画函数

自定义属性变化,用来解决进行插值运算操作的需求。具体参照下面的例子

Class

对普通对象使用动画函数

在canvas中画一个圆,半径随时间变化。

KISSY.use("anim,node", function (S, Anim, Node) {
    var $ = Node.all;
    var ctx = document.getElementById('Canvas').getContext('2d');

    function circle(cx, cy, r, opt) {
        ctx.beginPath();
        for (var x in opt) {
            ctx[x] = opt[x];
        }
        ctx.arc(cx, cy, r, 0, 2 * Math.PI, true);
        ctx.fill();
        ctx.closePath();
    }

    circle(100, 100, 5, {
        fillStyle: "#999"
    });

    var o = {r: 1};
    var anim = new Anim(o, {
        r: 100
    }, {
        easing: "swing",
        duration: 1,
        frame: function (anim, fx) {
            circle(100, 100, fx.val);
        }
    });
    anim.run();

    $('#stop').on('click', function () {
        anim.stop();
    });
});