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

創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元烏蘭察布做網(wǎng)站,已為上家服務(wù),為烏蘭察布各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

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

分享一下項(xiàng)目本身比較重要的一個(gè)交互動(dòng)畫(huà)的做法, RT。

這次我們就不裝大象了，因?yàn)槲艺娴馁I(mǎi)了冰箱 =,=

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

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

第 2 步：響應(yīng)點(diǎn)擊事件，準(zhǔn)備好動(dòng)畫(huà)的相關(guān)參數(shù)。目標(biāo)位置被點(diǎn)擊時(shí)，在動(dòng)畫(huà)的父級(jí)組件中通過(guò) onPress 事件的 event 對(duì)象獲取點(diǎn)擊的位置坐標(biāo)（ event.nativeEvent.changedTouches[0].pageX|Y ）作為動(dòng)畫(huà)起始位置。終點(diǎn)位置一般為固定位置，當(dāng)然你也可以指定動(dòng)態(tài)值；

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

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

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 (
   
    
   
  );
 }
}

以上是“如何使用RN Animated做一個(gè)“添加購(gòu)物車(chē)”動(dòng)畫(huà)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！