From 7d2955cb5f233742a7cff59931661fb44a6c746d Mon Sep 17 00:00:00 2001 From: Sunny Luo Date: Sat, 5 Aug 2023 11:29:51 +0800 Subject: [PATCH] Update animatedvaluexy.md --- cndocs/animatedvaluexy.md | 132 ++++++++++++++++++++------------------ 1 file changed, 68 insertions(+), 64 deletions(-) diff --git a/cndocs/animatedvaluexy.md b/cndocs/animatedvaluexy.md index 32e02623795..b23b60cf721 100644 --- a/cndocs/animatedvaluexy.md +++ b/cndocs/animatedvaluexy.md @@ -3,13 +3,14 @@ id: animatedvaluexy title: Animated.ValueXY --- -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue.md), but multiplexed. Contains two regular `Animated.Value`s under the hood. +2D值用于驱动2D动画，例如平移手势。与普通的[`Animated.Value`](animatedvalue)几乎相同的API，但是可以多路复用。在内部包含两个常规的`Animated.Value`。 + ## 示例 ```SnackPlayer name=Animated.ValueXY -import React, { useRef } from "react"; -import { Animated, PanResponder, StyleSheet, View } from "react-native"; +import React, {useRef} from 'react'; +import {Animated, PanResponder, StyleSheet, View} from 'react-native'; const DraggableView = () => { const pan = useRef(new Animated.ValueXY()).current; @@ -26,7 +27,7 @@ const DraggableView = () => { onPanResponderRelease: () => { Animated.spring( pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero + {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero ).start(); }, }); @@ -44,11 +45,11 @@ const DraggableView = () => { const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', }, box: { - backgroundColor: "#61dafb", + backgroundColor: '#61dafb', width: 80, height: 80, borderRadius: 4, @@ -66,141 +67,141 @@ export default DraggableView; ### `setValue()` -```jsx -setValue(value); +```tsx +setValue(value: {x: number; y: number}); ``` -Directly set the value. This will stop any animations running on the value and update all the bound properties. +直接设置值。这将停止任何正在运行的动画，并更新所有绑定的属性。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| ----- | ------ | ---- | ---- | -| value | number | 是 | | +| 名称 | 类型 | 必需 | 描述 | +| ----- | ---------------------- | ------ | ----------- | +| value | {x: number; y: number} | 是 | 值 | --- ### `setOffset()` -```jsx -setOffset(offset); +```tsx +setOffset(offset: {x: number; y: number}); ``` -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. +设置一个偏移量，该偏移量会在已经设置的任何值（无论是通过`setValue`、动画还是`Animated.event`）之上应用。对于补偿诸如平移手势的起始位置等情况非常有用。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| ------ | ------ | ---- | ---- | -| offset | number | 是 | | +| 名称 | 类型 | 必填 | 描述 | +| ------ | ---------------------- | -------- | ------------ | +| offset | {x: number; y: number} | 是 | 偏移值 | --- ### `flattenOffset()` -```jsx +```tsx flattenOffset(); ``` -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. +将偏移值合并到基础值中，并将偏移重置为零。最终输出的数值保持不变。 --- ### `extractOffset()` -```jsx +```tsx extractOffset(); ``` -Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged. +将偏移值设置为基准值，并将基准值重置为零。最终输出的数值保持不变。 --- ### `addListener()` -```jsx -addListener(callback); +```tsx +addListener(callback: (value: {x: number; y: number}) => void); ``` -Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. +向值添加一个异步监听器，以便您可以观察动画的更新。这很有用，因为没有办法同步读取该值，因为它可能是由原生驱动的。 -Returns a string that serves as an identifier for the listener. +返回一个字符串作为监听器的标识符。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | ------------------------------------------------------------------------------------------- | -| callback | function | 是 | The callback function which will receive an object with a `value` key set to the new value. | +| 名称 | 类型 | 必需 | 描述 | +| --------- | ---------- | -------- | ------------------------------------------------------------------------------------------ | +| callback | 函数 | 是 | 回调函数将 --- ### `removeListener()` -```jsx -removeListener(id); +```tsx +removeListener(id: string); ``` -Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`. +取消注册监听器。`id` 参数应与先前由 `addListener()` 返回的标识符匹配。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| ---- | ------ | ---- | ---------------------------------- | -| id | string | 是 | Id for the listener being removed. | +| 名称 | 类型 | 必需 | 描述 | +| ---- | ------ | ---- | ----------------------- | +| id | string | 是 | 要移除的监听器的标识符。 | --- ### `removeAllListeners()` -```jsx +```tsx removeAllListeners(); ``` -Remove all registered listeners. +移除所有已注册的监听器。 --- ### `stopAnimation()` -```jsx -stopAnimation([callback]); +```tsx +stopAnimation(callback?: (value: {x: number; y: number}) => void); ``` -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. +停止任何正在运行的动画或跟踪。在停止动画后，将使用`callback`调用最终值，这对于更新状态以匹配布局中的动画位置非常有用。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | --------------------------------------------- | -| callback | function | 否 | A function that will receive the final value. | +| 名称 | 类型 | 是否必需 | 描述 | +| --------- | ---------- | --------- | ------------------------------------------ | +| callback | 函数 | 否 | 将接收到最终值的函数。 | --- ### `resetAnimation()` -```jsx -resetAnimation([callback]); +```tsx +resetAnimation(callback?: (value: {x: number; y: number}) => void); ``` -Stops any animation and resets the value to its original. +停止任何动画并将值重置为其原始状态。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | ------------------------------------------------ | -| callback | function | 否 | A function that will receive the original value. | +| 名称 | 类型 | 是否必需 | 描述 | +| -------- | -------- | -------- | ---------------------------------------- | +| callback | function | 否 | 一个接收原始值的函数。 | --- ### `getLayout()` -```jsx -getLayout(); +```tsx +getLayout(): {left: Animated.Value, top: Animated.Value}; ``` -Converts `{x, y}` into `{left, top}` for use in style, e.g. +将`{x, y}`转换为`{left, top}`以在样式中使用，例如： -```jsx +```tsx style={this.state.anim.getLayout()} ``` @@ -208,13 +209,16 @@ style={this.state.anim.getLayout()} ### `getTranslateTransform()` -```jsx -getTranslateTransform(); +```tsx +getTranslateTransform(): [ + {translateX: Animated.Value}, + {translateY: Animated.Value}, +]; ``` -Converts `{x, y}` into a useable translation transform, e.g. +将`{x, y}`转换为可用的平移变换，例如： -```jsx +```tsx style={{ transform: this.state.anim.getTranslateTransform() }}