From 02a4f5fb4ea3c4aefbab22a5cddbb9aac4768555 Mon Sep 17 00:00:00 2001 From: Tomislav Arambasic Date: Tue, 16 Mar 2021 15:00:51 +0100 Subject: [PATCH 1/6] Create wiggle animation --- index.js | 1 + src/animations/Wiggle.js | 71 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 src/animations/Wiggle.js diff --git a/index.js b/index.js index e0e5c84..7ed5198 100644 --- a/index.js +++ b/index.js @@ -11,6 +11,7 @@ export { default as ZoomOut } from './src/animations/ZoomOut'; export { default as SlideIn } from './src/animations/Slide/SlideIn'; export { default as SlideOut } from './src/animations/Slide/SlideOut'; export { default as Rotate } from './src/animations/Rotate'; +export { default as Wiggle } from './src/animations/Wiggle'; export { default as HeroHeader } from './src/animations/HeroHeader'; export { default as DriverShape } from './src/drivers/DriverShape'; export { default as connectAnimation } from './src/components/connectAnimation'; diff --git a/src/animations/Wiggle.js b/src/animations/Wiggle.js new file mode 100644 index 0000000..49031a7 --- /dev/null +++ b/src/animations/Wiggle.js @@ -0,0 +1,71 @@ +import React, { PureComponent } from 'react'; +import autoBindReact from 'auto-bind/react'; +import PropTypes from 'prop-types'; +import { Animated, Easing } from 'react-native'; + +export default class Wiggle extends PureComponent { + constructor(props) { + super(props); + + autoBindReact(this); + + this.animation = new Animated.Value(0); + } + + componentDidUpdate() { + const { startAnimation } = this.props; + + if (startAnimation) { + this.triggerAnimation(); + } + } + + triggerAnimation() { + Animated.timing(this.animation, { + duration: 400, + toValue: 3, + ease: Easing.bounce, + }).start(() => { + this.animation.setValue(0); + }); + } + + render() { + const { children, style } = this.props; + + const interpolated = this.animation.interpolate({ + inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3], + outputRange: [0, -5, 0, 5, 0 , -5, 0], + }); + const animatedStyle = { + paddingHorizontal: 5, + transform: [ + { translateX: interpolated }, + ] + }; + + return ( + + {children} + + ); + } +} + +Wiggle.propTypes = { + /** + * If set to true, triggers animation + */ + startAnimation: PropTypes.bool, + /** + * Components to which an effect will be applied + */ + children: PropTypes.node.isRequired, + style: PropTypes.object, +}; + +Wiggle.defaultProps = { + startAnimation: false, +}; From ce845cd250960cc609f02b1211a787bdf62bacac Mon Sep 17 00:00:00 2001 From: Tomislav Arambasic Date: Wed, 24 Mar 2021 14:57:57 +0100 Subject: [PATCH 2/6] Implement CR changes --- src/animations/Wiggle.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/animations/Wiggle.js b/src/animations/Wiggle.js index 49031a7..8230687 100644 --- a/src/animations/Wiggle.js +++ b/src/animations/Wiggle.js @@ -33,20 +33,9 @@ export default class Wiggle extends PureComponent { render() { const { children, style } = this.props; - const interpolated = this.animation.interpolate({ - inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3], - outputRange: [0, -5, 0, 5, 0 , -5, 0], - }); - const animatedStyle = { - paddingHorizontal: 5, - transform: [ - { translateX: interpolated }, - ] - }; - return ( {children} From 472c1419bcc8bb5dc05539c02e52411e62b17a46 Mon Sep 17 00:00:00 2001 From: Tomislav Arambasic Date: Wed, 24 Mar 2021 15:08:33 +0100 Subject: [PATCH 3/6] Adjust passed styles resolution --- src/animations/Wiggle.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/animations/Wiggle.js b/src/animations/Wiggle.js index 8230687..53a8341 100644 --- a/src/animations/Wiggle.js +++ b/src/animations/Wiggle.js @@ -32,10 +32,21 @@ export default class Wiggle extends PureComponent { render() { const { children, style } = this.props; + const { interpolateConfig, paddingHorizontal } = style; + + const interpolated = this.animation.interpolate({ + ...interpolateConfig + }); + const animatedStyle = { + paddingHorizontal, + transform: [ + { translateX: interpolated }, + ] + }; return ( {children} From 5d358fef21c3651fcdf919eadc45972c253fdcf4 Mon Sep 17 00:00:00 2001 From: Tomislav Arambasic Date: Thu, 25 Mar 2021 08:31:31 +0100 Subject: [PATCH 4/6] Improve start animation, pass timing params via style --- src/animations/Wiggle.js | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/animations/Wiggle.js b/src/animations/Wiggle.js index 53a8341..949c776 100644 --- a/src/animations/Wiggle.js +++ b/src/animations/Wiggle.js @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react'; import autoBindReact from 'auto-bind/react'; +import _ from 'lodash'; import PropTypes from 'prop-types'; import { Animated, Easing } from 'react-native'; @@ -12,18 +13,27 @@ export default class Wiggle extends PureComponent { this.animation = new Animated.Value(0); } - componentDidUpdate() { + shouldComponentUpdate(nextProps) { + const { startAnimation: nextStartAnimation } = nextProps; const { startAnimation } = this.props; - if (startAnimation) { + if (nextStartAnimation && !startAnimation) { this.triggerAnimation(); + return true; } + + return true; } triggerAnimation() { + const { style } = this.props; + const duration = _.get(style, 'timingConfig.duration'); + const inputRange = _.get(style, 'interpolateConfig.inputRange'); + const toValue = _.last(inputRange); + Animated.timing(this.animation, { - duration: 400, - toValue: 3, + duration, + toValue, ease: Easing.bounce, }).start(() => { this.animation.setValue(0); @@ -35,21 +45,15 @@ export default class Wiggle extends PureComponent { const { interpolateConfig, paddingHorizontal } = style; const interpolated = this.animation.interpolate({ - ...interpolateConfig + ...interpolateConfig, }); const animatedStyle = { paddingHorizontal, - transform: [ - { translateX: interpolated }, - ] + transform: [{ translateX: interpolated }], }; return ( - - {children} - + {children} ); } } @@ -58,7 +62,7 @@ Wiggle.propTypes = { /** * If set to true, triggers animation */ - startAnimation: PropTypes.bool, + startAnimation: PropTypes.bool, /** * Components to which an effect will be applied */ From dca246564c14c550bca9ad60c31dd8a82d37866c Mon Sep 17 00:00:00 2001 From: Tomislav Arambasic Date: Thu, 25 Mar 2021 16:33:37 +0100 Subject: [PATCH 5/6] Implement CR changes --- src/animations/Wiggle.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/animations/Wiggle.js b/src/animations/Wiggle.js index 949c776..ee927fa 100644 --- a/src/animations/Wiggle.js +++ b/src/animations/Wiggle.js @@ -13,16 +13,13 @@ export default class Wiggle extends PureComponent { this.animation = new Animated.Value(0); } - shouldComponentUpdate(nextProps) { - const { startAnimation: nextStartAnimation } = nextProps; + componentDidUpdate(prevProps) { + const { startAnimation: prevStartAnimation } = prevProps; const { startAnimation } = this.props; - if (nextStartAnimation && !startAnimation) { + if (!prevStartAnimation && startAnimation) { this.triggerAnimation(); - return true; } - - return true; } triggerAnimation() { From 9ddea80ef14643353e82c8af62dfc4fae09d2b2e Mon Sep 17 00:00:00 2001 From: Tomislav Arambasic Date: Fri, 26 Mar 2021 13:54:38 +0100 Subject: [PATCH 6/6] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 25ffa30..9d2c5bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shoutem/animation", - "version": "0.13.1", + "version": "0.14.0", "description": "Shoutem Animation Library", "main": "index.js", "scripts": {