快应用动画

最新推荐文章于 2023-11-07 11:39:05 发布

对点出暴击

最新推荐文章于 2023-11-07 11:39:05 发布

阅读量250

点赞数

分类专栏：快应用文章标签： javascript 快应用前端

本文链接：https://blog.csdn.net/qq_20686495/article/details/128547387

版权

快应用专栏收录该内容

5 篇文章

订阅专栏

文章对比了华为与其它平台在使用animate进行动画处理时的不同，特别是关键帧的定义方式。通过一个旋转动画的例子，展示了华为需要使用动作帧对象，而其他平台则需要时间戳和变换字符串。还提到了动画的执行时长、缓动函数和填充模式的设置，并指出在电脑端开发工具上可能无法触发onfinish回调，需要真机调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

本来之前一直用的是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)
}