移动跨平台ReactNative动画组件Animated【14】_前端江太公_animated.scrollview

网络投稿 02-07 3111

前端江太公

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.easedelay延迟多少毫秒才开始动画，默认值是 0isInteraction此动画是否在 InteractionManager 上创建 “交互句柄”。默认为 trueuseNativeDriver是否使用原生动画来实现，默认值是 false。

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

将初始化的动画和属性包装成一个样式。我们后面会用这个样式去覆盖动画组件的默认样式。

const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }

重点来了，接下来我们要使用 `` 组件定一个自定义动画组件。然后把这个自定义动画组件包裹在想要设置动画的组件里。

`` 是我们想要实现的动画的组件。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 App const styles = StyleSheet.create({ container: { justifyContent: 'center', alignItems: 'center' }, box: { backgroundColor: 'blue', width: 50, height: 100 } })

运行效果如下

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