chenglou / react-tween-state

React animation.
Other
1.74k stars 70 forks source link

RFC: Helper function for mixin to pull out multiple tween properties #27

Closed brentvatne closed 9 years ago

brentvatne commented 9 years ago
  getTweenings(propertySet) {
    if (this.state.tweenQueue.length === 0) return {};
    if (typeof propertySet === 'undefined') propertySet = [];
    var result = {};

    this.state.tweenQueue.forEach((tween) => {
      var property = tween.stateName;
      if (propertySet.length === 0 || propertySet.indexOf(property) > -1) {
        var value = this.getTweeningValue(property);
        result[property] = value;
      }
    });

    return result;
  },

Usage (with react-native):

  render() {
    return (
        <View style={[styles.container, this.getTweenings('opacity')]}>
           <View style={[styles.content, this.getTweenings(['left', 'top'])}>
           </View>
        </View>
    );
  }

Or if you just want to grab all of the properties:

  render() {
    return (
        <View style={[styles.container, this.getTweenings()]}>
        </View>
    );
  }
brentvatne commented 9 years ago

Example of it here: https://github.com/brentvatne/react-native-modal/blob/master/Transitions.js - slightly different than proposed above, but same sort of idea.