React Native动画的锚点anchorPoint

最新推荐文章于 2026-05-24 07:31:38 发布

原创

最新推荐文章于 2026-05-24 07:31:38 发布 · 3.7k 阅读

标签

#React Native

收录于

在React Native开发中，为实现图片围绕非中心点旋转的效果，由于RN官方并未提供anchorPoint API或transformOrigin属性，开发者需要通过在旋转动画同时进行平移来间接达成目标。在StackOverflow上已有相关问题解答，本文介绍一种通过组合翻转和平移实现图片绕(0.5,0)点旋转180°的方法。" 107536458,8647210,GB28181设备目录查询问题及解决策略,"['GB28181协议', '网络通信', '问题解决', '设备管理']

在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°: