# 组件动画的设计与实现
## recomputed方法
vanjs通过定时定时轮询的方式实现组件在动画。
在根组件初始化完成之后，会触发一个定时的轮询，每个一段时间就触发触发一次所有组件的刷新，此时会执行所有组件的recompute方法。
所以，当我们需要在组件内部实现动画时，可以通过在初始化参数中添加recompute方法，如以下的实例代码：
``` javascript
var Bird = Van.component({
    // 省略部分代码
    name: 'Bird',
    data: {
        x: 100,
        y: 100,
        vx: 0,
        vy: 0,
        radius: 10
    },
    render: function() {
        // ...省略实现
    },
    off: false,
    recompute: function() {
        const t = 0.017;
        const g = 500;
        // 每隔 17ms 计算一次
        // 位移距离等于平均速度*时间
        var vp = this.vy + (this.vy + g*t);
        var deltaY = vp * t;
        this.y = this.y + deltaY;
        this.vy = this.vy + g*t;
        if(this.y > 485 && !this.flag) {
            this.flag = true;
            this.vy = - 0.900001 * this.vy;
        }
        if(this.y < 485) {
            this.flag = false;
        }
    },
});
```
在以上的代码中，我们使用recomputed实现了一个让组件做自由落体运动的动画。可以看到，在recompute中主要做两个事情，一是通过各种参数计算变动（包括位移距离），二是通过操作组件自身的属性实现图形组件的刷新。通过很好的结合这两点，可以实现非常复杂的动画。

## 异步渲染
由于用户可能在recompute方法中执行非常复杂的计算，这些计算如果顺序执行的话可能会造成动画卡顿。所以在Vanjs的实现中，所有的recompute函数都是异步执行的。