react.animate/react.animate.js at master · pleasetrythisathome/react.animate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
(function (root, factory) {
  if (typeof require === 'function' && typeof module == 'object' && module.exports) {
    module.exports = factory(
      require('react'),
      require('ease-component')
    );
  } else if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['react', 'ease'], factory);
  } else {
    // Browser globals
    root.amdWeb = factory(root.React, root.Ease);
  }
}(this, function (React, Ease) {

  var requestAnimationFrame = null;

  if(typeof window !== 'undefined')
    requestAnimationFrame = window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.msRequestAnimationFrame;

  var animator = function() {
    var date = (new Date).getTime();
    var alpha = (date - this.startTime) / this.duration;

    alpha = alpha > 1 ? 1 : alpha;

    var newState = {};
    var easeFunc = Ease[this.ease];
    for (var i in this.startState) {
      newState[i] = this.startState[i] + (this.endState[i] - this.startState[i]) * easeFunc(alpha);
    }
    this.component.setState(newState);

    if (alpha >= 1) {
      for (var i in this.startState) {
        delete this.component._reactAnimations[i];
      }
      this.callback();
    } else
      this.animation = requestAnimationFrame(animator.bind(this));
  };

  var removeAnimatorProperty = function(animator, property) {
    if (animator.startState[property] === undefined)
      return;

    delete animator.startState[property];
    delete animator.endState[property];

    if (Object.keys(animator.startState).length < 1) {
      animator.callback();
    }
  };

  React.Animate = {

    animate: function() {
      // keep start state if requestAnimationFrame is unset
      if(!requestAnimationFrame)
        return;

      // Default parameters
      var anim = {
        startTime: (new Date()).getTime(),
        animation: null,
        startState: {},
        endState: {},
        duration: 500,
        ease: "in-out-cube",
        callback: function() {},
        component: this,
      };

      // Parameter parsing
      var argIter = 0;
      if (typeof arguments[argIter] === 'object') {
        anim.endState = arguments[argIter++];
      } else {
        anim.endState = {};
        anim.endState[arguments[argIter]] =
          arguments[argIter + 1];
        argIter += 2;
      }

      if (typeof arguments[argIter] === 'number') {
        anim.duration = arguments[argIter++];
      }

      if (typeof arguments[argIter] === 'string') {
        anim.ease = arguments[argIter++];
      }

      if (typeof arguments[argIter] === 'function') {
        anim.callback = arguments[argIter++];
      }

      // Save the animation object on the animated component
      if (!this._reactAnimations)
        this._reactAnimations = {};

      for (var i in anim.endState) {
        anim.startState[i] = (this.state[i] !== undefined ?
                              this.state[i] : this.endState[i]);
        // Stop currently running animation for a given property
        if (this._reactAnimations[i] !== undefined)
          removeAnimatorProperty(this._reactAnimations[i], i);
        this._reactAnimations[i] = anim;
      }

      // Kick the animation
      anim.animator = requestAnimationFrame(animator.bind(anim));
    }
  };

  return React;

}));