From 2b2e65993286f1c2b182c22c3da81e4acecc11bb Mon Sep 17 00:00:00 2001 From: William Candillon Date: Mon, 22 Jul 2019 06:35:09 +0200 Subject: [PATCH] =?UTF-8?q?feat(8=EF=B8=8F=E2=83=A3):=20runLoop=20animatio?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 +++++++++++ src/AnimationRunners.ts | 36 +++++++++++++++++++++++++++++++++++- 2 files changed, 46 insertions(+), 1 deletion(-) 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 + ]); +};