参考文章：http://blog.itpub.net/69978258/viewspace-2776743/

import React from 'react';
import {
    View,
    StyleSheet,
    Animated,
    Text,
    Easing
} from 'react-native';
export default class AnimatedUnit extends React.Component {
    static defaultProps = {
        endDiameter: 600,
        initialPosition: { top: 0, left: 0 },
        waveColor: '#5BC6AD',
        intervals: 500,//间隔时间
        spreadSpeed: 500,//扩散速度
    }
    constructor(props) {
        super(props);
        this.anim = new Animated.Value(0)
        this.animatedFun = null;
    }
    startAnimation = () => {
        this.anim.setValue(0);
        this.animatedFun = Animated.timing(this.anim, {
            toValue: 1,
            duration: this.props.spreadSpeed,
            easing: Easing.linear,// 线性的渐变函数,
            useNativeDriver: false
        }).start()
    }
    render() {
        const { initialPosition, endDiameter, waveColor } = this.props;
        let r = endDiameter / 2;// 直径变化量,top与left的变化是直径的一半
        return (
            <View>
                <Animated.View style={[styles.spreadCircle, { backgroundColor: waveColor }, {
                    opacity: this.anim.interpolate({
                        inputRange: [0, 1],
                        outputRange: [1, 0]
                    }),
                    height: this.anim.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, endDiameter]
                    }),
                    width: this.anim.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, endDiameter]
                    }),
                    top: this.anim.interpolate({
                        inputRange: [0, 1],
                        outputRange: [initialPosition.top, initialPosition.top - r]
                    }),
                    left: this.anim.interpolate({
                        inputRange: [0, 1],
                        outputRange: [initialPosition.left, initialPosition.left - r]
                    }),
                },]}></Animated.View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    spreadCircle: {
        borderRadius: 999,
        position: 'absolute',
    },
})

Easing API

</header>

该Easing模块实现通用缓动功能。Animate.timing（）使用此模块传达动画中物理上可信的动作。

你可以在http://easings.net/上找到一些常用缓动函数的可视化。

预定义的动画

该Easing模块通过以下方法提供了几个预定义的动画：

• back 提供了一个简单的动画，在向前移动之前对象略微回退

• bounce 提供了一个弹跳动画

• ease 提供了一个简单的惯性动画

• elastic 提供简单的弹簧交互

标准功能

提供了三种标准缓动功能：

• linear

• quad

• cubic

该poly功能可用于实现四次，五次和其他更高功率的功能。

附加功能

附加的数学函数由以下方法提供：

• bezier 提供三次贝塞尔曲线

• circle 提供循环功能

• sin 提供正弦函数

• exp 提供指数函数

以下帮助程序用于修改其他缓动功能。

• in 运行缓动功能

• inOut 使任何缓动功能对称

• out 向后运行缓动功能

方法

static step0(n)

一个步进函数，返回1的任何正值n。

static step1(n)

步进功能，如果n大于或等于1则返回1。

static linear(t)

线性函数，f(t) = t。位置与经过时间一一对应。

http://cubic-bezier.com/#0,0,1,1

static ease(t)

一种简单的惯性相互作用，类似于一个物体慢慢加速到速度。

http://cubic-bezier.com/#.42,0,1,1

static quad(t)

二次函数，f(t) = t * t。位置等于经过时间的平方。

http://easings.net/#easeInQuad

static cubic(t)

一个三次函数，f(t) = t * t * t。位置等于经过时间的立方。

http://easings.net/#easeInCubic

static poly(n)

功能函数。位置等于经过时间的N次方。

n = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint

static sin(t)

正弦函数。

http://easings.net/#easeInSine

static circle(t)

循环功能。

http://easings.net/#easeInCirc

static exp(t)

指数函数。

http://easings.net/#easeInExpo

static elastic(bounciness)

一个简单的弹性相互作用，类似于一个来回摆动的弹簧。

默认弹性是1，超过一次。0的跳动完全没有超调，而N> 1的跳动会超过N次。

http://easings.net/#easeInElastic

沃尔夫勒姆情节：

• http://tiny.cc/elastic_b_1 (bounciness = 1, default)

• http://tiny.cc/elastic_b_3 (bounciness = 3)

static back(s)

与使用Animated.parallel()创建该对象动画小幅作为动画开始一个简单的效果。

Wolfram剧情：

• http://tiny.cc/back_default (s = 1.70158, default)

static bounce(t)

提供简单的弹跳效果。

http://easings.net/#easeInBounce

static bezier(x1, y1, x2, y2)

提供一个三次贝塞尔曲线，相当于CSS Transitions' transition-timing-function。

一个有用的可视化三次贝塞尔曲线的工具可以在http://cubic-bezier.com/找到。

static in(easing)

向前运行缓动功能。

static out(easing)

向后运行缓动功能。

static inOut(easing)

使任何缓动功能对称。缓动功能将持续一半的持续时间，然后在剩余的持续时间后退。