diff --git a/README.md b/README.md index 2c1c0a0c..e0356e41 100644 --- a/README.md +++ b/README.md @@ -53,21 +53,21 @@ const path = parsePath(d); const { y, x } = getPointAtLength(path, length); ``` -### `interpolatePath(value: Node, { inputRange, outputRange }): path` +### `interpolatePath(value: Node, { inputRange, outputRange }): path` Interpolate from one SVG point to the other, this function assumes that each path has the same number of points. ```tsx - const phone1 = "M 18 149C 18 149 25 149 25 149 25 14..."; - const d = interpolatePath(slider, { - inputRange: [0, width, width * 2], - outputRange: [phone1, phone2, phone3] - }); - return ( - - - - ); +const phone1 = "M 18 149C 18 149 25 149 25 149 25 14..."; +const d = interpolatePath(slider, { + inputRange: [0, width, width * 2], + outputRange: [phone1, phone2, phone3] +}); +return ( + + + +); ``` ### `bInterpolatePath(progress, path1, path2): path` @@ -78,27 +78,27 @@ Interpolate from one SVG point to the other, this function assumes that each pat const rhino = "M 217.765 29.683 C 225.855 29.683 "; const elephant = "M 223.174 43.413 ..."; return ( - <> - - {() => - set( - progress, - timing(clock, progress, { - to: 1, - duration: 2000, - easing: Easing.linear - }) - ) - } - - - - - - ); + <> + + {() => + set( + progress, + timing(clock, progress, { + to: 1, + duration: 2000, + easing: Easing.linear + }) + ) + } + + + + + +); ``` ### `getLengthAtX(path: ReanimatedPath, x: Node): Node` @@ -210,7 +210,7 @@ Tagged template for animated string values. ```tsx const { x, y } = { x: new Value(0), y: new Value(0) }; const d = string`M0,0 ${x},${y}`; -return ; +return ; ``` ## Array @@ -283,7 +283,7 @@ Evaluate an animation node after a certain amount of time. `duration` is in mill Example usage: ```js -delay(set(value, 1), 250) +delay(set(value, 1), 250); ``` ### `decay({ clock: Clock, value: Node, velocity: Node, deceleration: number} ): Node` @@ -298,8 +298,37 @@ decay({ clock: Clock, value: Node, velocity: Node, deceleration: number} ): Node Convenience function to run a spring animation. -```js -decay({ clock: Clock, value: Node, velocity: Node, config: SpringConfig }): Node +```tsx +spring({ clock?: Clock, from?: Node, velocity?: number, config?: SpringConfig, to?: Node }): Node +``` + +### `toggle({ toggleState: Value, clock?: Clock, from?: Node, to?: Node, duration?: Node, easing?: EasingFunction }): Node` + +Convenience function to imperatively toggle animation. + +Example usage: + +```tsx +const toggleState = new Value(State.END); + +const handleToggleButtonPress = (shouldOpen: boolean) => { + shouldOpen ? toggleState.setValue(1) : toggleState.setValue(0); +}; + +useCode( + block([ + toggle({ + clock: Clock, + value: Node, + toggleState: Value(State.END), + easing: EasingFunction, + duration: number, + from: Node, + to: Node + }) + ]), + [] +); ``` ### `bInterpolate(node: Node, from: Node, to: Node): Node` @@ -320,12 +349,12 @@ Example Usage: const from = { r: 197, g: 43, - b: 39, + b: 39 }; const to = { r: 225, g: 176, - b: 68, + b: 68 }; // Interpolate in default color space (HSV) @@ -416,10 +445,8 @@ Example usage for a vertical `PanGestureHandler`. ```js const translationX = new Value(0); const state = new Value(State.UNDETERMINED); -const gestureEvent = onGestureEvent({ translationX, state }) -return ( - -); +const gestureEvent = onGestureEvent({ translationX, state }); +return ; ``` ### `panGestureHandler()` @@ -469,10 +496,8 @@ return ( ### `panGestureHandler()` ```tsx -const {gestureEvent, translationX, translationY} = panGestureHandler(); -return ( - -); +const { gestureEvent, translationX, translationY } = panGestureHandler(); +return ; ``` ### `withSpring({ value: Node, velocity: Node, state: Value, offset: Node, config, snapPoints: Node[], onSnap: (value) => void }): Node` @@ -550,7 +575,6 @@ constructor(props) { Decorates animated value to spring after pan - ```js constructor(props) { const dragX = new Value(0); diff --git a/src/AnimationRunners.ts b/src/AnimationRunners.ts index 01984e45..a9221d76 100644 --- a/src/AnimationRunners.ts +++ b/src/AnimationRunners.ts @@ -5,6 +5,7 @@ const { Value, block, cond, + eq, stopClock, set, startClock, @@ -248,3 +249,53 @@ export const loop = (loopConfig: LoopProps) => { state.position ]); }; + +export const toggle = (params: { + clock?: Animated.Clock; + toggleState: Animated.Value; + duration?: number; + from: Animated.Adaptable; + to: Animated.Adaptable; + easing?: Animated.EasingFunction; + value: Animated.Value; +}) => { + const { toggleState, easing, duration, value, to, from, clock } = { + clock: new Clock(), + duration: 250, + easing: Easing.linear, + from: new Value(0), + toggleState: new Value(-1), + to: new Value(1), + value: new Value(0), + ...params + }; + + return [ + cond(eq(toggleState, 1), [ + set( + value, + timing({ + clock, + duration, + easing, + from: value, + to + }) + ), + cond(not(clockRunning(clock)), [set(toggleState, -1)]) + ]), + cond(eq(toggleState, 0), [ + set( + value, + timing({ + clock, + duration, + easing, + from: value, + to: from + }) + ), + cond(not(clockRunning(clock)), [set(toggleState, -1)]) + ]) + ]; +}; diff --git a/src/Gesture.ts b/src/Gesture.ts index 47fb98d7..987ae3c7 100644 --- a/src/Gesture.ts +++ b/src/Gesture.ts @@ -1,14 +1,14 @@ import Animated from "react-native-reanimated"; import { - State, - PanGestureHandlerEventExtra, + FlingGestureHandlerEventExtra, + ForceTouchGestureHandlerEventExtra, GestureHandlerStateChangeNativeEvent, + LongPressGestureHandlerEventExtra, + PanGestureHandlerEventExtra, PinchGestureHandlerEventExtra, RotationGestureHandlerEventExtra, - TapGestureHandlerEventExtra, - ForceTouchGestureHandlerEventExtra, - LongPressGestureHandlerEventExtra, - FlingGestureHandlerEventExtra + State, + TapGestureHandlerEventExtra } from "react-native-gesture-handler"; import { snapPoint } from "./Animations"; diff --git a/yarn.lock b/yarn.lock index 50d1a43f..173c8b88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2682,6 +2682,7 @@ eslint-config-prettier@^4.3.0: eslint-config-react-native-wcandillon@2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/eslint-config-react-native-wcandillon/-/eslint-config-react-native-wcandillon-2.0.4.tgz#78736e4eb6b7dcc6372150fc68c5314c1b2f7df4" + integrity sha512-70pBYsms7cR8mIdpxPVDDXv2xOuIO+i2mftmnx32upGVGQ7KicFyR0jDA0nCjxNnvVJlbgyBZeSdkeiWuCcgeQ== dependencies: "@typescript-eslint/eslint-plugin" "1.11.0" "@typescript-eslint/parser" "1.11.0"