react-native-reanimated

React Native Reanimated库扩展了动画库API，并在使用基于手势的交互时提供了更大的灵活性。使用Reanimated，您可以轻松创建在用户界面线程上运行的流畅动画和交互。有关此库及其API的更多信息，请参阅Software Mansion官方文档中的https://docs.swmansion.com/react-native-reanimated/（仅提供英文版）。

安装

在package.json文件中添加JavaScript库依赖项。

"dependencies": {
      ...
      "@amazon-devices/react-native-reanimated": "~2.0.0"
}

将@amazon-devices/react-native-reanimated插件添加到您的babel.config.js：

 module.exports = {
   plugins: [
     ...
     '@amazon-devices/react-native-reanimated/plugin',
   ],
 };

运行以下命令，清除Metro bundler缓存：
npm start --reset-cache
运行npm install命令重新安装package-lock.json文件。

有关更多信息和上下文，请参阅Software Mansion文档中的Installation（仅提供英文版）。

示例

以下示例说明如何使用withTiming方法在无限循环中运行简单动画。

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
} from '@amazon-devices/react-native-reanimated';

export default function App() {
  const offset = useSharedValue(200);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  React.useEffect(() => {
    offset.value = withRepeat(
      withTiming(-offset.value, { duration: 1500 }),
      -1,
      true
    );
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyles]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
  },
});

以下示例展示如何使用withSpring函数运行基于弹簧的动画：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withRepeat,
} from '@amazon-devices/react-native-reanimated';

const initialOffset = 200;

export default function App() {
  const offset = useSharedValue(initialOffset);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  React.useEffect(() => {
    offset.value = withRepeat(withSpring(-offset.value), -1, true);
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyles]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
  },
});

API参考

Vega的Reanimated库提供Turbo模块，该模块提供了对以下大多数方法的支持。

Animations

方法	描述	支持
`withTiming`	根据持续时间和缓动来创建动画。	✅ 是
`withSpring`	创建基于弹簧的动画。	✅ 是
`withDecay`	创建模拟摩擦运动物体的动画。动画将以提供的速度开始，并根据给定的减速率逐渐减速，直到停止。	✅ 是
`withSequence`	一个动画修饰符，可以按顺序运行动画。	✅ 是
`withRepeat`	一个动画修饰符，可以重复一个动画多次或无限期地运行动画。	✅ 是
`withDelay`	一个动画修饰符，可以将动画的启动延迟。	✅ 是
`SET（共享元素转换）`	将一个屏幕中的组件平滑转换为另一屏幕中的组件。	❌ 否

核心

方法	描述
`useSharedValue`	定义组件中的共享值。
`useAnimatedStyle`	创建样式对象，类似于`StyleSheet`样式，可以对该样式设置动画。
`useAnimatedProps`	创建动画属性对象，可以使用共享值对该对象设置动画。
`useAnimatedRef`	获取视图的引用。与`scrollTo`和`useScrollViewOffset`函数一起使用。
`useDerivedValue`	在现有共享值的基础上创建新的共享值，同时保持共享值的响应性。
`createAnimatedComponent`	创建React Native组件的动画版本。使用`createAnimatedComponent`包装组件可让Reanimated对该组件的任何相关属性或样式设置动画。
`cancelAnimation`	取消与共享值配对的运行动画。

滚动

方法	描述
`scrollTo`	使用对滚动视图的动画引用，在用户界面线程上提供会达到给定偏移量的同步滚动。执行流畅滚动，无延迟。
`useScrollViewOffset`	根据`ScrollView`的偏移量创建动画。hook会自动检测`ScrollView`是水平还是垂直。
`useAnimatedScrollHandler`	一个方便的hook，返回一个事件处理程序引用，该引用可以与React Native的可滚动组件一起使用。

设备

方法	描述	支持
`useAnimatedKeyboard`	根据当前键盘位置创建动画。	✅ 是
`useAnimatedSensor`	根据来自设备传感器的数据创建动画，这些传感器包括：加速度计、陀螺仪、重力传感器、磁场传感器和旋转传感器。	❌ 否
`useReducedMotion`	查询减速运动系统设置。	❌ 否

线程

方法	描述
`runOnJS`	异步运行无法在用户界面线程上运行的非workletized函数。
`runOnUI`	在用户界面线程上异步运行workletized函数。
`createWorkletRuntime`	创建一个新的JS运行时，该运行时可用于在可能与JS或用户界面线程不同的线程上运行工作组。

worklet化

worklet化意味着将JavaScript函数转换为可序列化的对象，该对象可以在用户界面线程上复制和运行。函数标有“worklet”。指令由Reanimated Babel插件自动获取并进行worklet化。

实用工具

方法	描述	支持
`interpolate`	使用线性插值将值从一个范围映射到另一个范围。	✅ 是
`clamp`	将值限制在指定范围内。	✅ 是
`interpolateColor`	使用线性插值将输入范围映射到输出颜色。	✅ 是
`getRelativeCoords`	确定屏幕上相对于给定视图的位置。	✅ 是
`Layout Animations`	为用户界面组件布局属性的更改启用自动动画。	❌ 否

高级API

方法	描述
`measure`	在用户界面线程上同步获取屏幕上视图的尺寸和位置。
`useAnimatedReaction`	响应共享值的变化。
`useFrameCallback`	每次帧更新时运行一个函数。
`useEvent`	一种低级别挂钩，返回一个使用本机事件调用的事件处理程序。用于创建自定义事件处理器挂钩，例如`useAnimatedGestureHandler`或`useAnimatedScrollHandler`。
`useHandler`	一种低级别挂钩，返回上下文对象和值，指示是否应重建worklet。用于创建自定义事件处理器挂钩，例如`useAnimatedGestureHandler`或`useAnimatedScrollHandler`。
`dispatchCommand`	从用户界面线程同步调度原生组件上的命令。
`setNativeProps`	更新组件属性。

已知问题和限制

使用快速刷新后，使用withRepeat的动画停止重复。
使用快速刷新后，动画上的样式不会更新。

支持的版本

程序包名称	亚马逊NPM库版本	OSS NPM库版本	Vega OS内部版本号	Vega SDK版本	发行说明
`@amazon-devices/react-native-reanimated`	2.0.0+3.5.4	3.5.4	`OS 1.1 (201010435950)`	0.19	作为系统分布式库发布。初始版本不需要进行向后兼容性检查。

Credits

该项目的构建和维护工作得到了Shopify、Expo.io和Software Mansion的支持。

Vega 库和服务

安装

示例

API参考

Animations

核心

滚动

设备

线程

worklet化

实用工具

高级API

已知问题和限制

支持的版本

相关主题

Credits

​安装

​示例

​API参考

​Animations

​核心

​滚动

​设备

​线程

​worklet化

​实用工具

​高级API

​已知问题和限制

​支持的版本

​相关主题

​Credits

安装

示例

API参考

Animations

核心

滚动

设备

线程

worklet化

实用工具

高级API

已知问题和限制

支持的版本

相关主题

Credits