react-native-reanimated 教程

草生鸣间

已于 2024-12-23 13:33:37 修改

阅读量1k

点赞数 5

文章标签： react native react.js javascript

于 2024-12-11 17:09:48 首次发布

本文链接：https://blog.youkuaiyun.com/George_Fz/article/details/144396244

版权

6. createAnimatedComponent

7.cancelAnimation

SCOLL

1.scrollTo

2.useScrollViewOffset

动画

1.withTiming

用途：可以创建基于持续时间和缓动的动画

参数：

第一个参数：

目标值（type number | string | array | object）

第二个参数：

设置选项（type object）

Name	Type	Default	Description
duration	number	300	动画长度（毫秒）
easing	Easing	Easing.inOut(Easing.quad)	定义动画曲线的缓动函数
reduceMotion	ReduceMotion	ReduceMotion.System	确定动画如何响应设备减少的运动辅助设置的参数

示例：

import { withTiming, Easing } from 'react-native-reanimated'
withTiming(-100, {
    2000,
    easing: Easing.linear,
})

2.withSpring

用途：可以创建基于弹簧的动画

参数：

第一个参数：

目标值（type number | string | array | object）

第二个参数：

设置选项（type object）-- physics-based 与 duration-based 不可混用

Name	Type	Default	Description
mass （physics-based）	number	1	弹簧的重量。减小该值会使动画更快
damping （physics-based）	number	10	弹簧减速的速度。更高的阻尼意味着弹簧会更快地静止
duration （duration-based）	number	2000	动画的长度(毫秒)。有3.2.x以上版本
dampingRatio （duration-based）	number	0.5	弹簧的阻尼。值 1 是弹簧的阻尼临界点，值 > 1 时弹簧不会晃动。可在 Reviated≥3.2. x 中使用
stiffness	number	100	弹簧弹性，越小越没弹性
velocity	number	0	应用于弹簧方程的初始速度
overshootClamping	boolean	false	弹簧能否越过目标值
clamp	[number, number]	undefined	运动范围的限制。如果你的弹簧超过了这个极限，那么阻尼就会减少(使弹簧的弹性降低)

示例：

    withSpring(sv.value, {
      mass: 1,
      damping: 10,
      stiffness: 100,
      overshootClamping: false,
      restDisplacementThreshold: 0.01,
      restSpeedThreshold: 2,
      reduceMotion: ReduceMotion.System,
    })

3.withSequence

用途：一个动画修饰符，可让您按顺序运行动画

参数：要按顺序运行的任意数量的动画对象

示例：

withSequence(withTiming(50), withTiming(0)

4.withRepeat

用途：一个动画修饰符，可让您重复给定次数的动画或无限期运行它

参数：

第一个参数：动画对象
第二个参数：动画将被重复的次数。默认为 2；当值为非正值（例如 0 或 - 1）将导致动画无限期重复，直到它被取消或拆除。例如，如果组件卸载或取消动画被调用
第三个参数：动画是否应该每隔一次重复反向运行。默认为 false
第四个参数：动画完成时调用的函数。如果动画被取消，回调将收到 false 作为参数，否则将收到 true

示例：

withRepeat(
   withTiming(200, { duration: 1000 }),
   -1,
   false,
   () => {},
   ReduceMotion.System,
)

5.withDelay

用途：一个动画修饰符，可让您延迟启动动画

参数：

第一个参数：动画开始前的持续时间（以毫秒为单位）
第二个参数：动画对象

示例：

withDelay(500, withTiming(0))

HOOK

1.useSharedValue

用途：许您在组件中定义共享值

参数：目标值（number, string，boolean，array，object）

示例：

const width = useSharedValue(100);
console.log(width.value) // 100

2.useAnimatedStyle

用途：允许您创建一个样式对象，类似于样式表样式，可以使用共享值来设置动画。

参数：函数-（返回具有要设置动画的样式属性的对象的函数。您可以为 React Native 中可用的任何样式属性设置动画）

示例：

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

3.useAnimatedProps

用途：允许您创建一个动画道具对象，该对象可以使用共享值进行动画处理。此对象用于为第三方组件的属性设置动画。

参数：

第一个参数：一个函数。返回一个带有你想要动画的属性的对象。
第二个参数：一个可选的依赖数组。
第三个参数：可选函数或函数数组

示例：

import { Svg, Circle } from 'react-native-svg';
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const animatedProps = useAnimatedProps(() => ({
    r: withTiming(r.value),
}));

<AnimatedCircle
   cx="50%"
   cy="50%"
   fill="#b58df1"
   animatedProps={animatedProps}
/>

4. useAnimatedRef

用途：允许您获取视图的引用。与 measure、scrollTo 和 useScrollViewOffset 函数一起使用

参数：不需要

示例：

const animatedRef = useAnimatedRef<Animated.View>();
<Animated.View
  ref={animatedRef}
  style={styles.box}
  onLayout={() => {
     // Returns a reference to the component
     const component = animatedRef.current;
  }}
/>

5.useDerivedValue

用途：允许您基于现有的 shared values 创建新的 shared values，同时保持它们的活性

参数：应该返回由 shared value、React 状态或任何其他 JavaScript 值构造的值的函数。每当函数体中使用的共享值或状态中的至少一个发生变化时，都会调用此函数

示例：

const scale = useSharedValue(1);
const rotate = useDerivedValue(() => {
    return `${scale.value * 2}rad`;
});

6. createAnimatedComponent

用途：createAnimatedComponent 允许您创建任何 React Native 组件的动画版本。用 createAnimatedComponent 包装组件允许 ReAnimated 为与该组件关联的任何道具或样式设置动画

参数：组件。（函数组件必须用 React.forwardRef()包裹）

示例：

const MyView = React.forwardRef((props, ref) => {
  return <View ref={ref} {...props} />;
});
const MyAnimatedView = Animated.createAnimatedComponent(MyView);
...
<MyAnimatedView
   style={Object.assign(Object.assign({}, styles.box), { width })}
/>

7.cancelAnimation

用途：允许您取消与 shared values 配对的正在运行的动画。

参数：shared values

示例：

  const offset = useSharedValue(width / 2 - 160);

  const handleCancelAnimation = () => {
    cancelAnimation(offset);
  };

SCOLL

1.scrollTo

用途：允许您同步滚动到给定的 X 或 Y 偏移量

参数：

第一个参数：animatedRef。Animated component 或者 React Native built-in component 绑定的ref
第二个参数：在水平 X 轴上滚动到的像素值。
第三个参数：在垂直 Y 轴上滚动到的像素值
第四个参数：滚动是否是 smooth （默认 true）还是 instant （默认 false）

示例：

const animatedRef = useAnimatedRef();
const scrollY = useSharedValue(0);
useDerivedValue(() => {
    scrollTo(animatedRef, 0, scrollY.value, true);
});

2.useScrollViewOffset

用途：允许您根据 ScrollView 的偏移量创建动画。钩子会自动检测 ScrollView 是水平的还是垂直的

参数：

第一个参数：animatedRef。Animated component 或者 React Native built-in component 绑定的ref
第二个参数：要使用滚动偏移量更新的可选共享值。如果未提供，将在内部创建新的共享值

示例：

import { useScrollViewOffset } from 'react-native-reanimated';

function App() {
  const animatedRef = useAnimatedRef();
  const scrollOffset = useScrollViewOffset(animatedRef);
  return (
    <Animated.ScrollView ref={animatedRef}>{/* ... */}</Animated.ScrollView>
  );
}

设备动画

1.useAnimatedSensor

用途：允许您根据来自设备传感器的数据创建动画

参数： sensorType （传感器类型）

SensorType.ACCELEROMETER - 测量设备沿x、y和z轴（不包括重力）的加速度，单位为m/s2。
SensorType.GYROSCOPE - 测量沿x、y和z轴的旋转速率，单位为弧度每秒。
SensorType.GRAVITY - 测量沿x、y和z轴的重力加速度，单位为m/s2。
SensorType.MAGNETIC_FIELD - 以微特斯拉（μT）为单位测量地球磁场的强度和方向。
SensorType.ROTATION - 测量设备的三维方向。该传感器通过欧拉角（横滚、俯仰和偏航）和四元数表示旋转。

返回值：

Name	Type	Description
sensor	SharedValue<Value3D｜ValueRotation>	包含传感器测量值的共享值。传感器返回的值取决于您使用SensorType参数选择的传感器类型
unregister	() => void	允许在通话时停止监听传感器更新
isAvailable	boolean	指示传感器是否可用。当传感器从设备中丢失或应用程序没有访问它的权限时，您将无法使用它
config	SensorConfig	包含传感器配置的对象

示例：

import Animated, { useAnimatedSensor, SensorType } from "react-native-reanimated";
export default function App() {
    const gravity = useAnimatedSensor(SensorType.ACCELEROMETER);

    const animatedStyle = useAnimatedStyle(() => {
        return {
            transform: [
                { translateX: withSpring(gravity.sensor.value.x * 20) },
                { translateY: withSpring(gravity.sensor.value.y * 20) },
            ],
        };
    });

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

Utilities

1. interpolate

用途：允许您使用线性插值将值从一个范围映射到另一个范围

参数：

第一个参数：value-将被映射到输出范围的数字
第二个参数：input-指定插值输入范围的数字数组
第三个参数：output-指定插值输出范围的数字数组。它应该至少与输入范围具有相同的点数
第四个参数：Extrapolation.EXTEND / Extrapolation.CLAMP / Extrapolation.IDENTITY

import { interpolate } from'react-native-reanimated';

const inputValue = 50; 
const outputValue = interpolate(inputValue, [0, 100], [0, 255]); 
// 当输入值为 50 时，outputValue 约为 127.5

2.clamp

用途：指定插值输出范围的数字数组。它应该至少与输入范围具有相同的点数

参数：

第一个参数：value-输入值
第二个参数：min-比 value 小的数
第三个参数：max-比 value 大的数

示例：

const outputValue = clamp(-8, 0, 100);
console.log(outputValue); // 0

3.getRelativeCoords

用途：确定屏幕上相对于给定视图的位置

参数：

第一个参数：animatedRef
第二个参数：absoluteX-作为绝对x坐标的数字
第三个参数：absoluteY-作为绝对y坐标的数字

示例：

    const animatedRef = useAnimatedRef();
    const [coords, setCoords] = useState({ x: 0, y: 0 });

    const tapGesture = Gesture.Tap().onEnd((event) => {
        const relativeCoords = getRelativeCoords(
            animatedRef,
            event.absoluteX,
            event.absoluteY
        );
        if (relativeCoords) {
            setCoords(relativeCoords);
        }
    });