echarts的2D引擎zrender.js的摸索使用之动画zrender.Animatable

zrender.js是可视化框架Echarts.js的2D绘制引擎，支持canvas\svg\vml等多种渲染方式。

这是官方api文档

本文主要讲解zrender.Animatable.aniamte(path,loop)的使用

首先，创建一个红色的小球对象：

let ball = new zrender.Circle({
    shape:{
        cx: 0,
        cy: 0,
        r: 10,
    },
    style:{
        fill: '#ff0000',
        opacity: 0,
    }
})

给小球加一个垂直向上运动的动画，并且在上升到全程70%时，透明度开始有变化：

ball.animate('shape',true).when(1000,{cy: 20}).during((obj,i)=>{
    ball.style.opacity = i > 0.7 ? i-0.7 : 0;
}).delay(200).start()

接下来一一讲解各部分的作用：

animate(path,loop):path表示图形需要做动画的部分，此处的动画是改变图形的圆心y坐标，loop表示动画是否循环，是个布尔值。

when():表示动画持续的时间，第二个参数是动画的目标动作，即path对象中的一个属性。

during():用来实现帧动画，通过回调函数的方式，任意改变每一帧的动作，回调的第一个参数是动画对象，此处是shape,第二个参数是帧时间点（我也不知道确切叫啥，我自己是这么理解的），范围是[0,1]。

delay():延迟动画开始的时间。

start():动画开始