ReactNative入门 —— 动画篇（下）
在上篇动画入门文章中我们了解了在 React Native 中简单的动画的实现方式，本篇将作为上篇的延续，介绍如何使用 Animated 实现一些比较复杂的动画。
动画组合
在 Animated 中提供了一些有趣的API方法来轻松地按我们的需求实现组合动画，它们分别是 Animated.parallel、Animated.sequence、Animated.stagger、Animated.delay。
我们会分别介绍这些方法，并从中学习到一些其它有用的API。最后我们会得到一个有趣的DOGE动画 
1. Animated.parallel
并行执行一系列指定动画的方法，其格式如下：
Animated.parallel(Animates<Array>, [conf<Object>])
第一个参数接受一个元素为动画的数组，通过执行 start() 方法可以并行执行该数组中的所有方法。
如果数组中任意动画被中断的话，该数组内对应的全部动画会一起停止，不过我们可以通过第二个（可选）参数 conf 来取消这种牵连特性：
{stopTogether: false}
我们先看一个简单的、没有使用 Animated.parallel 的例子：
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
grassTransY : new Animated.Value(Dimensions.get('window').height/2),
bigDogeTrans : new Animated.ValueXY({
x: 100,
y: 298
})
}
}
componentDidMount() {
Animated.timing(this.state.grassTransY, {
toValue: 200,
duration: 1000,
easing: Easing.bezier(0.15, 0.73, 0.37, 1.2)
}).start();
Animated.timing(this.state.bigDogeTrans, {
toValue: {
x : Dimensions.get('window').width/2 - 139,
y : -200
},
duration: 2000,
delay: 1000
}).start();
}
render() {
return (
<View style={styles.container}>
<Animated.View style={[styles.doges, {transform: this.state.bigDogeTrans.getTranslateTransform()}]} >
<Image source={require('./src/img/bdoge.png')}/>
</Animated.View>
<Animated.View style={[styles.grass, {transform: [{translateY: this.state.grassTransY}]}]}></Animated.View>
</View>
);
}
}
var styles = StyleSheet.create({
grass: {
position: 'absolute',
width: Dimensions.get('window').width,
backgroundColor: '#A3D900',
height: 240
},
doges: {
position: 'absolute'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#73B9FF'
}
});
执行如下：
更改为 Animated.parallel 形式为（只需要修改 componentDidMount 代码块）：
componentDidMount() {
var timing = Animated.timing;
Animated.parallel([
timing(this.state.grassTransY, {
toValue: 200,
duration: 1000,
easing: Easing.bezier(0.15, 0.73, 0.37, 1.2)
}),
timing(this.state.bigDogeTrans, {
toValue: {
x : Dimensions.get('window').width/2 - 139,
y : -200
},
duration: 2000,
delay: 1000
})
]).start();
}
执行后效果是一致的。
不过对于上方的代码，这里提一下俩处API：
new Animated.ValueXY({
x: 100,
y: 298
})
以及我们给 doge 设置的样式：
{transform: this.state.bigDogeTrans.getTranslateTransform()}
它们是一个语法糖，Animated.ValueXY 方法会生成一个 x 和 y 的映射对象，方便后续使用相关方法将该对象转换为需要的样式对象。
例如这里我们通过 .getTranslateTransform() 方法将该 ValueXY 对象转换为 translate 的样式值应用到组件上，即其初始样式等价于
{transform: [{
translateX: 100
},
{
translateY: 298
}]}
注意在 Animated.timing 中设置动画终值时需要以
{ x: XXX,
y: YYY
}
的形式来做修改：
timing(this.state.bigDogeTrans, {
toValue: { //注意这里
x : Dimensions.get('window').width/2 - 139,
y : -200
},
duration: 2000,
delay: 1000
})
另外，除了能将 ValueXY 对象转为 translateX/Y 的 getTranslateTransform() 方法，我们还能通过 getLayout() 方法来将 ValueXY 对象转为 {left, top} 形式的样式对象：
style={{
transform: this.state.anim.getTranslateTransform()
}}
不过这里就不举例了。
我们回到 Animated.parallel 方法的话题来。我们对开头的代码做小小的改动来学习一个新的API—— interpolate 插值函数：
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
//注意这里初始化value都为0
grassTransY : new Animated.Value(0),
bigDogeTransY : new Animated.Value(0)
}
}
componentDidMount() {
var timing = Animated.timing;
Animated.parallel(['grassTransY', 'bigDogeTransY'].map((prop, i) => {
var _conf = {
toValue: 1, //注意这里设置最终value都为1
duration: 1000 + i * 1000
};
i || (_conf.easing = Easing.bezier(0.15, 0.73, 0.37, 1.2));
return timing(this.state[prop], _conf)
})).start();
}
render() {
return (
<View style={styles.container}>
<Animated.View style={[styles.doges, {transform: [{
translateX: Dimensions.get('window').width/2 - 139
},
{
translateY: this.state.bigDogeTransY.interpolate({
inputRange: [0, 1], //动画value输入范围
outputRange: [298, -200] //对应的输出范围
})
}]}]}>
<Image source={require('./src/img/bdoge.png')}/>
</Animated.View>
<Animated.View style={[styles.grass, {transform: [{
translateY: this.state.grassTransY.interpolate({
inputRange: [0, 1],
outputRange: [Dimensions.get('window').height/2, 200]
})
}]}]}></Animated.View>
</View>
);
}
}
注意我们这里统一把动画属性初始值都设为0：
this.state = {
//注意这里初始化value都为0
grassTransY : new Animated.Value(0),
bigDogeTransY : new Animated.Value(0)
}
然后又把动画属性的终值设为1：
var _conf = {
toValue: 1, //注意这里设置最终value都为1
duration: 1000
};
return timing(this.state[prop], _conf)
然后通过 interpolate 插值函数将 value 映射为正确的值：
translateY: this.state.bigDogeTransY.interpolate({
inputRange: [0, 1], //动画value输入范围
outputRange: [298, -200] //对应的输出范围
})
这意味着当 value 的值为0时，interpolate 会将其转为 298 传给组件；当 value 的值为1时则转为 -200。
因此当value的值从0变化到1时，interpolate 会将其转为 (298 - 498 * value) 的值。
事实上 inputRange 和 outputRange 的取值非常灵活，我们看官网的例子：
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
outputRange: [300, 0, 1, 0, 0],
});
其映射为：
Input Output
-400 450
-300 300
-200 150
-100 0
-50 0.5
0 1
50 0.5
100 0
101 0
200 0
2. Animated.sequence
Animated的动画是异步执行的，如果希望它们能以队列的形式一个个逐步执行，那么 Animated.sequence 会是一个最好的实现。其语法如下：
Animated.sequence(Animates<Array>)
事实上了解了开头的 parallel 方法，后面几个方法都是一样套路了。
来个例子，我们依旧直接修改上方代码即可：
componentDidMount() {
var timing = Animated.timing;
Animated.sequence(['grassTransY', 'bigDogeTransY'].map((prop, i) => {
var _conf = {
toValue: 1
};
if(i==0){
_conf.easing = Easing.bezier(0.15, 0.73, 0.37, 1.2)
}
return timing(this.state[prop], _conf)
})).start();
}
这样 doge 的动画会在 草地出来的动画结束后才开始执行：
3. Animated.stagger
该方法为 sequence 的变异版，支持传入一个时间参数来设置队列动画间的延迟，即让前一个动画结束后，隔一段指定时间才开始执行下一个动画。其语法如下：
Animated.stagger(delayTime<Number>, Animates<Array>)
其中 delayTime 为指定的延迟时间（毫秒），我们继续拿前面的代码来开刀（为了给力点我们再加入一个running doge的动画事件）：
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
grassTransY : new Animated.Value(0),
bigDogeTransY : new Animated.Value(0),
runningDogeTrans : new Animated.ValueXY({
x: Dimensions.get('window').width,
y: Dimensions.get('window').height/2 - 120
})
}
}
componentDidMount() {
var timing = Animated.timing;
Animated.stagger(1500, ['grassTransY', 'bigDogeTransY', 'runningDogeTrans'].map((prop, i) => {
var _conf = {
toValue: 1
};
if(i==0){
_conf.easing = Easing.bezier(0.15, 0.73, 0.37, 1.2)
}
if(i==2){ //running doge
_conf.toValue = {
x: Dimensions.get('window').width - 150,
y: Dimensions.get('window').height/2 - 120
}
}
return timing(this.state[prop], _conf)
})).start();
}
render() {
return (
<View style={styles.container}>
<Animated.View style={[styles.doges, {transform: [{
translateX: Dimensions.get('window').width/2 - 139
},
{
translateY: this.state.bigDogeTransY.interpolate({
inputRange: [0, 1],
outputRange: [298, -200]
})
}]}]}>
<Image source={require('./src/img/bdoge.png')}/>
</Animated.View>
<Animated.View style={[styles.grass, {transform: [{
translateY: this.state.grassTransY.interpolate({
inputRange: [0, 1],
outputRange: [Dimensions.get('window').height/2, 200]
})
}]}]}></Animated.View>
<Animated.View style={[styles.doges, {
transform: this.state.runningDogeTrans.getTranslateTransform()
}]}>
<Image source={require('./src/img/sdoge.gif')}/>
</Animated.View>
</View>
);
}
}
我们把三个动画间隔时间设定为 2000 毫秒，执行效果如下：
4. Animated.delay
噢这个接口实在太简单了，就是设置一段动画的延迟时间，接收一个时间参数（毫秒）作为指定延迟时长：
Animated.delay(delayTime<Number>)
常规还是跟好基友 Animated.sequence 一同使用，我们继续修改前面的代码：
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
grassTransY : new Animated.Value(0),
bigDogeTransY : new Animated.Value(0),
runningDogeTrans : new Animated.ValueXY({
x: Dimensions.get('window').width,
y: Dimensions.get('window').height/2 - 120
})
}
}
componentDidMount() {
var timing = Animated.timing;
Animated.sequence([
Animated.delay(1000), //延迟1秒再开始执行动画
timing(this.state.grassTransY, {
toValue: 1,
duration: 1000,
easing: Easing.bezier(0.15, 0.73, 0.37, 1.2)
}),
timing(this.state.bigDogeTransY, {
toValue: 1,
duration: 3000
}),
Animated.delay(2000), //延迟2秒再执行running doge动画
timing(this.state.runningDogeTrans, {
toValue: {
x: Dimensions.get('window').width - 150,
y: Dimensions.get('window').height/2 - 120
},
duration: 2000
}),
Animated.delay(1000), //1秒后跑到中间
timing(this.state.runningDogeTrans, {
toValue: {
x: Dimensions.get('window').width/2 - 59,
y: Dimensions.get('window').height/2 - 180
},
duration: 1000
})
]
).start();
}
render() {
return (
<View style={styles.container}>
<Animated.View style={[styles.doges, {transform: [{
translateX: Dimensions.get('window').width/2 - 139
},
{
translateY: this.state.bigDogeTransY.interpolate({
inputRange: [0, 1], //动画value输入范围
outputRange: [298, -200] //对应的输出范围
})
}]}]}>
<Image source={require('./src/img/bdoge.png')}/>
</Animated.View>
<Animated.View style={[styles.grass, {transform: [{
translateY: this.state.grassTransY.interpolate({
inputRange: [0, 1],
outputRange: [Dimensions.get('window').height/2, 200]
})
}]}]}></Animated.View>
<Animated.View style={[styles.doges, {
transform: this.state.runningDogeTrans.getTranslateTransform()
}]}>
<Image source={require('./src/img/sdoge.gif')}/>
</Animated.View>
</View>
);
}
}
执行如下：
到这里我们基本就掌握了 RN 动画的常用API了，对于本章的 Doge 动画我们再搞复杂一点——再加一只running doge，然后在动画结束后，让最大的Doge头一直不断地循环旋转：
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
grassTransY : new Animated.Value(0),
bigDogeTransY : new Animated.Value(0),
bigDogeRotate : new Animated.Value(0),
runningDogeTrans : new Animated.ValueXY({
x: Dimensions.get('window').width,
y: Dimensions.get('window').height/2 - 120
}),
runningDoge2Trans : new Animated.ValueXY({
x: Dimensions.get('window').width,
y: Dimensions.get('window').height/2 - 90
})
}
}
componentDidMount() {
var timing = Animated.timing;
Animated.sequence([
Animated.delay(1000), //延迟1秒再开始执行动画
timing(this.state.grassTransY, {
toValue: 1,
duration: 1000,
easing: Easing.bezier(0.15, 0.73, 0.37, 1.2)
}),
timing(this.state.bigDogeTransY, {
toValue: 1,
duration: 3000
}),
Animated.parallel([
Animated.sequence([
timing(this.state.runningDogeTrans, {
toValue: {
x: Dimensions.get('window').width - 150,
y: Dimensions.get('window').height/2 - 120
},
duration: 2000
}),
Animated.delay(1000), //1秒后跑到中间
timing(this.state.runningDogeTrans, {
toValue: {
x: Dimensions.get('window').width/2 - 99,
y: Dimensions.get('window').height/2 - 180
},
duration: 1000
})
]),
Animated.sequence([
timing(this.state.runningDoge2Trans, {
toValue: {
x: Dimensions.get('window').width/2 + 90,
y: Dimensions.get('window').height/2 - 90
},
duration: 2000
}),
Animated.delay(1000),
timing(this.state.runningDoge2Trans, {
toValue: {
x: Dimensions.get('window').width/2 + 20,
y: Dimensions.get('window').height/2 - 110
},
duration: 1000
})
])
])
]
).start(()=>{
this.bigDogeRotate()
});
}
//大doge一直不断循环
bigDogeRotate(){
this.state.bigDogeRotate.setValue(0); //重置Rotate动画值为0
Animated.timing(this.state.bigDogeRotate, {
toValue: 1,
duration: 5000
}).start(() => this.bigDogeRotate())
}
render() {
return (
<View style={styles.container}>
<Animated.View style={[styles.doges, {transform: [{
translateX: Dimensions.get('window').width/2 - 139
},
{
translateY: this.state.bigDogeTransY.interpolate({
inputRange: [0, 1], //动画value输入范围
outputRange: [298, -200] //对应的输出范围
})
},
{
rotateZ: this.state.bigDogeRotate.interpolate({
inputRange: [0, 1], //动画value输入范围
outputRange: ['0deg', '360deg'] //对应的输出范围
})
}]}]}>
<Image source={require('./src/img/bdoge.png')}/>
</Animated.View>
<Animated.View style={[styles.grass, {transform: [{
translateY: this.state.grassTransY.interpolate({
inputRange: [0, 1],
outputRange: [Dimensions.get('window').height/2, 200]
})
}]}]}></Animated.View>
<Animated.View style={[styles.doges, {
transform: this.state.runningDogeTrans.getTranslateTransform()
}]}>
<Image source={require('./src/img/sdoge.gif')}/>
</Animated.View>
<Animated.View style={[styles.doges, {
transform: this.state.runningDoge2Trans.getTranslateTransform()
}]}>
<Image source={require('./src/img/sdoge.gif')}/>
</Animated.View>
</View>
);
}
}
最终效果如下：
写完这篇文章都凌晨了，我也是蛮拼的
共勉~
ReactNative入门 —— 动画篇（下）的更多相关文章
- ReactNative入门 —— 动画篇（上）
在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject ...
- ReactNative入门（安卓）——API（上）
Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, C ...
- React-Native入门指导之iOS篇 —— 一、准备工作
React-Native 入门指导系列教程目录 一.准备工作 (已完成) 二.项目介绍与调试 三.CSS样式与Flex布局 四.常用UI控件的使用 五.JSX在React-Native中的应用 六.事 ...
- [转]Apache Maven 入门篇(下)
原文地址: Apache Maven 入门篇(下) 作者:George Ma 第一篇文章大概的介绍了一下Apache Maven以及它的下载和安装,并且运行了一个简单的示例.那么在对maven有了一点 ...
- React-Native入门指导之iOS篇
React-Native 入门指导系列教程目录 一.准备工作 (已完成) 二.项目介绍与调试 三.CSS样式与Flex布局 四.常用UI控件的使用 五.JSX在React-Native中的应用 六.事 ...
- ElasticSearch入门 第一篇：Windows下安装ElasticSearch
这是ElasticSearch 2.4 版本系列的第一篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...
- jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
- iOS React-Native入门指南之HelloWorld
React-native 作为facebook开源项目,最近是火的一塌糊涂,它采用node.js能够写ios和android的native界面代码,简直是太酷了.支持动态更新,而且appstore 提 ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...
随机推荐
- Hangfire项目实践分享
Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 平台之大势何人能挡？ 带着你的Net飞奔吧！
镇楼图: 跨平台系列: Linux基础 1.Linux基础学习 By dnt http://www.cnblogs.com/dunitian/p/4822807.html 环境配置 1.Hyper-v ...
- SQL Server 致程序员（容易忽略的错误）
标签:SQL SERVER/MSSQL/DBA/T-SQL好习惯/数据库/需要注意的地方/程序员/容易犯的错误/遇到的问题 概述 因为每天需要审核程序员发布的SQL语句,所以收集了一些程序员的一些常见 ...
- 当忘记mysql数据库密码时如何进行修改
因为长时间没有使用数据库了,或者把密码改完之后就忘了数据库密码,不能正常进入数据库,也无法修改密码,有一个简单的常用修改密码方式: 1.首先找到和打开mysql.exe和mysqld.exe所在的文件 ...
- .NET平台开源项目速览(17)FluentConsole让你的控制台酷起来
从该系列的第一篇文章 .NET平台开源项目速览(1)SharpConfig配置文件读写组件 开始,不知不觉已经到第17篇了.每一次我们都是介绍一个小巧甚至微不足道的.NET平台的开源软件,或者学习,或 ...
- 关于 CSS 反射倒影的研究思考
原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...
- 在.NET Core之前,实现.Net跨平台之Mono+CentOS+Jexus初体验
准备工作 本篇文章采用Mono+CentOS+Jexus的方式实现部署.Net的Web应用程序(实战,上线项目). 不懂Mono的请移步张善友大神的:国内 Mono 相关文章汇总 不懂Jexus为何物 ...
- ASP.NET Core 中文文档 第四章 MVC（3.9）视图组件
作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩 章节: 介绍视图组件 创建视图组件 调用视图组件 演练:创建一个简单的视图组件 附加的资源 查看或下载示例代码 介绍视图 ...
- css知多少之绝对定位小记
一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...