Appearance

目录

次序动画 ​

次序动画，是 Tenon 特有的，便于实现有顺序概念的动画。

属性 ​

属性名介绍类型默认值说明
steps每一步的动画Array<BasicAnimation>{}每一步的动画

BasicAnimation 对象，可参考基础动画。

动画对象示例

javascript
{
  steps: [{
    duration: 5000,
    repeatCount: 1,
    easing: "linear",
    onStart: () => {console.log('Animation Start!')},
    onEnd: () => {console.log('Animation End!')},
    styles: {
      position: {
        x: '100hm',
        y: 0
      },
      opacity: 0.8
    }
  }, {
    duration: 5000,
    repeatCount: 1,
    easing: "linear",
    onStart: () => {console.log('Animation Start!')},
    onEnd: () => {console.log('Animation End!')},
    styles: {
      position: {
        x: '200hm',
        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: {
        steps: [{
          duration: 5000,
          repeatCount: 1,
          easing: "linear",
          onStart: () => {console.log('Animation Start!')},
          onEnd: () => {console.log('Animation End!')},
          styles: {
            position: {
              x: '100hm',
              y: 0
            },
            opacity: 0.8
          }
        }, {
          duration: 5000,
          repeatCount: 1,
          easing: "linear",
          onStart: () => {console.log('Animation Start!')},
          onEnd: () => {console.log('Animation End!')},
          styles: {
            position: {
              x: '200hm',
              y: 0
            },
            opacity: 0.8
          }
        }]
      }
     }
   }
 }
</script>

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

Tenon React ​

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