快应用动画

此文重点讲述华为与其他厂商动画方法的使用区别；

本来之前一直用的是css动画，但是某些时候css动画没那么灵活，就得尝试用用这更灵活的animate动画了。

以下为代码示例，我们只用简单的旋转动画以示二者区别

<div id="rotateAction"></div>


onReady() {
    const element = this.$element('rotateAction');
    // 华为的动作帧传对象
    // 其他平台的动作帧传对象字符串，且一定要加time:0和time:100
    const keyFrames_Huawei = [
        {
            transform: { rotate: 0 }
        },
        {
            transform: { rotate: '360deg' }
        }
    ]
    const keyFrames_Other = [
        {
            transform: `{ rotate: 0 }`,
            time: 0,
        },
        {
            transform: `{ rotate: 360deg}`,
             time: 100,
        }
    ]
    const animation = element.animate(
        brand === 'huawei' ? keyFrames_Huawei : keyFrames_Other,
        {
            easing: 'ease-in-out',
            fill: 'forwards',
            duration: 1000
        })
    animation.play();
    // 电脑端开发工具此回调函数不会走，需要真机调试
    animation.onfinish = () => {
        console.log('animate finished')
    }
    setTimeout(() => {
        console.log('animate finished')
    }, 1000)
}