React-Native中Animate动画使用方法汇总整理（四）之timing利用easing实现动画的灵活变换

写作时间：2021/9/23
React-Native版本：0.63.2
目标平台：iOS（安卓平台尚未检测）

本篇是RN动画组件使用方式整理的第4篇，上篇主要整理了动画配置的三种方法，分别是decay、spring和timing，其中timing最为常用，这是因为它可以灵活配置easing属性来实现实现灵活变换，关于easing的用法先看效果

可以看到，虽然动画执行的终止状态是一致的，但是当easing进行不同的配置时，动画的执行过程会产生不同的效果

完整代码如下

//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_4 from './Ani_4';export default class AnimatedTest extends React.Component {render() {return (<SafeAreaView><Ani_4 /></SafeAreaView>);}
}

//Ani_4.js
'use strict';import React from 'react';
import {StyleSheet, SafeAreaView, Button, Animated, Easing, Text} from 'react-native';export default class Ani_4 extends React.Component {constructor() {super();console.log('Ani_4_constructor()');this.state = {width_1: new Animated.Value(0),width_2: new Animated.Value(0),width_3: new Animated.Value(0),width_4: new Animated.Value(0),width_5: new Animated.Value(0),width_6: new Animated.Value(0),width_7: new Animated.Value(0),width_8: new Animated.Value(0),};}render() {console.log('Ani_4_render()');return (<SafeAreaView><Button title={'Start'} onPress={this.startAni} /><Text style={styles.textStyle}>linear</Text><Animated.View style={[{marginLeft: this.state.width_1}, styles.Ani]} /><Text style={styles.textStyle}>sin</Text><Animated.View style={[{marginLeft: this.state.width_2}, styles.Ani]} /><Text style={styles.textStyle}>exp</Text><Animated.View style={[{marginLeft: this.state.width_3}, styles.Ani]} /><Text style={styles.textStyle}>bezier(0.34, 1.56, 0.64, 1)</Text><Animated.View style={[{marginLeft: this.state.width_4}, styles.Ani]} /><Text style={styles.textStyle}>bezier(0.36, -0.3, 0.98, 0.6)</Text><Animated.View style={[{marginLeft: this.state.width_5}, styles.Ani]} /><Text style={styles.textStyle}>bezier(0.5, -1.22, 0.53, 1.81)</Text><Animated.View style={[{marginLeft: this.state.width_6}, styles.Ani]} /><Text style={styles.textStyle}>bezier(0, 0.69, 1, 0.32)</Text><Animated.View style={[{marginLeft: this.state.width_7}, styles.Ani]} /><Text style={styles.textStyle}>bezier(0.05, 0.72, 0.34, 1.35)</Text><Animated.View style={[{marginLeft: this.state.width_8}, styles.Ani]} /></SafeAreaView>);}startAni = () => {console.log('Ani_4_startAni()');Animated.timing(this.state.width_1, {toValue: 300,duration: 3000,easing: Easing.linear,useNativeDriver: false,}).start();Animated.timing(this.state.width_2, {toValue: 300,duration: 3000,easing: Easing.sin,useNativeDriver: false,}).start();Animated.timing(this.state.width_3, {toValue: 300,duration: 3000,easing: Easing.exp,useNativeDriver: false,}).start();Animated.timing(this.state.width_4, {toValue: 300,duration: 3000,easing: Easing.bezier(0.34, 1.56, 0.64, 1),useNativeDriver: false,}).start();Animated.timing(this.state.width_5, {toValue: 300,duration: 3000,easing: Easing.bezier(0.36, -0.3, 0.98, 0.6),useNativeDriver: false,}).start();Animated.timing(this.state.width_6, {toValue: 300,duration: 3000,easing: Easing.bezier(0.5, -1.22, 0.53, 1.81),useNativeDriver: false,}).start();Animated.timing(this.state.width_7, {toValue: 300,duration: 3000,easing: Easing.bezier(0, 0.69, 1, 0.32),useNativeDriver: false,}).start();Animated.timing(this.state.width_8, {toValue: 300,duration: 3000,easing: Easing.bezier(0.05, 0.72, 0.34, 1.35),useNativeDriver: false,}).start();};
}const styles = StyleSheet.create({Ani: {width: 60,height: 60,backgroundColor: 'cyan',},textStyle: {fontSize: 25,},
});

这里有几点需要进行说明：
1、之前的总结当中，案例代码里的timing并没有配置easing属性，这时它默认执行一种变换方式，需要注意的细节是，这种默认的变换方式并不是线性的，变化的过程实际上经历了：慢速->快速->慢速的一个过程，如果需要动画的变化遵循绝对的线性，需要使用Easing.linear
2、Easing提供了多种现成的变换方式，能够满足大部分情况下的开发需求，但是如果我们仍然需要自行定制的话，可以使用案例当中的Easing.bezier，bezier变化的参数实际上我们不需要关心，可以通过在相关的网页调整变换方式来动态获取这些参数，之后在将这些参数粘贴到bezier方法中即可

下篇会对复合变换进行整理（sequence和parallel）

React-Native中Animate动画使用方法汇总整理（四）之timing利用easing实现动画的灵活变换相关推荐

React-Native中Animate动画使用方法汇总整理（六）之缩放的实现
React-Native中Animate动画使用方法汇总整理(六)之缩放的实现写作时间:2021/9/24 React-Native版本:0.63.2 目标平台:iOS(安卓平台尚未检测) 整理的进 ...
React-Native中Animate动画使用方法汇总整理（一）之简单动画的实现
React-Native中Animate动画使用方法汇总整理(一)之简单动画的实现写作时间:2021/9/23 React-Native版本:0.63.2 目标平台:iOS(安卓平台尚未检测) RN ...
在 React Native 中实现 3D 动画
本文的范围将涵盖对 Three.js 库和 Animated API 的探索. 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习: 要了解更多关于可以在 Reac ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
如何在React Native中使用react-navigation 5处理导航
React-navigation is the navigation library that comes to my mind when we talk about navigation in Re ...
android 倒计时封装,react native中的聊天气泡及timer封装成的发送验证码倒计时
其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可 ...
理解 React Native 中的 AJAX 请求
曾经,大多数 Web 应用程序通过用户操作刷新整个网页以与 Web 服务器通信. 后来,AJAX(异步 JavaScript 和 XML)概念通过提供一种在后台与 Web 服务器通信的方式使 Web ...
我在React Native中构建时获得的经验教训
by Amanda Bullington 通过阿曼达·布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while ...
如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...

React-Native中Animate动画使用方法汇总整理（四）之timing利用easing实现动画的灵活变换

React-Native中Animate动画使用方法汇总整理（四）之timing利用easing实现动画的灵活变换相关推荐

最新文章

热门文章