Evoker

Appearance

Return to top
On this page

ek.createAnimation

支持 Promise

功能描述

创建一个动画实例 Animation，调用实例的方法来描述动画，最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

本接口封装的 CSS 动画，如果没有连续执行多个动画的需求，可以直接使用 CSS 动画，性能会更好，也更简单。

参数

参数类型默认值必填说明
durationnumber400否动画持续时间，单位 ms
timingFunctionstringlinear否动画的效果
合法值说明
linear线性
ease动画以低速开始，然后加快，在结束前变慢
ease-in缓入
ease-out缓出
ease-in-out缓入缓出
step-start动画第一帧就跳至结束状态直到结束
step-end动画一直保持开始状态，最后一帧跳到结束状态
delaynumber0否动画延迟时间，单位 ms
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

返回值

Animation

Example

vue
<template>
  <view :animation="animationData" style="background:red; height:100px; width:100px">box</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { usePage } from 'evoker'

const { onShow } = usePage()

const animation = ek.createAnimation({
  duration: 1000,
  timingFunction: 'ease'
})

const animationData = ref(null)

onShow(() => {
  // 旋转同时放大
  animation
    .scale(2, 2)
    .rotate(45)
    .step()
  animationData.value = animation.export()

  setTimeout(() => {
    // 先旋转后放大
    animation.rotate(0).step()
    animation.scale(1, 1).step()
    animationData.value = animation.export()
  }, 1000)
})
</script>