React-NativeAnimate动画使用方法汇总五:sequence、parallel实现组合动画
React-Native中Animate动画使用方法汇总整理(五)之利用sequence、parallel实现组合动画
写作时间:2021/9/23
React-Native版本:0.63.2
目标平台:iOS(安卓平台尚未检测)
本篇是RN动画组件使用方式整理的第5篇,上篇主要整理了easing的诸多使用方法,但是这些变换方式是非组合性的,在实际的开发过程中,我们为了使动画效果变得更加丰富,通常希望动画能够提供组合效果,比如:在组件变宽的过程中高度降低,或者缩放的过程中改变透明度,或者组件的变换方式存在一定的先后顺序,这篇笔记利用sequence、parallel来解决这些问题,先看效果
通过上面的动图可以对sequence、parallel区别有一个大致的了解,sequence为顺次执行,parallel为同时执行
完整代码如下
//App.js
'use strict';
import React from 'react';
import AnimatedTest from './demos/demo_2/AnimatedTest';
export default class App extends React.Component {
render() {
return (
<AnimatedTest />
);
}
}
//AnimatedTest.js
'use strict';
import React from 'react';
import { SafeAreaView } from 'react-native';
import Ani_5 from './Ani_5';
export default class AnimatedTest extends React.Component {
render() {
return (
<SafeAreaView>
<Ani_5 />
</SafeAreaView>
);
}
}
//Ani_5.js
'use strict';
import React from 'react';
import {StyleSheet, SafeAreaView, Button, Animated, Text} from 'react-native';
export default class Ani_5 extends React.Component {
constructor() {
super();
console.log('Ani_5_constructor()');
this.state = {
width_1: new Animated.Value(10),
height_1: new Animated.Value(10),
width_2: new Animated.Value(10),
height_2: new Animated.Value(10),
};
}
render() {
console.log('Ani_5_render()');
return (
<SafeAreaView>
<Button title={'Start'} onPress={this.startAni} />
<Text>sequence</Text>
<Animated.View
style={[
{
width: this.state.width_1,
height: this.state.height_1,
},
styles.Ani,
]}
/>
<Text>parallel</Text>
<Animated.View
style={[
{
width: this.state.width_2,
height: this.state.height_2,
},
styles.Ani,
]}
/>
</SafeAreaView>
);
}
startAni = () => {
console.log('Ani_5_startAni()');
Animated.sequence([
Animated.timing(this.state.width_1, {
toValue: 300,
duration: 3000,
useNativeDriver: false,
}),
Animated.timing(this.state.height_1, {
toValue: 300,
duration: 3000,
useNativeDriver: false,
}),
]).start();
Animated.parallel([
Animated.timing(this.state.width_2, {
toValue: 300,
duration: 3000,
useNativeDriver: false,
}),
Animated.timing(this.state.height_2, {
toValue: 300,
duration: 3000,
useNativeDriver: false,
}),
]).start();
};
}
const styles = StyleSheet.create({
Ani: {
backgroundColor: 'cyan',
},
});
需要注意的是
1、sequence和parallel方法需要传递的参数为数组
2、动画组件需要绑定多个state中维护的变量
下篇会对缩放动画的实现进行整理
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfhchfa
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01