React Native动画的锚点anchorPoint

在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API.

然而在官网找了一圈没有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},{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动画的锚点anchorPoint

相关文章