Appearance

目录

基础动画 ​

基础动画是 Hummer特有的，用于实现常用的动画。

属性介绍 ​

属性名介绍类型默认值说明
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 先加速后减速
styles改变后的样式状态Animation Style{}动画终态
onStart动画开始回调Functionnoop动画开始时的回调函数
onEnd动画结束回调Functionnoop动画结束的时回调函数

动画对象示例

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

示例 ​


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('Basic Animation Start!')},
        onEnd: () => {console.log('Basic Animation End!')},
        styles: {
          position: {
            x: '100hm',
            y: 0
          },
          opacity: 0.8
        }
      }
     }
   }
 }
</script>

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

Tenon React ​

js
const animation = {
  duration: 5000,
  repeatCount: -1,
  easing: "linear",
  onStart: () => {console.log('Basic Animation Start!')},
  onEnd: () => {console.log('Basic Animation End!')},
  styles: {
    position: {
      x: '100hm',
      y: 0
    },
    opacity: 0.8
  }
}
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 官方示例。