1. 动画

jtopo提供了非常简单、非常强大的动画系统。

动画的原理比较简单：根据一个变化的变量修改图元对象的某个属性

1.1. 动画创建

let mainNode = new Node(''); // 初始化

// 使用动画系统
let animationSystem = stage.animationSystem;

// 创建一个动画实例：一个node对象在5秒内旋转一周（弧度：2*Math.PI)
let animationRotate = animationSystem.anime({
    // 变量n的开始
    from: 0,

    // 变量n结束
    to: 2 * Math.PI,

    // 动画时间
    duration: 5000,

    // 每一帧的动画行为（这里是选择一个节点对象）
    update: function (n) {
        // 旋转节点
        mainNode.rotate(n);
    }
});

// 播放
animationRotate.play();

1.2. 动画控制（ 暂停、取消、继续）

// 暂停
animationRotate.pause();

// 继续
animationRotate.continue();

// 取消
animationRotate.cancel();

1.3. 动画循环、特效（动画曲线）

// 模拟掉落, 从node当前y, 向下掉 200个像素
animationSystem.anime({
    from: [node.y],
    to: [node.y + 200],

    update: (arr) => {
        node.y = arr[0];
    },

    // 效果（缓动函数, 详见下一小节）
    effect: 'easeOutBounce',
    
    duration: 2000,
}).play();

1.4. 缓动函数

为什么别人的动画看起来平滑流畅 ，而自己做出来却效果平平，完全没有那种丝般润滑的感觉。

答案是动画缺少了灵魂，这个灵魂就是缓动函数。

缓动函数是用来描述数值的变化速率，这些数值可以是动画对象的宽高，透明度，旋转，缩放
等属性值，它们的变化率可以用函数曲线来表示。

理解缓动函数可以让我们制作出更加符合直觉的UI动效，也是学习css和svg动画必须掌握的知识。

例如生活中的一些现象：被拍打弹跳的蓝球，缓缓停靠的地铁，到空中飘落的树叶，
它们运动的速率都是曲线，而不是一成不变的直线，曲线变化更符合人的感官直觉，而匀速变化往往让人感到沉闷。

缓动函数速查表

1.5. 参考

详细的：Animation-API参考