universal-animation

Web 场景下推荐使用 css3 ，小程序场景建议使用 createAnimation

实现动画，通过 weex-bindingx 环境允许的前提下优先使用 bindingx，不满足环境要求则使用 universal-transition 调用Weex或浏览器或小程序提供的动画API实现。

支持

安装

$ npm install universal-animation --save

方法

animate(config, callback)

参数

| 成员 | 类型 | 描述 | 必选 |默认值 | 支持 | | --- | --- | --- | --- | --- | --- | | config.props | Array | 详见下文描述 | ✔️ | - | | | callback | function | 动画完成后触发 | ✘ | - | |

config.props数组成员内容:

| 成员 | 类型 | 描述 | 必选 |默认值 | 支持 | | --- | --- | --- | --- | --- | --- | | element | DOMNode|string | DOM 元素， 小程序环境为一个string 类型的标志符，详细见export() | ✔️ | - | | | property | string | 动画属性，详见bindingx properties support | ✔️ | - | | | start | value | 初始值 |✘ | - | | | end | value | 结束值 | ✔️ | - | | | duration | number | 动画持续时间 | ✘ | 0 | | | delay | number | 动画延迟时间 |✘ | 0 | | | easing | string | 动画属性，详见bindingx easing support | ✘ | easeOutSine | |

export()

支持

因为小程序无法提供DOMNode，并且动画应用方式也有差异。所以小程序中使用该方法获取动画内容，然后手动绑定到元素。

参数

无

返回

| 成员 | 类型 | 描述 | | --- | --- | --- | | result | Object | 返回的对象 | | result[key] | Array | key 为 config.props[n].element，value 为小程序动画内容，将该值绑定到元素 |

示例

import { createElement, useState, useEffect, useRef, Fragment } from 'rax';
import animate from 'universal-animation';
import findDOMNode from 'rax-find-dom-node';
import View from 'rax-view';
import { isMiniApp } from 'universal-env';

export default function Demo() {
  const [animationInfo1, setAnimationInfo1] = useState({});
  const [animationInfo2, setAnimationInfo2] = useState({});
  const block1 = useRef();
  const block2 = useRef();

  useEffect(() => {
    const animationResult = animate(
      {
        props: [
          {
            element: isMiniApp ? 'view1' : findDOMNode(block1.current),
            property: 'transform.translateX',
            easing: 'easeOutSine',
            duration: 200,
            start: 0,
            end: 200,
            delay: 100,
          },
          {
            element: isMiniApp ? 'view2' : findDOMNode(block2.current),
            property: 'opacity',
            easing: 'easeOutSine',
            duration: 200,
            end: 0.2,
            delay: 100,
          },
        ],
      },
      () => {
        console.log('timing end');
      },
    ).export();

    if (isMiniApp) {
      setAnimationInfo1(animationResult.view1);
      setAnimationInfo2(animationResult.view2);
    }
  }, []);

  return (
    <>
      <View
		ref={block1}
        animation={animationInfo1}
        style={{ backgroundColor: 'red', height: '100rpx', width: '100rpx' }}
      ></View>
      <View
		ref={block2}
        animation={animationInfo2}
        style={{ backgroundColor: 'yellow', height: '100rpx', width: '100rpx' }}
      ></View>
    </>
  );
}