From 28f51826d26400fa60208aada85c83c420515c35 Mon Sep 17 00:00:00 2001 From: xiong Date: Thu, 29 Feb 2024 10:12:30 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I94LHC]=20react-native-redash?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-redash.md | 157 +++++++++++++++++++++++++++++------- 1 file changed, 129 insertions(+), 28 deletions(-) diff --git a/1224/react-native-redash.md b/1224/react-native-redash.md index e532a39b..8f6f6541 100644 --- a/1224/react-native-redash.md +++ b/1224/react-native-redash.md @@ -1,4 +1,4 @@ -> 模板版本：v14.2.2 +> 模板版本：v0.1.3

react-native-redash

@@ -9,7 +9,7 @@

-> [!tip] [Github 地址](https://wcandillon.gitbook.io/redash/) +> [!tip] [Github 地址](https://github.com/wcandillon/react-native-redash/) ## 安装与使用 @@ -25,7 +25,7 @@ npm install react-native-redash@^18.1.3 ``` -下面的代码展示了这个库的基本使用场景： +redash库依赖react-native-reanimated动画库，为适配鸿蒙环境，需要把库里的依赖改成@react-native-oh-tpl/react-native-reanimated。下面的代码展示了这个库的基本使用场景： ```js // findLastIndex 为例 @@ -64,14 +64,116 @@ const canvas2Polar: ({ x, y }: Vector, center: Vector) => { radius: number; }; ``` +动画演示示例 + +1.位置移动演示动画，通过snapPoint运行指定的位置地点 +```js +import { snapPoint } from "react-native-redash/src/Physics" +import { useSharedValue,withSequence,withTiming,withRepeat} from '@react-native-oh-tpl/react-native-reanimated'; + +const offset = useSharedValue(0); + +const translateAnimatedStyles = useAnimatedStyle(() => { + return { + transform: [ + { + translateX: offset.value * 2 + }, + ], + }; +}) + +const translate= () => { + offset.value = withSequence( + withTiming(-snapPoint(96, 600, [0, 125, 393]), { duration: 1000 }), + withRepeat(withTiming(snapPoint(96, 600, [0, 125, 393]), { duration: 1000 }), 60, true), + withTiming(0, { duration: 50 }) + ); +} +``` +2.颜色渐变动画演示，通过mixColor进行颜色渐变 + +```js +import { mixColor } from "react-native-redash/src/Colors"; +import { useSharedValue} from '@react-native-oh-tpl/react-native-reanimated'; + +const progress = useSharedValue(0); + +const colorAnimatedStyle = useAnimatedStyle(() => { + return { + backgroundColor: mixColor(progress.value, "#b58df1", "#38ffb3"), + }; +}); + +const handleColorPress = () => { + progress.value = withRepeat(withTiming(1 - progress.value, { duration: 1000 }),60,true); +} +``` +3.redash目前有两个动画辅助方法：useTiming、useSpring。useTiming可以使用贝塞尔曲线来进行运动,useSpring可以不将持续时间作为参数，而是由sprin物理特性作为运动轨迹。 +```js +import { useTiming,useSpring } from "react-native-redash/src/Transitions" +import Animated from '@react-native-oh-tpl/react-native-reanimated'; + + +const timing = useSpring(255,{duration:1000}); +const spring = useTiming(255,{duration:1000}); + +const customSpringStyles = useAnimatedStyle(() => { + return { + transform: [ + { + translateX: spring.value, + }, + ], + }; +}); + +const customTimingStyles = useAnimatedStyle(() => { + return { + transform: [ + { + translateX: timing.value, + }, + ], + }; +}); + +return ( + + + + +); +``` +4.redash提供能接受字符串动画节点属性的文本组件 +```js +import { ReText } from "react-native-redash" +import { useSharedValue} from '@react-native-oh-tpl/react-native-reanimated'; + +const price = useSharedValue(42); +const formattedPrice = useDerivedValue(() => (`${price.value}`.toLocaleString())); + +return ( + + + +); +``` + ### 兼容性 在下述版本验证通过: - 1. IDE:Deveco Studio 4.1.3.412; - SDK: OpenHarmony (Api11) 4.1.0.53; - 测试设备: Mate40 Pro (NOH-AN00); - ROM: 2.0.0.52 (SP22C00E52R1P17log); - RNOH: 0.72.11。 + 1. RNOH：0.72.11; + SDK：OpenHarmony(api11) 4.1.0.53; + IDE：DevEco Studio 4.1.3.412; + ROM：2.0.0.52; + 2. RNOH：0.72.13; + SDK：HarmonyOS NEXT Developer Preview1; + IDE：DevEco Studio 4.1.3.500; + ROM：2.0.0.59; ## 静态方法 @@ -83,17 +185,17 @@ const canvas2Polar: ({ x, y }: Vector, center: Vector) => { | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -| defineAnimation() | This utility function enables you to declare custom animations that can be invoked on both the JS and UI thread. | function | NO | NO | -| animationParameter(animation) | Access animations passed as parameters safely on both the UI and JS thread with the proper static types. Animations can receive other animations as parameter | function | NO | NO | -| withPause() | Make an animation pausable. The state of the animation (paused or not) is controlled by a boolean shared value. | function | NO | NO | -| withBouncing() | Add a bouncing behavior to a physics-based animation. An animation is defined as being physics-based if it contains a velocity in its state. | function | NO | NO | +| defineAnimation() | This utility function enables you to declare custom animations that can be invoked on both the JS and UI thread. | function | NO | yes | +| animationParameter(animation) | Access animations passed as parameters safely on both the UI and JS thread with the proper static types. Animations can receive other animations as parameter | function | NO | yes | +| withPause() | Make an animation pausable. The state of the animation (paused or not) is controlled by a boolean shared value. | function | NO | yes | +| withBouncing() | Add a bouncing behavior to a physics-based animation. An animation is defined as being physics-based if it contains a velocity in its state. | function | NO | yes | #### **Coordinates** | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | | canvas2Cartesian() | Convert plane coordinate system to Cadir coordinate system | function | NO | yes | -| cartesian2Canvas() | Convert Kadir coordinate system to plane coordinate system | NO | yes | +| cartesian2Canvas() | Convert Kadir coordinate system to plane coordinate system | function | NO | yes | | cartesian2Polar() | Conversion from Kadir coordinate system to polar coordinate system | function | NO | yes | | polar2Cartesian() | Convert polar coordinate system to Cadir coordinate system | function | NO | yes | | polar2Canvas() | Convert polar coordinate system to Cadir coordinate system | function | NO | yes | @@ -103,7 +205,7 @@ const canvas2Polar: ({ x, y }: Vector, center: Vector) => { | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -| | This component is like but accepts a string animation node as property. Behind the scene, is using with some default styling. Therefore there might be some slight inconsistencies with . | function | NO | NO | +| | This component is like but accepts a string animation node as property. Behind the scene, is using with some default styling. Therefore there might be some slight inconsistencies with . | function | NO | yes | #### **Math** @@ -118,47 +220,46 @@ const canvas2Polar: ({ x, y }: Vector, center: Vector) => { | between() | Returns true if node is within lowerBound and upperBound. | function | NO | yes | | round() | Computes animation node rounded to precision. | function | NO | yes | | cubicBezier() | Returns the coordinate of a cubic bezier curve. t is the length of the curve from 0 to 1. cubicBezier(0, p0, p1, p2, p3) equals p0 and cubicBezier(1, p0, p1, p2, p3) equals p3. p0 and p3 are respectively the starting and ending point of the curve. p1 and p2 are the control points. | function | NO | yes | -| cubicBezierYForX() | Given a cubic Bèzier curve, return the y value for x | function | NO | NO | +| cubicBezierYForX() | Given a cubic Bèzier curve, return the y value for x | function | NO | yes | #### **Transitions** | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -| useTiming() | Transitions can attach an animation value to a change of React state. | function | NO | NO | -| useSpring() | Transitions can attach an animation value to a change of React state. | function | NO | NO | +| useTiming() | Transitions can attach an animation value to a change of React state. | function | NO | yes | +| useSpring() | Transitions can attach an animation value to a change of React state. | function | NO | yes | #### **Vectors** | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -| useVector() | Returns a vector of shared values. | function | NO | NO | +| useVector() | Returns a vector of shared values. | function | NO | yes | #### **Paths** | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -| createPath(path, {x, y}) | Create a new path | function | NO | NO | -| addCurve(path, {c1: {x, y}, c2: {x, y}, to: {x, y}}) | Add a Bèzier curve command to a path | function | NO | NO | -| close(path) | Add a close command to a path. | function | NO | NO | -| parse(path) | Parse an SVG path into a sequence of Bèzier curves. The SVG is normalized to have absolute values and to be approximated to a sequence of Bèzier curves. | function | NO | NO | -| serialize(path) | Serialize a path into an SVG path string. | function | NO | NO | -| interpolatePath() | Interpolate between paths.| function | NO | NO | +| createPath(path, {x, y}) | Create a new path | function | NO | yes | +| addCurve(path, {c1: {x, y}, c2: {x, y}, to: {x, y}}) | Add a Bèzier curve command to a path | function | NO | yes | +| close(path) | Add a close command to a path. | function | NO | yes | +| parse(path) | Parse an SVG path into a sequence of Bèzier curves. The SVG is normalized to have absolute values and to be approximated to a sequence of Bèzier curves. | function | NO | yes | +| serialize(path) | Serialize a path into an SVG path string. | function | NO | yes | +| interpolatePath() | Interpolate between paths.| function | NO | yes | #### **Physics** | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -| snapPoint() | Select a point where the animation should snap to given the value of the gesture and it's velocity. | function | NO | NO | +| snapPoint() | Select a point where the animation should snap to given the value of the gesture and it's velocity. | function | NO | yes | #### **Colors** | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -| mixColor() | Identical to interpolateColor() but with an animation value that goes from 0 to 1. | function | NO | NO | +| mixColor() | Identical to interpolateColor() but with an animation value that goes from 0 to 1. | function | NO | yes | ## 遗留问题 -Animations、Strings、Transitions、Vectors、Paths、Physics、Colors等 -部分接口依赖react-native-reanimated实现，目前react-native-reanimated暂不支持，所以无法实现。 + ## 其他 ## 开源协议 -- Gitee