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

成都創(chuàng)新互聯(lián)專注于安鄉(xiāng)企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城系統(tǒng)網(wǎng)站開發(fā)。安鄉(xiāng)網(wǎng)站建設(shè)公司,為安鄉(xiāng)等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

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

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

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

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

注意：類似的全局動(dòng)畫要展示在最高層級(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è)“添加購物車”動(dòng)畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：如何使用RNAnimated做一個(gè)“添加購物車”動(dòng)畫-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://weahome.cn/article/jshii.html