fix timeline duration is 0 no trigger onStart in queue-anim

Author: jljsj33

examples/easingPath.js

@@ -19,7 +19,7 @@ const anim = [
   {
     repeatDelay: 1000,
     duration: 1000,
-    y: -30,
+    y: 0,
     appearTo: 0,
     repeat: -1,
     yoyo: true,

src/Tween.js

@@ -291,7 +291,7 @@ p.render = function () {
         }
         if (!this.register || i && !initTime) {
           this.register = true;
-          if (progressTime === 0 && item.duration) {
+          if (progressTime === 0 && item.duration && item.delay) {
             return;
           }
         }
@@ -306,33 +306,40 @@ p.render = function () {
       moment: this.progressTime,
       ...e,
     };
-    if (progressTime >= (item.delay && reverse ? -this.perFrame + this.accuracy : 0) &&
+    const maxPer = this.perFrame - this.accuracy;
+    const startTime = item.delay && reverse ? -maxPer : 0;
+    if (progressTime >= startTime &&
       !(progressTime > duration && item.mode === 'onComplete') &&
       this.start[i]) {
       const updateAnim = this.updateAnim === 'update';
-      progressTime = (progressTime < this.perFrame - this.accuracy) && !reverse
+      progressTime = (progressTime < maxPer) && !reverse
         && item.duration >= this.perFrame ? 0 : progressTime;
       if (((progressTime >= duration - this.accuracy && !reverse) || (reverse && progressTime <= 0))
         && repeatNum >= item.repeat) {
+        if (item.mode === 'onComplete') {
+          return;
+        }
         // onReveresComplete 和 onComplete 统一用 onComplete;
         ratio = item.ease(reverse ? 0 : 1, startData, endData, 1);
         this.setRatio(ratio, item, i, item.currentRepeat !== repeatNum);
         if (!item.reset && !updateAnim) {
           // duration 为 0 时的一个回调；
-          if (!duration) {
-            item.onStart(e);
-            cb.mode = 'onStart';
-            this.onChange(cb);
+          if (duration < maxPer) {
+            if (!duration) {
+              item.onStart(e);
+              cb.mode = 'onStart';
+              this.onChange(cb);
+            }
             item.onUpdate({ ratio, ...e });
             cb.mode = 'onUpdate';
-            this.onChange(cb)
+            this.onChange(cb);
           }
           item.onComplete(e);
-        } else if (progressTime >= duration + this.perFrame - this.accuracy) {
+        } else if (progressTime >= duration + maxPer) {
           return;
         }
         item.mode = 'onComplete';
-      } else if (duration) {
+      } else if (duration > maxPer) {
         let currentProgress = progressTime < 0 ? 0 : progressTime;
         currentProgress = currentProgress > duration ? duration : currentProgress;
         ratio = item.ease(currentProgress, startData, endData, duration);
@@ -342,7 +349,8 @@ p.render = function () {
             item.mode = 'onRepeat';
             item.currentRepeat = repeatNum;
             item.onRepeat({ ...e, repeatNum });
-          } else if ((typeof item.perTime !== 'number' || progressTime === 0 ||
+          } else if ((typeof item.perTime !== 'number' ||
+            progressTime >= startTime && progressTime <= maxPer ||
             (reverse && (item.perTime >= this.reverseStartTime - initTime)))
             && item.mode !== 'onStart') {
             // onReveresStart 和 onStart 统一用 onStart;

src/TweenOne.jsx

@@ -42,7 +42,6 @@ class TweenOne extends Component {
   constructor(props) {
     super(props);
     this.rafID = -1;
-    this.setDefalut(props);
     this.paused = props.paused;
     this.reverse = props.reverse;
     this.updateAnim = false;
@@ -71,7 +70,6 @@ class TweenOne extends Component {
       if (nextProps.resetStyle && this.tween) {
         this.tween.resetDefaultStyle();
       }
-      this.setDefalut(nextProps);
       this.updateAnim = true;
     }
 
@@ -88,7 +86,7 @@ class TweenOne extends Component {
           this.play();
         }
       } else {
-        this.setDefalut(nextProps);
+
         this.updateAnim = true;
       }
     }
@@ -196,6 +194,7 @@ class TweenOne extends Component {
     this.updateAnim = false;
     const props = this.props;
     if (props.animation && Object.keys(props.animation).length) {
+      this.setDefalut(props);
       this.tween = new Tween(this.dom, dataToArray(props.animation),
         { attr: props.attr });
       this.tween.reverse = this.reverse;
@@ -252,8 +251,9 @@ class TweenOne extends Component {
         timelineMode: '',
       };
       if (
-        (!moment && !this.reverse) ||
-        (this.reverse && this.moment === this.startMoment)
+        (this.moment === this.startMoment &&
+          (!this.reverse && !e.index && e.mode === 'onStart') ||
+          this.reverse)
       ) {
         cb.timelineMode = 'onTimelineStart';
       } else if (

src/ticker.js

@@ -41,17 +41,17 @@ const ticker = new Ticker;
 p.tick = function (a) {
   ticker.elapsed = getTime() - ticker.lastUpdate;
   ticker.lastUpdate += ticker.elapsed;
+  if (!ticker.frame) {
+    ticker.frame++;
+  } else {
+    ticker.frame += Math.round(ticker.elapsed / ticker.perFrame);
+  }
   ticker.tickFnArray.forEach(func => func(a));
   // 如果 object 里没对象了，自动杀掉；
   if (!ticker.tickFnArray.length) {
     ticker.sleep();
     return;
   }
-  if (!ticker.frame) {
-    ticker.frame++;
-  } else {
-    ticker.frame += Math.round(ticker.elapsed / ticker.perFrame);
-  }
   ticker.id = requestAnimationFrame(ticker.tick);
 };
 let timeoutIdNumber = 0;

src/util.js

@@ -163,7 +163,7 @@ export function startConvertToEndUnit(
   }
   let horiz = /(?:Left|Right|Width|X)/i.test(style) || isOriginWidth;
   horiz = style === 'padding' || style === 'marign' ? true : horiz;
-  let t = style.indexOf('border') !== -1 || style.indexOf('translate') !== -1 ?
+  let t = style.indexOf('border') !== -1 || style.indexOf('translate') !== -1 || style === 'transformOrigin' ?
     target : target.parentNode || document.body;
   t = fixed ? document.body : t;
   let pix;