diff --git a/src/css/danmaku.less b/src/css/danmaku.less index b1d21bc..b88eee8 100644 --- a/src/css/danmaku.less +++ b/src/css/danmaku.less @@ -24,7 +24,8 @@ transform: translateX(100%); &.dplayer-danmaku-move { will-change: transform; - animation: danmaku 5s linear; + animation-name: 'danmaku'; + animation-timing-function: linear; animation-play-state: paused; } } @@ -41,7 +42,8 @@ visibility: hidden; &.dplayer-danmaku-move { will-change: visibility; - animation: danmaku-center 4s linear; + animation-name: 'danmaku-center'; + animation-timing-function: linear; animation-play-state: paused; } } diff --git a/src/css/player.less b/src/css/player.less index 62952c5..fc54358 100644 --- a/src/css/player.less +++ b/src/css/player.less @@ -29,23 +29,7 @@ margin: 0; padding: 0; transform: translate(0, 0); - - .dplayer-danmaku { - .dplayer-danmaku-top, - .dplayer-danmaku-bottom { - &.dplayer-danmaku-move { - animation: danmaku-center 6s linear; - animation-play-state: inherit; - } - } - - .dplayer-danmaku-right { - &.dplayer-danmaku-move { - animation: danmaku 8s linear; - animation-play-state: inherit; - } - } - } + } &.dplayer-no-danmaku { diff --git a/src/js/danmaku.js b/src/js/danmaku.js index 029f4c9..8701a3c 100644 --- a/src/js/danmaku.js +++ b/src/js/danmaku.js @@ -3,6 +3,7 @@ import utils from './utils'; class Danmaku { constructor(options) { this.options = options; + this.player = this.options.player; this.container = this.options.container; this.danTunnel = { right: {}, @@ -254,6 +255,7 @@ class Danmaku { if (tunnel >= 0) { // move item.classList.add('dplayer-danmaku-move'); + item.style.animationDuration = this._danAnimation(dan[i].type); // insert docFragment.appendChild(item); @@ -343,6 +345,21 @@ class Danmaku { unlimit(boolean) { this.unlimited = boolean; } + + speed(rate) { + this.options.api.speedRate = rate; + } + + _danAnimation(position) { + const rate = this.options.api.speedRate || 1; + const isFullScreen = !!this.player.fullScreen.isFullScreen(); + const animations = { + top: `${(isFullScreen ? 6 : 4) / rate}s`, + right: `${(isFullScreen ? 8 : 5) / rate}s`, + bottom: `${(isFullScreen ? 6 : 4) / rate}s`, + }; + return animations[position]; + } } export default Danmaku; diff --git a/src/js/player.js b/src/js/player.js index eb4bc85..96c5114 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -79,6 +79,7 @@ class DPlayer { if (this.options.danmaku) { this.danmaku = new Danmaku({ + player: this, container: this.template.danmaku, opacity: this.user.get('opacity'), callback: () => { @@ -106,6 +107,7 @@ class DPlayer { maximum: this.options.danmaku.maximum, addition: this.options.danmaku.addition, user: this.options.danmaku.user, + speedRate: this.options.danmaku.speedRate, }, events: this.events, tran: (msg) => this.tran(msg),