React Native动画的锚点anchorPoint

来源：互联网发布：微信公众平台修改域名编辑：程序博客网时间：2024/06/06 03:18

在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},                        {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;

0 0