React Native 中如何使用 requestAnimationFrame？

推荐答案

在 React Native 中，requestAnimationFrame 是一个用于优化动画性能的 API。它会在浏览器下一次重绘之前调用指定的回调函数，通常用于实现平滑的动画效果。

// www.javascriptcn.com code example
import React, { useRef, useEffect } from 'react';
import { Animated, View } from 'react-native';

const AnimationExample = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    let animationFrameId;

    const animate = () => {
      fadeAnim.setValue((fadeAnim._value + 0.01) % 1);
      animationFrameId = requestAnimationFrame(animate);
    };

    animationFrameId = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(animationFrameId);
    };
  }, [fadeAnim]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'blue',
          opacity: fadeAnim,
        }}
      />
    </View>
  );
};

export default AnimationExample;

本题详细解读

1. requestAnimationFrame 的作用

requestAnimationFrame 是一个浏览器提供的 API，用于在下次重绘之前执行指定的回调函数。它通常用于动画场景，能够确保动画的流畅性和性能优化。

2. 在 React Native 中的使用

在 React Native 中，requestAnimationFrame 的使用方式与在 Web 环境中类似。你可以通过 requestAnimationFrame 来递归调用动画函数，从而实现连续的动画效果。

3. 代码解析

• useRef 和 useEffect: 使用 useRef 来存储动画的值，useEffect 用于在组件挂载时启动动画，并在组件卸载时清除动画。
• fadeAnim: 这是一个 Animated.Value，用于控制视图的透明度。
• animate 函数: 这是一个递归函数，通过 requestAnimationFrame 不断调用自身，从而实现连续的动画效果。
• cancelAnimationFrame: 在组件卸载时，使用 cancelAnimationFrame 来停止动画，防止内存泄漏。

4. 注意事项

• 性能优化: 虽然 requestAnimationFrame 本身已经做了性能优化，但在复杂的动画场景中，仍需注意避免不必要的计算和渲染。
• 跨平台兼容性: React Native 的 requestAnimationFrame 在 iOS 和 Android 上表现一致，但在某些低端设备上可能会有性能问题，建议进行充分的测试。