Appearance

目录

关键帧动画 ​

关键帧动画，专用于需要灵活的操作关键帧的动画需求。

属性介绍 ​

属性名介绍类型默认值说明
duration动画持续时间Number0单位（ms）
delay动画延迟时间Number0单位（ms）
repeatCount动画重复次数Number1动画重复次数
-1 无限次
0、1 执行1次
n 执行 n 次
easing动画运动速率曲线string'ease'动画运动速率曲线
linear 线性运动
ease 先加速后减速（结束时会特别慢）
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
onStart动画开始回调Functionnoop动画开始时的回调函数
onEnd动画结束回调Functionnoop动画结束的时回调函数
keyframes改变后的样式状态Array<KeyFrame>{}动画终态

KeyFrame Object

属性名介绍类型默认值说明
styles动画状态Animation Style{}每一帧的动画状态
percent关键帧百分比Number0数值范围[0,1]

动画对象示例

javascript
{
  duration: 5000, // 动画持续时间，单位 ms
  repeatCount: -1, // 重复的次数
  easing: "linear",
  onStart: () => {console.log('Frame Animation Start!')},
  onEnd: () => {console.log('Frame Animation End!')},
  keyframes: [{
    styles: {
      position: {
        x: '100hm',
        y: 0
      },
      opacity: 0.8
    },
    percent: 0.5
  }, {
    styles: {
      position: {
        x: '200hm',
        y: 0
      },
      opacity: 1
    },
    percent: 1
  }]
}

示例 ​


Tenon Vue ​

html
<template>
  <view v-animation="animation">
    <text>Animation View</text>
  </view>
</template>
<script>
 export default {
   data(){
     return {
       animation: {
        duration: 5000,
        repeatCount: -1,
        easing: "linear",
        onStart: () => {console.log('Frame Animation Start!')},
        onEnd: () => {console.log('Frame Animation End!')},
        keyframes: [{
          styles: {
            position: {
              x: '100hm',
              y: 0
            },
            opacity: 0.8
          },
          percent: 0.5
        }, {
          styles: {
            position: {
              x: '200hm',
              y: 0
            },
            opacity: 1
          },
          percent: 1
        }]
      }
     }
   }
 }
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

js
const animation = {
  duration: 5000,
  repeatCount: -1,
  easing: "linear",
  onStart: () => {console.log('Frame Animation Start!')},
  onEnd: () => {console.log('Frame Animation End!')},
  keyframes: [{
    styles: {
      position: {
        x: '100hm',
        y: 0
      },
      opacity: 0.8
    },
    percent: 0.5
  }, {
    styles: {
      position: {
        x: '200hm',
        y: 0
      },
      opacity: 1
    },
    percent: 1
  }]
}
function App(){
  return (
    <>
      <view className="item">
        <view className="box" animation={animation}></view>
      </view>
      <view className="item">
        <SyncAnimation></SyncAnimation>
      </view>
    </>
  )
}

function SyncAnimation(){
  let [animationRef, startAnimation] = useAnimation(animFadeOut)
  return (
    <>
      <view class="box" ref={animationRef}></view>
      <text class="btn" onTap={() => startAnimation()}>开始动画</text>
    </>
  )
}

更多用法，可参考Tenon React 官方示例。