欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用RN Animated做一個“添加購物車”動畫的方法

 更新時間:2018年09月12日 13:39:50   作者:Elevenbeans'' blog  
這篇文章主要介紹了使用RN Animated做一個“添加購物車”動畫的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

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

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

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

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

注意:類似的全局動畫要展示在最高層級,防止被后渲染的組件遮擋,最好單獨封裝組建提升其在 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>
  );
 }
}

 以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論