From 379d17bda4cc324367f188f0099edf11f9273430 Mon Sep 17 00:00:00 2001 From: Humberto Costa Date: Thu, 8 Nov 2018 19:07:08 -0200 Subject: [PATCH 1/5] adding noAnimateOnMount --- createAnimatableComponent.js | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/createAnimatableComponent.js b/createAnimatableComponent.js index 511de99..64e0592 100644 --- a/createAnimatableComponent.js +++ b/createAnimatableComponent.js @@ -304,17 +304,21 @@ export default function createAnimatableComponent(WrappedComponent) { iterationDelay, } = this.props; if (animation) { - const startAnimation = () => { - onAnimationBegin(); - this.startAnimation(duration, 0, iterationDelay, endState => - this.props.onAnimationEnd(endState), - ); - this.delayTimer = null; - }; - if (delay) { - this.delayTimer = setTimeout(startAnimation, delay); + if (noAnimateOnMount) { + this.startAnimation(0, 0); } else { - startAnimation(); + const startAnimation = () => { + onAnimationBegin(); + this.startAnimation(duration, 0, iterationDelay, endState => + this.props.onAnimationEnd(endState), + ); + this.delayTimer = null; + }; + if (delay) { + this.delayTimer = setTimeout(startAnimation, delay); + } else { + startAnimation(); + } } } } @@ -403,11 +407,19 @@ export default function createAnimatableComponent(WrappedComponent) { if (reversed) { easing = Easing.out(easing); } + + let effectiveDuration = 1000; + if (typeof duration === 'number') { + effectiveDuration = duration; + } else if (typeof this.props.duration === 'number') { + effectiveDuration = this.props.duration; + } + const config = { toValue, easing, isInteraction: iterationCount <= 1, - duration: duration || this.props.duration || 1000, + duration: effectiveDuration, useNativeDriver, delay: iterationDelay || 0, }; From a5e64e5819ce49b62799082abceefb73c785c0fc Mon Sep 17 00:00:00 2001 From: Humberto Costa Date: Fri, 9 Nov 2018 00:37:43 -0200 Subject: [PATCH 2/5] adding enum --- createAnimatableComponent.js | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/createAnimatableComponent.js b/createAnimatableComponent.js index 64e0592..7ab2ee7 100644 --- a/createAnimatableComponent.js +++ b/createAnimatableComponent.js @@ -33,6 +33,12 @@ const INTERPOLATION_STYLE_PROPERTIES = [ 'tintColor', ]; +const ANIMATE = { + ALWAYS: 1, + ON_MOUNT: 2, + ON_UPDATE: 3, +} + const ZERO_CLAMPED_STYLE_PROPERTIES = ['width', 'height']; // Create a copy of `source` without `keys` @@ -170,6 +176,7 @@ export default function createAnimatableComponent(WrappedComponent) { PropTypes.arrayOf(PropTypes.string), ]), useNativeDriver: PropTypes.bool, + whenToAnimate: PropTypes.oneOf([ANIMATE.ALWAYS, ANIMATE.ON_MOUNT, ANIMATE.ON_UPDATE]), }; static defaultProps = { @@ -187,6 +194,7 @@ export default function createAnimatableComponent(WrappedComponent) { style: undefined, transition: undefined, useNativeDriver: false, + whenToAnimate: ANIMATE.ALWAYS, }; constructor(props) { @@ -302,9 +310,10 @@ export default function createAnimatableComponent(WrappedComponent) { delay, onAnimationBegin, iterationDelay, + whenToAnimate, } = this.props; if (animation) { - if (noAnimateOnMount) { + if (whenToAnimate === ANIMATE.ON_UPDATE) { this.startAnimation(0, 0); } else { const startAnimation = () => { @@ -331,20 +340,22 @@ export default function createAnimatableComponent(WrappedComponent) { easing, transition, onAnimationBegin, + whenToAnimate, } = props; - if (transition) { const values = getStyleValues(transition, props.style); this.transitionTo(values, duration, easing, delay); } else if (!deepEquals(animation, this.props.animation)) { if (animation) { - if (this.delayTimer) { - this.setAnimation(animation); - } else { - onAnimationBegin(); - this.animate(animation, duration).then(endState => - this.props.onAnimationEnd(endState), - ); + if (whenToAnimate !== ANIMATE.ON_MOUNT) { + if (this.delayTimer) { + this.setAnimation(animation); + } else { + onAnimationBegin(); + this.animate(animation, duration).then(endState => + this.props.onAnimationEnd(endState), + ); + } } } else { this.stopAnimation(); From a4657d9409b8ae0a2390ec9592f3088d86e3f46c Mon Sep 17 00:00:00 2001 From: Humberto Costa Date: Fri, 9 Nov 2018 02:06:36 -0200 Subject: [PATCH 3/5] exporting and renaming enum --- createAnimatableComponent.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/createAnimatableComponent.js b/createAnimatableComponent.js index 7ab2ee7..02016fe 100644 --- a/createAnimatableComponent.js +++ b/createAnimatableComponent.js @@ -33,7 +33,7 @@ const INTERPOLATION_STYLE_PROPERTIES = [ 'tintColor', ]; -const ANIMATE = { +export const RUN_ANIMATION = { ALWAYS: 1, ON_MOUNT: 2, ON_UPDATE: 3, @@ -176,7 +176,7 @@ export default function createAnimatableComponent(WrappedComponent) { PropTypes.arrayOf(PropTypes.string), ]), useNativeDriver: PropTypes.bool, - whenToAnimate: PropTypes.oneOf([ANIMATE.ALWAYS, ANIMATE.ON_MOUNT, ANIMATE.ON_UPDATE]), + whenToAnimate: PropTypes.oneOf([RUN_ANIMATION.ALWAYS, RUN_ANIMATION.ON_MOUNT, RUN_ANIMATION.ON_UPDATE]), }; static defaultProps = { @@ -194,7 +194,7 @@ export default function createAnimatableComponent(WrappedComponent) { style: undefined, transition: undefined, useNativeDriver: false, - whenToAnimate: ANIMATE.ALWAYS, + whenToAnimate: RUN_ANIMATION.ALWAYS, }; constructor(props) { @@ -313,7 +313,7 @@ export default function createAnimatableComponent(WrappedComponent) { whenToAnimate, } = this.props; if (animation) { - if (whenToAnimate === ANIMATE.ON_UPDATE) { + if (whenToAnimate === RUN_ANIMATION.ON_UPDATE) { this.startAnimation(0, 0); } else { const startAnimation = () => { @@ -347,7 +347,7 @@ export default function createAnimatableComponent(WrappedComponent) { this.transitionTo(values, duration, easing, delay); } else if (!deepEquals(animation, this.props.animation)) { if (animation) { - if (whenToAnimate !== ANIMATE.ON_MOUNT) { + if (whenToAnimate !== RUN_ANIMATION.ON_MOUNT) { if (this.delayTimer) { this.setAnimation(animation); } else { From 38ddf1062a799448c7b44cc187ee250023e109b8 Mon Sep 17 00:00:00 2001 From: Humberto Costa Date: Fri, 9 Nov 2018 16:05:02 -0200 Subject: [PATCH 4/5] exporting RUN_ANIMATION --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 8e84d91..cab304d 100644 --- a/index.js +++ b/index.js @@ -18,3 +18,4 @@ export { registerAnimation, initializeRegistryWithDefinitions, } from './registry'; +export { RUN_ANIMATION } from './createAnimatableComponent'; From c8f83ee93aa16f8c147f0d9d394baa72feb695f8 Mon Sep 17 00:00:00 2001 From: Humberto Costa Date: Fri, 9 Nov 2018 16:19:17 -0200 Subject: [PATCH 5/5] updating readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 71c596e..31e1b52 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ You can create your own simple transitions of a style property of your own choos |**`onTransitionBegin`**|A function that is called when the transition of a style has been started. The function is called with a `property` argument to differentiate between styles. |*None*| |**`onTransitionEnd`**|A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a `property` argument to differentiate between styles. |*None*| |**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling. |`false`| +|**`whenToAnimate`**|When the animation will run. `RUN_ANIMATION.ALWAYS`, `RUN_ANIMATION.ON_UPDATE`, `RUN_ANIMATION.ON_MOUNT`. |`RUN_ANIMATION.ALWAYS`| ### Imperative Usage