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

阅读 956
收藏 0
2018-08-16
原文链接: github.com

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

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