feature: issues:#161 Add danmaku speed control

DIYgod · Aug 15, 2022 · 6d7d9f3 · 6d7d9f3 · wdssmq · Oct 10, 2023
1 parent c162fcc
commit 6d7d9f3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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),