fix(notice-bar): fixe inconsistent rolling rates

Author: landluck

packages/notice-bar/index.ts

@@ -67,7 +67,7 @@ VantComponent({
           getRect(this, '.van-notice-bar__wrap'),
         ]).then((rects) => {
           const [contentRect, wrapRect] = rects;
-          const { speed, scrollable, delay } = this.data;
+          const { scrollable } = this.data;
           if (
             contentRect == null ||
             wrapRect == null ||
@@ -79,24 +79,32 @@ VantComponent({
           }
 
           if (scrollable || wrapRect.width < contentRect.width) {
-            const duration =
-              ((wrapRect.width + contentRect.width) / speed) * 1000;
-
-            this.wrapWidth = wrapRect.width;
-            this.contentWidth = contentRect.width;
-            this.duration = duration;
-            this.animation = wx.createAnimation({
-              duration,
-              timingFunction: 'linear',
-              delay,
-            });
+            this.initAnimation(wrapRect.width, contentRect.width);
 
             this.scroll(true);
           }
         });
       });
     },
 
+    initAnimation(warpWidth: number, contentWidth: number) {
+      const { speed, delay } = this.data;
+
+      this.wrapWidth = warpWidth;
+      this.contentWidth = contentWidth;
+
+      // begin 0
+      this.contentDuration = (contentWidth / speed) * 1000;
+      // begin -wrapWidth
+      this.duration = ((warpWidth + contentWidth) / speed) * 1000;
+
+      this.animation = wx.createAnimation({
+        duration: this.contentDuration,
+        timingFunction: 'linear',
+        delay,
+      });
+    },
+
     scroll(isInit = false) {
       this.timer && clearTimeout(this.timer);
       this.timer = null;
@@ -108,18 +116,20 @@ VantComponent({
           .export(),
       });
 
+      const duration = isInit ? this.contentDuration : this.duration;
+
       requestAnimationFrame(() => {
         this.setData({
           animationData: this.animation
             .translateX(-this.contentWidth)
-            .step()
+            .step({ duration })
             .export(),
         });
       });
 
       this.timer = setTimeout(() => {
         this.scroll();
-      }, this.duration + this.data.delay);
+      }, duration + this.data.delay);
     },
 
     onClickIcon(event) {