fix safari reverse flash

Author: jljsj33

examples/scrollAnim.js

@@ -15,6 +15,7 @@ function Demo() {
           animation={{ y: 30, type: 'from', ease: 'easeOutQuart', opacity: 0 }}
           reverseDelay={200}
           style={{ background: '#fff000' }}
+          
         >
           执行动画
         </Tween>
@@ -24,6 +25,7 @@ function Demo() {
           animation={{ y: 30, delay: 100, ease: 'easeOutQuart', type: 'from', opacity: 0, id: 12 }}
           reverseDelay={100}
           style={{ background: '#000fff' }}
+          onChange={(e) => {console.log(e)}}
         >
           执行动画
         </Tween>

package.json

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

src/Tween.js

@@ -306,11 +306,11 @@ p.render = function () {
       moment: this.progressTime,
       ...e,
     };
-    if (progressTime >= 0 &&
+    if (progressTime >= (item.delay && reverse ? -this.perFrame + this.accuracy : 0) &&
       !(progressTime > duration && item.mode === 'onComplete') &&
       this.start[i]) {
       const updateAnim = this.updateAnim === 'update';
-      progressTime = progressTime < this.perFrame - this.accuracy ? 0 : progressTime;
+      progressTime = (progressTime < this.perFrame - this.accuracy) && !reverse ? 0 : progressTime;
       if (((progressTime >= duration - this.accuracy && !reverse) || (reverse && progressTime <= 0))
         && repeatNum >= item.repeat) {
         // onReveresComplete 和 onComplete 统一用 onComplete;

src/TweenOne.jsx

@@ -185,6 +185,7 @@ class TweenOne extends Component {
     this.startFrame = ticker.frame;
     this.tween.reverse = this.reverse;
     this.tween.reverseStartTime = this.startMoment;
+    this.raf();
     this.play();
   }
 
@@ -224,7 +225,7 @@ class TweenOne extends Component {
     let repeatNum = Math.floor(moment / this.tween.totalTime) || 0;
     repeatNum = repeatNum > repeat ? repeat : repeatNum;
     let tweenMoment = moment - this.tween.totalTime * repeatNum;
-    tweenMoment = tweenMoment < perFrame ? 0 : tweenMoment;
+    tweenMoment = tweenMoment < perFrame && !this.reverse ? 0 : tweenMoment;
     if (repeat && moment && moment - this.tween.totalTime * repeatNum < perFrame) {
       // 在重置样式之前补 complete；
       this.tween.frame(this.tween.totalTime * repeatNum);