react-native 类似购物车动画

react-native 类似购物车动画

今天我们来讲讲react-native如何实现类似点击商品出现一个抛物线到购物车的动画。
首先需要你需要react-native的Animated的用法([Animated](http://blog.csdn.net/sinat_17775997/article/details/54933752))。

接下来我们就简单的Demo用代码来实现，点击+号出现一个抛物线飞到购物车的动画效果。

'use strict'

import React, { Component } from 'react'
import {
    Text,
    View,
    Image,
    StyleSheet,
    ScrollView,
    Dimensions,
    Animated,
    TouchableOpacity,
    findNodeHandle,
    UIManager,
    Alert,
    Easing
} from 'react-native'

import Icon from 'react-native-vector-icons/Ionicons'

let {width, height} = Dimensions.get('window')

导入我们需要的包

export default class BuyCar extends Component{
   
    constructor(props){
        super(props)
        this.state = {
            animateBtnX: 0,
            animateBtnY: -999,
            addBtnY: -999,
            addBtnX:0,
            runAnim: new Animated.Value(0),
            endX: 26,// 购物车的位置 在距屏幕的左侧26像素
            endY: height-44, // 购物车的位置 在距屏幕的底部44像素
            curvature: .003, // 动画抛高系数，值越大抛的越高
            duration: 800, // 动画运动时间
        }
    }

    // 获取点击坐标XY
    getScreenXY(i,item){
        const self = this;