如何使用RN Animated做一個“添加購物車”動畫

小編給大家分享一下如何使用RN Animated做一個“添加購物車”動畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近在選座的新項目中試用了一下 React Native，熟悉新框架的同時，可以略微將交互效果和 Native 看齊了。

分享一下項目本身比較重要的一個交互動畫的做法, RT。

這次我們就不裝大象了，因為我真的買了冰箱 =,=

本著言簡意賅，不故弄玄虛的原則，依然是三步：

第 1 步：通過 Animated 創建合成動畫的 View。仔細觀察，“選擇座位” 動畫和 “添加購物車” 動畫類似，都可以分解為透明度變化（ opacity ）和 3D 變化（ transform ）兩部分。而 transform 又能進一步分解為水平位移（ translateX ）、垂直位移（ translateY ）、旋轉（ rotateZ ）、縮放（ scale ）四個分動畫（ 代碼見 render() ）；

第 2 步：響應點擊事件，準備好動畫的相關參數。目標位置被點擊時，在動畫的父級組件中通過 onPress 事件的 event 對象獲取點擊的位置坐標（ event.nativeEvent.changedTouches[0].pageX|Y ）作為動畫起始位置。終點位置一般為固定位置，當然你也可以指定動態值；

第 3 步：獲取參數， start() 播放動畫（ 代碼見 componentDidMount() ）。從父級組件中獲取位置參數并通過 props 傳入子動畫組件。其中 opacity 、 rotateZ 、 scale 屬性值都是靜態變化，分別為 1 -> 0 0deg -> 360deg 1 -> 0 （可以利用 interpolate 方法做各個屬性不同類型值的 mapping，更加方便統一控制）；

注意：類似的全局動畫要展示在最高層級，防止被后渲染的組件遮擋，最好單獨封裝組建提升其在 UI 中的渲染層級。

import React from 'react';

import {
 StyleSheet,
 View,
 Image,
 Animated
} from 'react-native';

export default class SeatDroppingextends React.PureComponent{
 constructor (props) {
  super(props);
  this.state = {
   animValue: new Animated.Value(0),
   fromPageX: props.clickedPosition.x, // from event.nativeEvent.changedTouches[0]
   fromPageY: props.clickedPosition.y,
   toPageX: props.psgPosition.x,
   toPageY: props.psgPosition.y
  };
 }
 componentDidMount() {
  Animated.timing(
   this.state.animValue,
   {
    toValue: 1,
    duration: 600
   }
  ).start();
 }
 render () {
  const {
   animValue,
   fromPageX,
   fromPageY,
   toPageX,
   toPageY
  } = this.state;
  return (
   <Animated.View
    style={{
     zIndex: 9,
     position: 'absolute',
     opacity: animValue.interpolate({
      inputRange: [0, 1],
      outputRange: [1, 0]
     }),
     transform: [
      {
       translateX: animValue.interpolate({
        inputRange: [0, 1],
        outputRange: [`${fromPageX}px`, `${toPageX}px`]
       })
      },
      {
       translateY: animValue.interpolate({
        inputRange: [0, 1],
        outputRange: [`${fromPageY}px`, `${toPageY}px`]
       })
      },
      {
       rotateZ: animValue.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '180deg']
       })
      },
      {
       scale: animValue.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0]
       })
      }
     ]}}
   >
    <Image
     source={require('../img/ic_seat_focus.png')}
     style={[
      {
       width: 36,
       height: 32,
       zIndex: 9
      }
     ]}
    />
   </Animated.View>
  );
 }
}

以上是“如何使用RN Animated做一個“添加購物車”動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！