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"