移动跨平台ReactNative动画组件Animated【14】

2024-04-26 20:04:56

前端江太公

React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native
是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。

React Native系列导航
01-React Native 基础教程
02-安装ReactNative
03-ReactNative目录结构
04-ReactNative视图View
05-ReactNative组件样式style
06-ReactNative文本组件Text
07-ReactNative组件状态state
08-ReactNative组件属性props
09-ReactNative输入组件TextInput
10-ReactNative图片组件Image
11-ReactNative活动指示器组件
12-ReactNative弹出框Alert
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
15-ReactNative开关组件Switch
16-状态栏组件StatusBar
17-ReactNative滚动视图ScrollView
18-ReactNative选择器Picker
19-ReactNative网络请求

React Native 动画组件 Animated

动作给予一个物体生命。比如一个石头，是不会动的，除非外力，不然它永远在那里。

而有生命的物体，会有各种动作，可以从一个地方走到另一个地方，可以模仿其它动物，会吃，会喝，会睡觉。

App 也一样。如果只是简单的展示，浏览它的人就会觉得枯燥无味。但一定用户的点击有了响应，那就会觉得特别亲切。

动画是在动作的基础上更上一层，它对开始到结束的动作结果赋予了变化的过程。让使用者可以从视觉感知的看到动作的变化。

Android 和 iOS 原生自带了超级多的动画，比如 Android 动画就可以分为三大类：逐帧动画(Frame)、 补间动画(Tween) 、属性动画 (Property)。

而 iOS 也毫不逊色，通过 Core Animation 提供了 基础动画(CABasicAnimation)、关键帧动画(CAKeyframeAnimation)、组动画(CAAnimationGroup)、过渡动画(CATransition)。

React Native 是一个跨平台的开发环境。既然要跨平台，那就必须通过一种通用的方式把 iOS 和 Android 的动画包装起来。这个包装的结果就是 动画组件 Animated。

React Native 动画组件 Animated

React Native 动画组件 Animated 是对 Android 和 iOS 动画的封装，以统一的接口的提供了为 React Native 提供了动画功能。

动画组件 Animated 提供的是一种值动画，也就是属性改变动画。也就是通过动态的不断的改变控件的某个属性的值来达到动画的目的。

当我们需要创建一个动画时，我们必须先初始化一个值。React Native Animated 组件提供了两种值类型

值类型	说明
Animated.Value()	单个值变化
Animated.ValueXY()	两个值变化

Animated 组件提供了三种类型来控制动画的缓动过程。

函数	说明
Animated.decay()	以摩擦力模型来控制动画的缓动，简单的说就是以初始速度开始并逐渐减速到停止
Animated.spring()	使用弹簧物理模型来控制动画的缓动
Animated.timing()	使用时间来控制动画的缓动

默认情况下， React Native 只能对以下组件提供动画功能

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View
Animated.FlatList
Animated.SectionList

如果其它组件也需要动画动能，那么需要使用 createAnimatedComponent() 函数来开启动画功能。

总之，React Native 动画组件 Animated 有点复杂，详细功能可以直接参考文档。

React Native 动画组件 Animated 的创建过程

首先，一般给要创建动画的组件设置一个初始的样式，这个通过 style 属性来解决。

例如下面的代码为某个 box 组件设置了初始化的 背景色、长和框。
```
const styles = StyleSheet.create({box: {backgroundColor: 'blue',width: 50,height: 100}
})
```
其次，在组件即将加载的生命周期函数 componentWillMount() 中初始化动画。
```
componentWillMount = () => {this.animatedWidth = new Animated.Value(50)this.animatedHeight = new Animated.Value(100)
}
```
初始化动画使用 Animated.Value() 或 Animated.ValueXY() 来实现。

例如
```
new Animated.Value(50)
```
这是什么意思呢？比如我们要实现动画：长从 50 变化到 100。那么动画初始化的时候就需要把值 50 传递给 Animated.Value(50)

使用动画类型来定义动画滑动的过程。这个一般包装在某个函数里面

animatedBox = () => {Animated.timing(this.animatedWidth, {toValue: 200,duration: 1000}).start()Animated.timing(this.animatedHeight, {toValue: 500,duration: 500}).start()
}

Animated.timing() 用于定义随时间变化的函数。它的函数原型如下

static timing(value, config)

各个参数说明如下

参数	说明
value	要实现缓动的值。也就是我们第一步中初始化的动画
config	配置动画缓动的各种参数

config 可配置的参数如下

参数	说明
toValue	用于设置动画结束的值
duration	动画时长，单位为毫秒，默认值是 `500`。
easing	时间缓动曲线函数。默认值为渐入渐出 `Easing.inOut` 别名 `Easing.ease`
delay	延迟多少毫秒才开始动画，默认值是 `0`
isInteraction	此动画是否在 InteractionManager 上创建 “交互句柄”。默认为 `true`
useNativeDriver	是否使用原生动画来实现，默认值是 `false`。

.start() 方法用于开始一个动画。

将初始化的动画和属性包装成一个样式。我们后面会用这个样式去覆盖动画组件的默认样式。
```
const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
```
重点来了，接下来我们要使用 `` 组件定一个自定义动画组件。然后把这个自定义动画组件包裹在想要设置动画的组件里。
```
<TouchableOpacity style = {styles.container} onPress = {this.animatedBox}><Animated.View style = {[styles.box, animatedStyle]}/>
</TouchableOpacity>
```
`` 是我们想要实现的动画的组件。onPress = {this.animatedBox} 设置表示当点击的时候才开始动画。

是系统内置的可添加动画的组件。它的实际意思就是说这个动画其实是一个针对 组件属性的动画。它的 style 属性有两个值。
```
style = {[styles.box, animatedStyle]}
```
这两个值是合并的意思，就是 animatedStyle 里设置的样式会覆盖 styles.box 设置的样式。

范例

下面的代码，我们使用 Animated 动画组件动态改变 `` 视图的长和宽。

相关代码逻辑我们前面已经讲述了，我们就不再详细展开，直接上代码.

App.js

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'class App extends Component {componentWillMount = () => {this.animatedWidth = new Animated.Value(50)this.animatedHeight = new Animated.Value(100)}animatedBox = () => {Animated.timing(this.animatedWidth, {toValue: 200,duration: 1000}).start()Animated.timing(this.animatedHeight, {toValue: 500,duration: 500}).start()}render() {const animatedStyle = {width: this.animatedWidth, height: this.animatedHeight }return (<TouchableOpacity style = {styles.container} onPress = {this.animatedBox}><Animated.View style = {[styles.box, animatedStyle]}/></TouchableOpacity>)}
}
export default Appconst styles = StyleSheet.create({container: {justifyContent: 'center',alignItems: 'center'},box: {backgroundColor: 'blue',width: 50,height: 100}
})

运行效果如下

当我们第一次点击的时候就会出现动画，当第二次点击的时候就不会出现了，因为这时候 TouchableOpacity 的长宽已经和动画结束时的值时一样的了。

移动跨平台ReactNative动画组件Animated【14】相关推荐

移动跨平台ReactNative开关组件Switch【15】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
ReactNative动画之Animated初识篇
Animated提供了两种类型的值: 1.Animated.Value()用于单个值 2.Animated.ValueXY()用于矢量值{x:0,y:0} Animated.Value可以绑定到样式或 ...
移动跨平台框架ReactNative图片组件Image【10】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
react native 动画组件（Animated）浅析
简述 react native封装了两个易于使用的动画组件.用于全局的布局动画LayoutAnimation,和用于创建更精细的交互控制的动画Animated.本章主要对Animated组件进行简单的 ...
React Native 动画（Animated）笔记
学习笔记--方便下次查看大多数情况下,在 React Native 中创建动画是推荐使用 Animated API 的,其提供了三个主要的方法用于创建动画: 1.API Animated.timin ...
React Native 动画（Animated）
一.前言对于一个移动应用APP,其中的动画交互能够给用户带来很好的体验,所以动画在移动应用开发过程中是非常重要的; 二.React Native中实现动画的方式 -不断修改state -Animat ...
react native学习笔记29——动画篇 Animated高级动画
1.前言上一节我们学习了全局的布局动画api--LayoutAnimation,体验到其流畅柔和的动画效果,但有时我们需要实现一些更精细化的动画,或者完成一些组合动画,这时我们可以使用React N ...
跨平台工具、组件和框架的汇总
本文主要是对跨平台工具.组件和框架的汇总,包括游戏引擎.编程语言.移动开发.网络通信.图形界面等等 Qt是1991年奇趣科技开发的一个跨平台的C++图形用户界面应用程序框架.它提供给应用程序开发者建立 ...
ReactNative ViewPageAndroid组件详解
源码传送门在我们开发Android的时候,ViewPage这个控件的使用频率还是很高的,最简单的就是制作引导页,应用程序的主界面等,在ReactNative开发中实现该功能的组件是ViewPageA ...

最新文章

热门文章