动画简介 ​

现阶段，动画支持位移动画、缩放动画、旋转动画、透明度动画、背景色动画、宽度动画、高度动画。

Hummer 动画支持两种动画方式，分别为 Basic Animation Frame Animation，为了满足写次序动画的需求，Tenon 侧增加了 Step Animation。

Tenon 的动画，是通过动画对象描述的，主要分为三种动画对象：

• Basic Animation
• Steps Animation
• KeyFrame Animation

动画 ​

具体的动画样式细节，可以参考 Animation Style Object描述。

Animation Style Object

Length 长度单位，具体可参考 CSS单位

Position Object

用法 ​

Tenon Vue ​

Tenon Vue 中动画通过 v-animation指令来实现，将动画对象传递给 v-animation指令即可。

例如： <view v-animation="animationObject"></view>

用法 ​

Tenon React ​

Tenon React 支持两种动画方式，分别是属性传递和Hook的方式。

Plan1. 属性传递 ​

Tenon React 中动画通过 animation属性来实现，将动画对象传递给 animation属性即可。 例如： <view animation={animationObject}></view>

Plan2. useAnimation Hook ​

通过useAnimation钩子，可以异步操作动画执行.

使用用例如下：

import {useAnimation} from '@hummer/tenon-react';

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

animationRef 引用需要绑定到需要执行动画的视图上，startAnimation 方法控制何时开始执行动画。