diff --git a/README.md b/README.md index 589da60e..fcfa9c61 100644 --- a/README.md +++ b/README.md @@ -266,6 +266,17 @@ const config = { runTiming(clock, 0, config); ``` +### `runLoop(duration: Node, easing: EasingFunction: boomerang? = false)` + +Returns an animated node that goes from `0` to `1` during the time set by `duration` continuously. If the `boomerang` option is set to `true`, the animation goes from `0` to `1` and then from `1` to `0` in the next cycle. + +Example usage: + +```js +const progress = new Value(0); +set(progress, runLoop(400, Easing.linear); +``` + ### `runDecay(clock: Clock, value: Node, velocity: Node, rerunDecaying: Node, deceleration: number): Node` Convenience function to run a decay animation. diff --git a/src/AnimationRunners.ts b/src/AnimationRunners.ts index 112135b2..e3850ceb 100644 --- a/src/AnimationRunners.ts +++ b/src/AnimationRunners.ts @@ -12,7 +12,8 @@ const { set, startClock, clockRunning, - onChange + onChange, + not } = Animated; export function runDecay( @@ -113,3 +114,36 @@ export function runTiming( state.position ]); } + +export const runLoop = ( + clock: Animated.Clock, + duration: Animated.Adaptable, + easing: Animated.EasingFunction, + boomerang: boolean = false +) => { + const state = { + finished: new Value(0), + position: new Value(0), + time: new Value(0), + frameTime: new Value(0) + }; + const config = { + toValue: new Value(1), + duration, + easing + }; + + return block([ + cond(not(clockRunning(clock)), startClock(clock)), + timing(clock, state, config), + cond(state.finished, [ + set(state.finished, 0), + set(state.time, 0), + set(state.frameTime, 0), + boomerang + ? set(config.toValue, cond(config.toValue, 0, 1)) + : set(state.position, 0) + ]), + state.position + ]); +};