最近，React Native在一个新的座位选择项目中进行了测试。在熟悉新框架的同时，交互效果可以稍微与Native保持一致。

让我们分享一个在项目本身更重要的互动动画方法，RT。

这次我们不装大象了，因为我真的买了冰箱=，=

本着简洁明了的原则，还是三步走：

步骤1:通过动画创建合成动画的视图。仔细观察发现，《选择座位》的动画类似于《添加购物车》的动画，可以分解为不透明度和3D变换两部分。Transform可以进一步分解为四个子动画：水平位移(translateX)、垂直位移(translateY)、旋转(rotateZ)和缩放(参见render())；对于代码)；

第二步：响应点击事件，准备相关动画参数。单击目标位置时，单击的位置坐标(事件。native event . changed touch[0]。pagex | y)是从动画的父组件中的onPress事件的事件对象中获取的，作为动画的开始位置。结束位置一般是固定位置，当然也可以指定动态值；

第三步：获取参数并启动()播放动画(代码参见componentDidMount()。从父组件获取位置参数，并通过道具传递给子动画组件。不透明度、rotateZ、scale的属性值为静态变化，分别为1-0 0deg-360deg 1-0(插值的方法可以映射每个属性不同类型的值，更方便统一控制)；

注意：类似的全局动画应该显示在最高级别，以防止被后期渲染组件阻止。最好单独打包和构建，以增强其在UI中的呈现水平。

从“React”导入React；从“react-native”导入{样式表、视图、图像、动画}；导出默认类SeatDroppingextends React。PureComponent{构造器(道具){ super(道具)；this.state={ animValue:新动画。Value(0)，from page x : props . clicked position . x，//from event . nativeevent . changed touches[0]from page : props . y，to page x : props . pspposition . x，to page : props . pspposition . y }；} component DidMount(){ animated . timing(this . state . anim value，{ toValue: 1，duration: 600 })。start()；} render () { const { animValue，fromPageX，fromPageY，toPageX，toPageY }=this.state返回(动画。视图样式={{ zIndex: 9，position: 'absolute '，opa city 3360 anim value . INTERPOL({ inputrange :[0，1]，outputRange: [1，0]))，transform :[{ translatex : anim value . INTERPOL({ inputrange :[0，1]，outputrange : [`$ { from page x } px./img/ic_seat_focus.png')}样式={[ { width: 36，height: 32，zindex : 9 }]}//动画。视图)；}}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。