526互联

使用Element.animate()实现动画

发布时间 2023-12-27 22:20:44作者: Ewar-k

Element.animate()实现

<div id="app">
    <button @click="startAmi">开始</button>
    <p>{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            msg: "hello world"
        },
        methods: {
            startAmi(el) {
                el.target.animate([
                    {
                        offset: .2,
                        transform: "translateX(100px)",
                        color: "red"
                    },
                    {
                        offset: 1,
                        transform: "translateX(200px)",
                        color: "blue"

                    }
                ], {
                    duration: 1000,
                    fill: "forwards"
                })
            }
        }
    })
</script>

Element.animate(keyframes,options)

参数：

  • keyframes：关键帧对象数组，或一个关键帧对象，格式如下：

    {
    //设置当前帧的偏移（在动画中的那个阶段完成，就是CSS中定义动画时的百分比），且与其他关键帧对象之间必须升序排序
    //取值在[0-1]之间
    offset?: number | null,
    //给指定关键帧之间应用过渡效果
    // 可选的值有 linear ease-in ease-out ease-in-out
    easing?:string,
    //解析元素的动画如何影响其基础属性值
    //accumulate：累积到基础值
    // add：被添加到与之组合的基础值（又名加法）中
    // replace：覆盖它与组合的基础值：替换
    composite?:"accumulate" | "add" | "auto" | "replace"
    //其它css样式
    ...cssStyle
}

  • options：代表动画持续时间的整数（以毫秒为单位），或者一个配置对象，格式如下：

    {
    	//动画延迟执行时间
    	delay?: number,

        direction?: PlaybackDirection,
        //动画完成时间
        duration?: number,
        //动画随时间变化的速率
        easing?: string,
        //动画结束后延迟的毫秒数。这主要用于根据另一个动画的结束时间对动画进行排序。默认值为 0。
        endDelay?: number,
        //规定动画在等待状态和结束状态的样式
        /*
        none		不改变默认行为。
    	forwards	向前填充模式，当动画完成后，保持最后一帧属性值。
    	backwards	向后填充模式，在delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
   		both		向前和向后填充模式都被应用。
        */
        fill?: "none" | "forwards" | "backwards" | "both",
        //描述动画应在迭代中的哪个点开始。例如，0.5 表示在第一次迭代的中途开始，设置此值后，具有 2 次迭代的动画将在第三次迭代中途结束。默认值为 0.0。
        iterationStart?: number,
        //动画应重复的次数。默认值为 1
        iterations?: number
}

动画有返回值

动画的返回值可以进行动画的暂停、取消等操作

const  an = el.target.animate([
    {
        offset: .5,
        transform: "translateX(100px)",
        color: "red",
        easing:"linear"
    },
    {
        offset: 1,
        transform: "translateX(200px)",
        color: "blue",
        // fontSize:"26px",
        composite:"replace"

    }
], {
    duration: 2000,
    fill: "forwards"
})
//暂停动画
an.cancel()