Merge pull request jeanregisser#40 from moduscreate/slider-animations

Slider animations
rakibtg · Jun 13, 2016 · 2836f42 · 2836f42
2 parents 0a6cdef + 4b29cc1
commit 2836f42
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -93,6 +93,10 @@ style                 | [style](http://facebook.github.io/react-native/docs/view
 trackStyle            | [style](http://facebook.github.io/react-native/docs/view.html#style)    | Yes      |                           | The style applied to the track
 thumbStyle            | [style](http://facebook.github.io/react-native/docs/view.html#style)    | Yes      |                           | The style applied to the thumb
 debugTouchArea        | bool     | Yes      | false                     | Set this to true to visually see the thumb touch rect in green.
+animateTransitions    | bool     | Yes      | false                     | Set to true if you want to use the default 'spring' animation
+animationType         | string   | Yes      | 'spring'                  | Set to 'spring' or 'timing' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html).
+animationConfig       | object   | Yes      | undefined                 | Used to configure the animation parameters.  These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). 
+
 
 ---
 

diff --git a/src/Slider.js b/src/Slider.js
@@ -9,11 +9,12 @@ import {
   Animated,
   StyleSheet,
   PanResponder,
-  View
+  View,
+  Easing
 } from "react-native";
 
-var shallowCompare = require('react-addons-shallow-compare');
-var styleEqual = require('style-equal');
+const shallowCompare = require('react-addons-shallow-compare'),
+      styleEqual = require('style-equal');
 
 var TRACK_SIZE = 4;
 var THUMB_SIZE = 20;
@@ -32,6 +33,22 @@ Rect.prototype.containsPoint = function(x, y) {
           && y <= this.y + this.height);
 };
 
+var DEFAULT_ANIMATION_CONFIGS = {
+  spring : {
+    friction : 7,
+    tension  : 100
+  },
+  timing : {
+    duration : 150,
+    easing   : Easing.inOut(Easing.ease),
+    delay    : 0
+  },
+  // decay : { // This has a serious bug
+  //   velocity     : 1,
+  //   deceleration : 0.997
+  // }
+};
+
 var Slider = React.createClass({
   propTypes: {
     /**
@@ -130,6 +147,21 @@ var Slider = React.createClass({
      * Set this to true to visually see the thumb touch rect in green.
      */
     debugTouchArea: PropTypes.bool,
+
+    /**
+    * Set to true to animate values with default 'spring' animation type
+    */
+    animateTransitions : PropTypes.bool,
+
+    /**
+    * Custom Animation type. 'spring' or 'timing'. 
+    */
+    animationType : PropTypes.oneOf(['spring', 'timing'])
+
+    /**
+    * Used to configure the animation parameters.  These are the same parameters in the Animated library. 
+    */
+    animationConfig : PropTypes.object
   },
   getInitialState() {
     return {
@@ -151,6 +183,7 @@ var Slider = React.createClass({
       thumbTintColor: '#343434',
       thumbTouchSize: {width: 40, height: 40},
       debugTouchArea: false,
+      animationType: 'timing'
     };
   },
   componentWillMount() {
@@ -165,10 +198,15 @@ var Slider = React.createClass({
     });
   },
   componentWillReceiveProps: function(nextProps) {
-    var oldValue = this.props.value;
     var newValue = nextProps.value;
-    if (oldValue !== newValue) {
-      this._setCurrentValue(nextProps.value);
+
+    if (this.props.value !== newValue) {
+      if (this.props.animateTransitions) {
+        this._setCurrentValueAnimated(newValue);      
+      }
+      else {
+        this._setCurrentValue(newValue);
+      }
     }
   },
   shouldComponentUpdate: function(nextProps, nextState) {
@@ -205,7 +243,7 @@ var Slider = React.createClass({
         inputRange: [minimumValue, maximumValue],
         outputRange: [0, containerSize.width - thumbSize.width],
         //extrapolate: 'clamp',
-      })
+      });
     var valueVisibleStyle = {};
     if (!allMeasured) {
       valueVisibleStyle.opacity = 0;
@@ -224,7 +262,7 @@ var Slider = React.createClass({
     return (
       <View {...other} style={[mainStyles.container, style]} onLayout={this._measureContainer}>
         <View
-          style={[{backgroundColor: maximumTrackTintColor}, mainStyles.track, trackStyle]}
+          style={[{backgroundColor: maximumTrackTintColor,}, mainStyles.track, trackStyle]}
           onLayout={this._measureTrack} />
         <Animated.View style={[mainStyles.track, trackStyle, minimumTrackStyle]} />
         <Animated.View
@@ -364,6 +402,18 @@ var Slider = React.createClass({
     this.state.value.setValue(value);
   },
 
+  _setCurrentValueAnimated(value: number) {
+    var animationType   = this.props.animationType;
+    var animationConfig = Object.assign(
+          {}, 
+          DEFAULT_ANIMATION_CONFIGS[animationType], 
+          this.props.animationConfig, 
+          {toValue : value}
+        );
+
+    Animated[animationType](this.state.value, animationConfig).start();
+  },
+
   _fireChangeEvent(event) {
     if (this.props[event]) {
       this.props[event](this._getCurrentValue());