React Native动画的锚点anchorPoint
2016-09-27 11:01
1261 查看
在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API.
然而在官网找了一圈没有anchorPoint这个API,后来想了想,RN与H5非常像,应该有transformOrigin这个属性,然而,还是没有,在github的
issues中有人提问过什么时候更新这个属性,但是官网仍旧没有计划;
为了达到这种效果,其实有一种间接的方法:
就是在翻转的同时保持移动,移动的代码包裹着翻转的代码就可以了,这是一种比较取巧的方式,在Facebook没有更新前,可以用这种方法替代;
stackOverflow有类似的问题http://stackoverflow.com/questions/37165715/react-native-transforms-with-pivot-point,我已帮别人解决,下面的
代码会绕(0.5,0)的锚点旋转180°:
然而在官网找了一圈没有anchorPoint这个API,后来想了想,RN与H5非常像,应该有transformOrigin这个属性,然而,还是没有,在github的
issues中有人提问过什么时候更新这个属性,但是官网仍旧没有计划;
为了达到这种效果,其实有一种间接的方法:
transform:[ {translateY: -viewHeight/2}, {rotateX:this.state.transformView.interpolate({inputRange:[0,1], outputRange:['0deg','180deg']})}, {translateY:viewHeight/2} ]
就是在翻转的同时保持移动,移动的代码包裹着翻转的代码就可以了,这是一种比较取巧的方式,在Facebook没有更新前,可以用这种方法替代;
stackOverflow有类似的问题http://stackoverflow.com/questions/37165715/react-native-transforms-with-pivot-point,我已帮别人解决,下面的
代码会绕(0.5,0)的锚点旋转180°:
/**
* Created by YQB on 16/9/14.
*/
import React, {Component} from 'react';
import {StyleSheet,View,Animated,Easing,Image} from 'react-native';
var dimensions = require('Dimensions') ;
var bgHeight = dimensions.get('window').height;
var bgWidth = dimensions.get('window').width;
var viewHeight = 100;
class RotaTest extends Component {
constructor(props) {
super(props);
this.state = {
transformView: new Animated.Value(0),
};
}
componentDidMount() {
Animated.timing(this.state.transformView,{toValue:1,duration:1000}).start();
}
render() {
return(
<View style={{flex:1}}>
<View style={layouts.lineLayout}/>
<Animated.View
style={[layouts.bgViewLayout,{transform:[ {translateY: -viewHeight/2}, {rotateX:this.state.transformView.interpolate({inputRange:[0,1], outputRange:['0deg','180deg']})}, {translateY:viewHeight/2} ]}]}/>
<View style={layouts.bgLayout}>
<Image style={layouts.imageLayout} source={require('./redPocket/icon_redbaghead@2x.png')}/>
</View>
</View>
);
}
}
const layouts = StyleSheet.create({
bgViewLayout:{
width:bgWidth * 0.3,
height:viewHeight,
top: 100,
left:100,
backgroundColor:'red',
shadowColor:'gray',
shadowOffset:{width:1,height:0},
shadowRadius:10,
shadowOpacity:0.8
},
lineLayout:{
width:bgWidth,
height:0.5,
top:100,
backgroundColor:'black'
},
bgLayout:{
width:100,
height:100,
top:250,
left:50,
backgroundColor:'green',
overflow:'hidden'
},
imageLayout:{
width:100,
height:200,
top:-100,
left:0
}
});
export default RotaTest;
相关文章推荐
- react-native动画原生驱动
- react-native 类似购物车动画
- React Native进阶之Animated动画库详解
- ReactNative动画(上)
- (十七)ReactNative 中动画详解
- reactnative Animated 插值动画(interpolate)
- React-Native进阶_2.加载指示动画 ActivityIndicator
- ReactNative Animated动画详解
- React Native动画之Animated仿网易云音乐启动动画
- react-native-Art动画基础
- React Native开发之动画(Animations)
- ReactNative——动画学习
- React-Native-动画基础-抽奖转盘
- React Native LayoutAnimation动画
- react-native使用react-art制作SVG动画
- React Native 动画 ---Animated
- react-native 仿京东加入购物车动画效果
- React Native Animated 动画之 加载中loading
- react-native-Art动画基础
- React Native 扫码组件react-native-camera与自定义UI界面动画套装