react-native添加购物车抛物线效果

A react native component simulation of parabolic motion.

Install

$ npm i react-native-parabolic --save

Show case

A demo app can be found here.

Add it to your project

import Parabolic from 'react-native-parabolic'
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  AlertIOS,
  Text,
  View
} from 'react-native';

export default class par extends Component {
  constructor(props){
    super(props)
  }
  componentDidMount(){
    setTimeout(()=>{
      this.refs["parabolic"].run([20,20,200,300]) // startX startY endX endY
    }, 200)
  }
  animateEnd(){
    AlertIOS.alert("title", "animate end")
  }
  render() {
    return (
      <View style={styles.container}>
        <Parabolic
          ref={"parabolic"}
          style={{position: "absolute", left: 30, top: 30}}
          renderChildren={() => {
            return (
              <View style={{backgroundColor:"#f00", width: 16, height: 16, borderRadius: 8}}></View>
            )
          }}
          animateEnd={this.animateEnd.bind(this)}
          curvature={.008}
          duration={250}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Properties

Prop	Default	Type	Description
renderChildren	function	func	render children layout
animateEnd	function	func	animate end callback function
curvature	0.003	number	Parabolic curvature
duration	350	number	animate duration time
style	null	object	animate element style