diff --git a/packages/notice-bar/index.ts b/packages/notice-bar/index.ts index 28f6f8867..54903fd9d 100644 --- a/packages/notice-bar/index.ts +++ b/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,17 +79,7 @@ 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); } @@ -97,6 +87,24 @@ VantComponent({ }); }, + 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) {