参考文章：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)
使任何缓动功能对称。缓动功能将持续一半的持续时间，然后在剩余的持续时间后退。
网友评论