在 React Native 中使用 Animated 实现动画效果

React Native 是一种基于 JavaScript 的移动应用开发框架，它使得我们可以使用类似于 Web 开发的技术来构建原生 iOS 和 Android 应用程序。而 Animated API 则是 React Native 中实现动画效果的主要方式之一。

本文将会介绍 Animated API 是如何在 React Native 中实现动画效果的。我们将会从基础概念，如动画驱动和属性定义，以及接下来的一个简单的实例来入手。

Animated API 的基本介绍

Animated 是 React Native 中用于实现动画的一个 API。与之相似的还有 LayoutAnimation 和 React Native Motion，不过 Animated 可以对更多的属性进行动画处理。

Animated 使用了 JavaScript 的 requestAnimationFrame 机制，因此它会在 UI 线程之外执行。这意味着动画不会影响到其他的 UI 操作，从而提高了应用程序的性能和流畅度。

动画的驱动可通过使用 Animated.Value 来实现。具体来说，Animated.Value 是一个原始数据类型，可以是数字或者是一个复杂的对象。这个值会根据时间或者交互等一些驱动力变化。

Animated.Value 中的值是可以被映射到其它组件属性上的，因此，我们可以通过在 Animated.Value 上设置一个 Listener，监听它的值的变化，并在回调函数中更新组件的属性，从而实现对组件的动画效果控制。

如何定义 Animated 属性

在 React Native 中我们使用 Animated 来定义动画属性，下面是一些常见的 Animated 属性：

• Animated.Value： 一个用于驱动动画的对象。它定义了一个值可变、可监听的属性，可赋予动画的其他属性。例如，如果要改变图形的位置，您可以创建一个值对象来控制位置，并将其映射到绘图指令上。
• Animated.View： 一个可动画化的 UIView 类型。像普通的 UIView 一样，Animated.View 具有原始的样式和尺寸属性，如宽度、高度、背景色等。
• Animated.Text： 与 Animated.View 类似，Animated.Text 是可动画的文本类型。除了 Text 在样式上有些限制，它可以使用大多数普通的文本属性，如字体大小、颜色、行高等。
• Animated.Image： 一个可动画化的图片类型。Animated.Image 封装了 UIImageView，通过与 Animated.Value 结合，可实现任何属性的逐帧动画。

实例来模拟一个按钮点击效果

假设我们有一个按钮，它的样式如下所示：

// www.javascriptcn.com code example
import React from 'react';
import {TouchableOpacity, Text, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007bff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
  },
});

const Button = ({text, onPress}) => {
  return (
    <TouchableOpacity onPress={onPress} style={styles.button}>
      <Text style={styles.buttonText}>{text}</Text>
    </TouchableOpacity>
  );
};

export default Button;

现在我们要为这个按钮加入一个简单的点击动画效果。先在组件中增加一个 Animated.Value 类型的动画数值对象，比如命名为 buttonScale。

// www.javascriptcn.com code example
import React from 'react';
import {TouchableOpacity, Text, StyleSheet, Animated} from 'react-native';

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007bff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
  },
});

const Button = ({text, onPress}) => {
  const buttonScale = new Animated.Value(1);
  return (
    <TouchableOpacity
      onPress={() => {
        Animated.spring(buttonScale, {
          toValue: 0.8,
          friction: 3,
          tension: 50,
          useNativeDriver: true,
        }).start(() => {
          Animated.spring(buttonScale, {
            toValue: 1,
            friction: 3,
            tension: 50,
            useNativeDriver: true,
          }).start();
        });
        onPress();
      }}
      style={[styles.button, {transform: [{scale: buttonScale}]}]}>
      <Text style={styles.buttonText}>{text}</Text>
    </TouchableOpacity>
  );
};

export default Button;

代码解析：

• TouchableOpacity 中为了能让我们触发动画效果，我们修改了 onPress 的响应函数，增加了一个复杂的动画事件。
• Animated.spring() 中我们设置了动画对象为 buttonScale。这个对象会在每个动画帧期间被更新。使用 useNativeDriver 参数启用原生驱动，可提高性能。
• toValue 参数，指定我们要修改的属性的最终值。我们在这里把它的值设为 0.8，也就是把按钮压缩为 80% 的大小。
• friction 和 tension 参数用于调整动画效果的应变和硬度。
• Animated.spring() 函数还会返回一个 Animator，我们可以在 start 函数的回调中继续对它进行操作，比如我们在第一个动画完成后，调用一次 start()，把 buttonScale 的值恢复到默认大小。

这样，按钮就具有了点击动画效果。

本文提供的示例代码展示了 Animated API 在 React Native 中的具体使用方法。如果您希望掌握更多动画开发的技巧，可以访问 React Native 官方文档，并查看标准动画 API 和高级动画 API 的相关内容。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6635ca941bf7134c20803