Question

实现动画，通过 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 为小程序动画内容，将该值绑定到元素

示例

<View animation={animationInfo1} style={
	  background: 'red',
	  height: '100rpx',
	  width: '100rpx'
}></View>
<View animation={animationInfo2} style={
	  background: 'yellow',
	  height: '100rpx',
	  width: '100rpx'
}></View>

import animate from 'universal-animation';
import findDOMNode from 'rax-find-dom-node';
import { isMiniApp } from 'universal-env';

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

if (isMiniApp) {
  this.setState({
    animationInfo1: animationResult.view1,
    animationInfo2: animationResult.view2,
  });
}