Question

设备方向事件监听

设 备方向deviceorientaion(陀螺仪)事件是一个高频触发的事件，我们可能需要伴随设备移动来改变某个元素的属性(位置、颜色、透明度、大小 等)，本文将向您介绍如何使用 BindingX 来实现(orientation)事件的动画。如果您还不了解 BindingX 的工作原理，强烈建议先阅读文档 《简介》以及 《核心概念》。

特性介绍

要在 BindingX中使用deviceorientation事件动画，需要将eventType的值设置为orientation 。在orientation模式下，BindingX 提供了预置变量x,y ，可以参与表达式运算，x是alpha、gamma合成的代表横向位移的值，范围为(-90,90)。y是伴随beta角改变的代表纵向位移的值，范围为(-90,90)。

如何使用

下面通过一个简单的例子来介绍如何使用。假设我们要实现一个基于orientation事件来进行元素的位置的改变。

功能分解：

• 1、伴随x、y分别进行translateX、translateY移动

• 2、translateX的值从-90rem至90rem,translateY的值从-45rem至45rem

第一步：安装BindingX

npm i weex-bindingx --save

第二步：使用Rax编写需要动画的元素结构

import {createElement,Component,render,findDOMNode} from 'rax';
import BindingX from 'weex-bindingx';
import {isWeex} from 'universal-env';
import View from 'rax-view';

class Demo extends Component{
 
  render(){
    return (<View style={{flex:1}}>
        <View ref="block" style={{
          position: 'absolute',
          left: 90,
          top: 90,
          width: 300,
          height: 300,
          backgroundColor: 'red'
        }}>block</View>
      </View>);}  }
 
} 

render(<Demo/>);

绑定orientation事件

注：orientation场景下，无需配置anchor

componentDidMount(){
        BindingX.bind({
	       eventType:'orientation'
	     });
}

第四步：给需要动画的元素添加动画效果

注：props是用来描述需要动画的元素的属性property,元素节点element，表达式expression

表达式说明：x,y分别代表伴随alpha、beta、gamma角度变化时，水平和垂直偏移量，该值的区域为(-90,90)

• x从-90到90,水平位移transform.translateX也从-90rem至90rem，可以这么写'x+0'

• y从-90到90,水平位移transform.translateY也从-45rem至45rem，可以这么写'y/2+0'

具体代码如下：

BindingX.bind({
	eventType:'orientation', //描述事件触发类型是orientation触发
	props:[  //props数组用来描述伴随orientation事件需要改变的元素节点
		{
			element: getEl(this.refs.block), //动画元素
			property:'transform.translateX', //动画属性
			expression:'x+0' //表达式  
		},
		{
			element: getEl(this.refs.block), //动画元素
			property:'transform.translateY', //动画属性
	       expression:'y/2+0'		}
	]
});

//由于在web端和weex端需要传入的元素内容不同，在weex下需要传入具体的ref，而在web下需传入元素的节点(HTMLElement)
function getEl(el){
  return isWeex ? findDOMNode(el).ref : findDOMNode(el);
}