remove willChange and update timeline mode

Author: jljsj33

README.md

@@ -95,7 +95,6 @@ React.render(<TweenOneGroup>
 | onChange   | func           | null    | when the animation change called, callback({ moment, item, tween, index, mode}) |
 | moment     | number         | null    | set the current frame    |
 | attr       | string         | `style` | `style` or `attr`, `attr` is tag attribute. when morph SVG must be `attr`.  |
-| willChange | boolean        | true    | open will-change style. |
 | resetStyleBool | boolean    | false   | update animation data, reset init style |
 | updateReStart | boolean     | true    | update animation data, re start animate | 
 | component  | string / React.Element  | `div`   | component tag  |
@@ -182,5 +181,4 @@ object: `animation={{ path: { x: path, y: path, rotate: path } }}`, can be contr
 | onEnd     |  func          | -    | one animation end callback |
 | animatingClassName | array | `['tween-one-entering', 'tween-one-leaving']` | className to every element of animating |
 | resetStyleBool   |  boolean   | true  | whether to animation reset the style every time |
-| willChange |  boolean       | true   |  open child will-change style, transfer to child  |
 | component | 	React.Element/String | div  |  component tag  | 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tween-one",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "tween-one anim component for react",
   "keywords": [
     "react",

src/TimeLine.js

@@ -35,7 +35,6 @@ function defaultData(vars, now) {
 const timeLine = function (target, toData, props) {
   this.target = target;
   this.attr = props.attr || 'style';
-  this.willChange = props.willChange;
   // 记录总时间;
   this.totalTime = 0;
   // 记录当前时间;
@@ -44,8 +43,6 @@ const timeLine = function (target, toData, props) {
   this.defaultData = [];
   // 每个的开始数据；
   this.start = {};
-  // 记录动画开始;
-  this.onStart = {};
   // 开始默认的数据；
   this.startDefaultData = {};
   // 动画过程
@@ -159,7 +156,7 @@ p.getAnimStartData = function (item) {
   this.computedStyle = this.computedStyle || this.getComputedStyle();
   Object.keys(item).forEach(_key => {
     if (_key in _plugin || (this.attr === 'attr' && (_key === 'd' || _key === 'points'))) {
-      start[_key] = item[_key].getAnimStart(this.computedStyle, this.willChange);
+      start[_key] = item[_key].getAnimStart(this.computedStyle);
       return;
     }
     if (this.attr === 'attr') {
@@ -282,34 +279,36 @@ p.render = function () {
           item.onComplete(e);
         }
         item.mode = 'onComplete';
-      } else if (progressTime < this.perFrame) {
-        ratio = item.ease(0, startData, endData, 1);
+      } else if (progressTime >= 0 && progressTime < duration) {
+        ratio = item.ease(progressTime, startData, endData, duration);
         this.setRatio(ratio, item, i);
-        // 将第一帧作动画开始 start;
         if (!updateAnim) {
-          if (item.repeat && repeatNum > 0) {
+          const startProto = this.start[i];
+          if (!startProto._tweenOnEnter) {
+            item.mode = 'onStart';
+            startProto._tweenOnEnter = true;
+            item.onStart(e);
+          } else if (item.repeat && repeatNum > 0 && startProto._tweenRepeatNum !== repeatNum) {
             item.mode = 'onRepeat';
             item.onRepeat({ ...e, repeatNum });
+            startProto._tweenRepeatNum = repeatNum;
           } else {
-            item.mode = 'onStart';
-            item.onStart(e);
+            item.mode = 'onUpdate';
+            item.onUpdate({ ratio, ...e });
           }
         }
-      } else if (progressTime > 0 && progressTime < duration) {
-        item.mode = 'onUpdate';
-        ratio = item.ease(progressTime, startData, endData, duration);
-        this.setRatio(ratio, item, i);
-        if (!updateAnim) {
-          item.onUpdate({ ratio, ...e });
-        }
       }
+
       if (!updateAnim) {
         this.onChange({
           moment: this.progressTime,
           mode: item.mode,
           ...e,
         });
       }
+    } else if (progressTime < 0 && this.start[i]) {
+      delete this.start[i]._tweenOnEnter;
+      delete this.start[i]._tweenRepeatNum;
     }
   });
 };
@@ -321,7 +320,6 @@ p.frame = function (moment) {
 p.resetAnimData = function () {
   this.tween = {};
   this.start = {};
-  this.onStart = {};
 };
 
 p.resetDefaultStyle = function () {

src/TweenOne.jsx

@@ -130,7 +130,7 @@ class TweenOne extends Component {
     const props = this.props;
     if (props.animation && Object.keys(props.animation).length) {
       this.timeLine = new TimeLine(this.dom, dataToArray(props.animation),
-        { attr: props.attr, willChange: props.willChange });
+        { attr: props.attr });
       // 预先注册 raf, 初始动画数值。
       this.raf();
       // 开始动画
@@ -205,7 +205,6 @@ class TweenOne extends Component {
       'moment',
       'resetStyleBool',
       'updateReStart',
-      'willChange',
     ].forEach(key => delete props[key]);
     props.style = { ...this.props.style };
     Object.keys(props.style).forEach(p => {
@@ -246,7 +245,6 @@ TweenOne.propTypes = {
   reverseDelay: PropTypes.number,
   moment: PropTypes.number,
   attr: PropTypes.string,
-  willChange: PropTypes.bool,
   onChange: PropTypes.func,
   resetStyleBool: PropTypes.bool,
   updateReStart: PropTypes.bool,
@@ -257,7 +255,6 @@ TweenOne.defaultProps = {
   reverseDelay: 0,
   attr: 'style',
   onChange: noop,
-  willChange: true,
   updateReStart: true,
 };
 export default TweenOne;

src/TweenOneGroup.jsx

@@ -121,7 +121,6 @@ class TweenOneGroup extends Component {
     onChange = this.onChange.bind(this, animation, child.key, type);
     const animate = transformArguments(animation, child.key, i);
     const props = {
-      willChange: this.props.willChange,
       key: child.key,
       animation: animate,
       onChange,
@@ -168,7 +167,6 @@ class TweenOneGroup extends Component {
       'animatingClassName',
       'onEnd',
       'resetStyleBool',
-      'willChange',
     ].forEach(key => delete componentProps[key]);
     return createElement(this.props.component, componentProps, childrenToRender);
   }
@@ -183,7 +181,6 @@ TweenOneGroup.propTypes = {
   leave: PropTypes.any,
   animatingClassName: PropTypes.array,
   onEnd: PropTypes.func,
-  willChange: PropTypes.bool,
   resetStyleBool: PropTypes.bool,
 };
 
@@ -194,7 +191,6 @@ TweenOneGroup.defaultProps = {
   enter: { x: 50, opacity: 0, type: 'from' },
   leave: { x: -50, opacity: 0 },
   onEnd: noop,
-  willChange: true,
   resetStyleBool: true,
 };
 TweenOneGroup.isTweenOneGroup = true;

src/plugin/StylePlugin.jsx

@@ -96,25 +96,11 @@ p.convertToMarksArray = function (unit, key, data, i) {
   return startConvertToEndUnit(this.target, key, data,
     startUnit, endUnit, null, key === 'transformOrigin' && !i);
 };
-p.getAnimStart = function (computedStyle, willChangeBool) {
+p.getAnimStart = function (computedStyle) {
   const style = {};
   this.supports3D = checkStyleName('perspective');
-  let willChangeArray;
-  if (willChangeBool) {
-    this.willChange = computedStyle.willChange === 'auto' || !computedStyle.willChange ||
-    computedStyle.willChange === 'none' ? '' : computedStyle.willChange;
-    willChangeArray = this.willChange.split(',').filter(k => k);
-  }
   Object.keys(this.propsData.data).forEach(key => {
     const cssName = isConvert(key);
-    if (willChangeBool) {
-      const willStyle = key in _plugin ? this.propsData.data[key].useStyle || cssName : cssName;
-      if (willChangeArray.indexOf(willStyle) === -1 &&
-        (willStyle in computedStyle || key in _plugin)) {
-        willChangeArray.push(willStyle.replace(/([A-Z])/g, '-$1').toLocaleLowerCase());
-      }
-      this.willChange = willChangeArray.join(',');
-    }
     let startData = computedStyle[cssName];
     const fixed = computedStyle.position === 'fixed';
     if (!startData || startData === 'none' || startData === 'auto') {
@@ -227,13 +213,6 @@ p.setRatio = function (ratio, tween) {
     tween.style.transform = tween.style.transform || { ...this.start.transform };
   }
   const style = this.target.style;
-  if (this.willChange) {
-    if (ratio === (this.type === 'from' ? 0 : 1)) {
-      style.willChange = null;
-    } else {
-      style.willChange = this.willChange;
-    }
-  }
   Object.keys(this.propsData.data).forEach(key => {
     const _isTransform = isTransform(key) === 'transform';
     let startVars = _isTransform ? this.start.transform[key] : this.start[key];

src/plugin/SvgDrawPlugin.jsx

@@ -78,9 +78,11 @@ SvgDrawPlugin.prototype = {
       case 'ellipse':
         this.length = this.getEllipseLength();
         break;
-      default:
+      case 'path':
         this.length = this.target.getTotalLength();
         break;
+      default:
+        throw new Error('The label is not a label in the SVG.');
     }
     this.length = parseFloat(this.length.toFixed(3));
     this.start.strokeDasharray = computedStyle.strokeDasharray === 'none'