add ease Elastic and Bounce

Author: jljsj33

examples/simple.js

@@ -3,7 +3,7 @@ import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
 
-ReactDom.render(<QueueAnim>
+ReactDom.render(<QueueAnim ease="easeOutElastic" duration={1000}>
   <div key="1">依次进入</div>
   <div key="2">依次进入</div>
   <div key="3">依次进入</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-queue-anim",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "description": "Queue animation component for react",
   "keywords": [
     "react",

src/QueueAnim.jsx

@@ -25,13 +25,82 @@ import {
   getChildrenFromProps,
 } from './utils';
 import AnimTypes from './animTypes';
-
 const BackEase = {
   easeInBack: [0.6, -0.28, 0.735, 0.045],
   easeOutBack: [0.175, 0.885, 0.32, 1.275],
   easeInOutBack: [0.68, -0.55, 0.265, 1.55],
 };
+const _ease = {
+  easeInElastic: function(_p, o, t) {
+    let p = _p;
+    const _p1 = o >= 1 ? o : 1;
+    const _p2 = (t || 1) / (o < 1 ? o : 1);
+    const _p3 = _p2 / Math.PI * 2 * (Math.asin(1 / _p1) || 0);
+    return -(_p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin((p - _p3) * _p2));
+  },
+  easeOutElastic: function(p, o, t) {
+    const _p1 = o >= 1 ? o : 1;
+    const _p2 = (t || 1) / (o < 1 ? o : 1);
+    const _p3 = _p2 / Math.PI * 2 * (Math.asin(1 / _p1) || 0);
+    return _p1 * Math.pow(2, -10 * p) * Math.sin((p - _p3) * _p2) + 1;
+  },
+  easeInOutElastic: function(_p, o, t) {
+    let p = _p;
+    const _p1 = o >= 1 ? o : 1;
+    const _p2 = (t || 1) / (o < 1 ? o : 1);
+    const _p3 = _p2 / Math.PI * 2 * (Math.asin(1 / _p1) || 0);
+    const a = -0.5 * (_p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin((p - _p3) * _p2));
+    const b = _p1 * Math.pow(2, -10 * (p -= 1)) * Math.sin((p - _p3) * _p2) * 0.5 + 1;
+    p *= 2;
+    return p < 1 ? a : b;
+  },
+  easeInBounce: function(_p) {
+    let p = _p;
+    const __p = 1 - p;
+    if (__p < 1 / 2.75) {
+      return 1 - (7.5625 * p * p);
+    } else if (p < 2 / 2.75) {
+      return 1 - (7.5625 * (p -= 1.5 / 2.75) * p + 0.75);
+    } else if (p < 2.5 / 2.75) {
+      return 1 - (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375);
+    }
+    return 1 - (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375);
+  },
+  easeOutBounce: function(_p) {
+    let p = _p;
+    if (p < 1 / 2.75) {
+      return 7.5625 * p * p;
+    } else if (p < 2 / 2.75) {
+      return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;
+    } else if (p < 2.5 / 2.75) {
+      return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;
+    }
+    return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;
+  },
+  easeInOutBounce: function(_p) {
+    let p = _p;
+    const invert = (p < 0.5);
+    if (invert) {
+      p = 1 - (p * 2);
+    } else {
+      p = (p * 2) - 1;
+    }
+    if (p < 1 / 2.75) {
+      p = 7.5625 * p * p;
+    } else if (p < 2 / 2.75) {
+      p = 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;
+    } else if (p < 2.5 / 2.75) {
+      p = 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;
+    } else {
+      p = 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;
+    }
+    return invert ? (1 - p) * 0.5 : p * 0.5 + 0.5;
+  },
+};
 
+Object.keys(_ease).forEach(key => {
+  velocity.Easings[key] = _ease[key];
+});
 const placeholderKeyPrefix = 'ant-queue-anim-placeholder-';
 
 class QueueAnim extends React.Component {
@@ -182,7 +251,7 @@ class QueueAnim extends React.Component {
   performEnterBegin(key, i) {
     const childrenShow = this.state.childrenShow;
     childrenShow[key] = true;
-    this.setState({childrenShow}, this.realPerformEnter.bind(this, key, i));
+    this.setState({ childrenShow }, this.realPerformEnter.bind(this, key, i));
   }
 
   realPerformEnter(key, i) {