移动跨平台ReactNative动画组件Animated【14】
React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。
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 的创建过程
config 可配置的参数如下
参数 | 说明 |
|---|---|
toValue | 用于设置动画结束的值 |
duration | 动画时长，单位为 毫秒，默认值是 500。 |
easing | 时间缓动曲线函数。默认值为渐入渐出 Easing.inOut 别名 Easing.ease |
delay | 延迟多少毫秒才开始动画，默认值是 0 |
isInteraction | 此动画是否在 InteractionManager 上创建 “交互句柄”。默认为 true |
useNativeDriver | 是否使用原生动画来实现，默认值是 false。 |
范例
下面的代码，我们使用 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 的长宽已经和动画结束时的值时一样的了。