feat(music): mini-player animation

ninenan · Jul 4, 2021 · a24aeba · a24aeba
1 parent 239b7b5
commit a24aeba
Show file tree

Hide file tree

Showing 5 changed files with 259 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@better-scroll/slide": "^2.3.1",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "create-keyframe-animation": "^0.1.0",
     "lyric-parser": "^1.0.1",
     "mitt": "^2.1.0",
     "register-service-worker": "^1.7.1",

diff --git a/src/components/Player/Player.vue b/src/components/Player/Player.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="player" v-show="playlist.length">
-    <transition name="normal">
+    <transition
+      name="normal"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @leave="leave"
+      @after-leave="afterLeave"
+    >
       <div class="normal-player" v-show="fullScreen">
         <div class="background">
           <img :src="currentSong.pic" />
@@ -146,14 +152,16 @@ import useCd from "@/hooks/useCd";
 import useMiddleInteractive, {
   IUseMiddleInteractive,
 } from "@/hooks/useMiddleInteractive";
+import useAnimation, { IUseAnimation } from "@/hooks/useAnimation";
 // utils
 import { formatTime } from "@/helpers/utils";
 
 interface IPlayer
   extends IUseMode,
     IUseFavorites,
     IUseLyric,
-    IUseMiddleInteractive {
+    IUseMiddleInteractive,
+    IUseAnimation {
   playlist: Ref<ISingerDetailsInfo[]>;
   currentSong: Ref<ISingerDetailsInfo>;
   fullScreen: Ref<boolean>;
@@ -272,6 +280,13 @@ export default {
       onMiddleTouchMove,
       onMiddleTouchEnd,
     } = useMiddleInteractive();
+    const {
+      cdWrapperRef,
+      enter,
+      afterEnter,
+      leave,
+      afterLeave,
+    } = useAnimation();
     /**
      * 返回
      */
@@ -450,6 +465,12 @@ export default {
       onMiddleTouchStart,
       onMiddleTouchMove,
       onMiddleTouchEnd,
+      // useAnimation
+      cdWrapperRef,
+      enter,
+      afterEnter,
+      leave,
+      afterLeave,
     };
   },
 };

diff --git a/src/hooks/useAnimation.ts b/src/hooks/useAnimation.ts
@@ -0,0 +1,117 @@
+/*
+ * @Author: NineNan
+ * @Date: 2021-07-02 20:54:52
+ * @LastEditTime: 2021-07-04 20:26:31
+ * @LastEditors: Please set LastEditors
+ * @Description: useAnimation
+ * @FilePath: /study_vue03/src/hooks/useAnimation.ts
+ */
+import { ref, Ref } from "vue";
+import animations from "create-keyframe-animation";
+
+export interface IUseAnimation {
+  cdWrapperRef: Ref<HTMLElement | null>;
+  enter: (el: HTMLElement, done: any) => void;
+  afterEnter: () => void;
+  leave: (el: HTMLElement, done: any) => void;
+  afterLeave: () => void;
+}
+
+export default function useAnimation(): IUseAnimation {
+  const cdWrapperRef = ref<HTMLElement | null>(null);
+  let entering = false;
+  let leaving = false;
+
+  const getPosAndScale = () => {
+    const targetWidth = 40;
+    const paddingLeft = 40;
+    const paddingBottom = 30;
+    const paddingTop = 80;
+    const width = window.innerWidth * 0.8;
+    const x = -(window.innerWidth / 2 - paddingLeft);
+    const y = window.innerHeight - paddingTop - width / 2 - paddingBottom;
+    const scale = targetWidth / width;
+    console.log("object :>> ", {
+      x,
+      y,
+      scale,
+    });
+    return {
+      x,
+      y,
+      scale,
+    };
+  };
+
+  const enter = (el: HTMLElement, done: any) => {
+    if (leaving) {
+      afterLeave();
+    }
+    entering = true;
+    const { x, y, scale } = getPosAndScale();
+
+    const animation = {
+      0: {
+        transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+      },
+      100: {
+        transform: `translate3d(0, 0, 0) scale(1)`,
+      },
+    };
+
+    animations.registerAnimation({
+      name: "move",
+      animation,
+      presets: {
+        duration: 600,
+        easing: "cubic-bezier(0.45, 0, 0.55, 1)",
+      },
+    });
+
+    animations.runAnimation(cdWrapperRef.value, "move", done);
+  };
+
+  const afterEnter = () => {
+    entering = false;
+    animations.unregisterAnimation("move");
+    (cdWrapperRef.value as HTMLElement).style.animation = "";
+  };
+
+  const leave = (el: HTMLElement, done: any) => {
+    if (entering) {
+      afterEnter();
+    }
+
+    leaving = true;
+    const { x, y, scale } = getPosAndScale();
+    const cdWrapperEl = cdWrapperRef.value;
+    if (cdWrapperEl) {
+      cdWrapperEl.style.transition = "all .6s cubic-bezier(0.45, 0, 0.55, 1)";
+      cdWrapperEl.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
+      cdWrapperEl.addEventListener("transitionend", next);
+    }
+
+    function next() {
+      cdWrapperEl?.removeEventListener("transitionend", next);
+      done();
+    }
+  };
+
+  const afterLeave = () => {
+    leaving = false;
+    const cdWrapperEL = cdWrapperRef.value;
+
+    if (cdWrapperEL) {
+      cdWrapperEL.style.transition = "";
+      cdWrapperEL.style.transform = "";
+    }
+  };
+
+  return {
+    cdWrapperRef,
+    enter,
+    afterEnter,
+    leave,
+    afterLeave,
+  };
+}
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
@@ -4,3 +4,5 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+declare module "create-keyframe-animation";
diff --git a/yarn.lock b/yarn.lock
@@ -3751,6 +3751,17 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-keyframe-animation@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npm.taobao.org/create-keyframe-animation/download/create-keyframe-animation-0.1.0.tgz#06b8f3e08ecfb53f807eed91043e5ca1c40d5987"
+  integrity sha1-Brjz4I7PtT+Afu2RBD5cocQNWYc=
+  dependencies:
+    load-styles "^2.0.0"
+    lodash.defaults "^3.1.2"
+    native-promisify-if-present "^1.0.1"
+    prefixed-event "^1.0.4"
+    transform-property "0.0.1"
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -6333,6 +6344,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=
 
+is-function@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/is-function/download/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+  integrity sha1-Twl/MKv2762smDOxfKXcA/gUTgg=
+
 is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/is-generator-fn/download/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -7282,6 +7298,11 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-styles@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/load-styles/download/load-styles-2.0.0.tgz#a0901c8f80ef0c869454eb580b4efc2f0be48471"
+  integrity sha1-oJAcj4DvDIaUVOtYC078LwvkhHE=
+
 loader-fs-cache@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.3.tgz#f08657646d607078be2f0a032f8bd69dd6f277d9"
@@ -7338,11 +7359,57 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash._baseassign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/lodash._baseassign/download/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
+  integrity sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npm.taobao.org/lodash._basecopy/download/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+  integrity sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=
+
+lodash._bindcallback@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npm.taobao.org/lodash._bindcallback/download/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
+  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
+
+lodash._createassigner@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.npm.taobao.org/lodash._createassigner/download/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
+  integrity sha1-g4pbri/aymOsIt7o4Z+k5taXCxE=
+  dependencies:
+    lodash._bindcallback "^3.0.0"
+    lodash._isiterateecall "^3.0.0"
+    lodash.restparam "^3.0.0"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.npm.taobao.org/lodash._getnative/download/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
+
+lodash._isiterateecall@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.npm.taobao.org/lodash._isiterateecall/download/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+  integrity sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/lodash._reinterpolate/download/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.assign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/lodash.assign/download/lodash.assign-3.2.0.tgz#3ce9f0234b4b2223e296b8fa0ac1fee8ebca64fa"
+  integrity sha1-POnwI0tLIiPilrj6CsH+6OvKZPo=
+  dependencies:
+    lodash._baseassign "^3.0.0"
+    lodash._createassigner "^3.0.0"
+    lodash.keys "^3.0.0"
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npm.taobao.org/lodash.camelcase/download/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -7353,16 +7420,43 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.npm.taobao.org/lodash.debounce/download/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.defaults@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npm.taobao.org/lodash.defaults/download/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
+  integrity sha1-xzCLGNv4vJNy1wGnNJPGEZK9Liw=
+  dependencies:
+    lodash.assign "^3.0.0"
+    lodash.restparam "^3.0.0"
+
 lodash.defaultsdeep@^4.6.1:
   version "4.6.1"
   resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
   integrity sha1-US6b1yHSctlOPTpjZT+hdRZ0HKY=
 
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/lodash.isarguments/download/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+  integrity sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.npm.taobao.org/lodash.isarray/download/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+  integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=
+
 lodash.kebabcase@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
   integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
 
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.npm.taobao.org/lodash.keys/download/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  integrity sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
 lodash.map@^4.5.1:
   version "4.6.0"
   resolved "https://registry.npm.taobao.org/lodash.map/download/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
@@ -7378,6 +7472,11 @@ [email protected], lodash.memoize@^4.1.2:
   resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.restparam@^3.0.0:
+  version "3.6.1"
+  resolved "https://registry.npm.taobao.org/lodash.restparam/download/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npm.taobao.org/lodash.sortby/download/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -7897,6 +7996,13 @@ nanomatch@^1.2.1, nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+native-promisify-if-present@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/native-promisify-if-present/download/native-promisify-if-present-1.0.1.tgz#78c79b0dc39c5a94b3ad0f4677d64b7170f482e2"
+  integrity sha1-eMebDcOcWpSzrQ9Gd9ZLcXD0guI=
+  dependencies:
+    is-function "^1.0.1"
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npm.taobao.org/natural-compare/download/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -9093,6 +9199,11 @@ posthtml@^0.9.2:
     posthtml-parser "^0.2.0"
     posthtml-render "^1.0.5"
 
+prefixed-event@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/prefixed-event/download/prefixed-event-1.0.4.tgz#23e925cdfb109aaeaa41ec91d38c91c511042aa7"
+  integrity sha1-I+klzfsQmq6qQeyR04yRxREEKqc=
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -10838,6 +10949,11 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+[email protected]:
+  version "0.0.1"
+  resolved "https://registry.npm.taobao.org/transform-property/download/transform-property-0.0.1.tgz#4863662f9d5e5bb8f0c00648eff08beb14fd65f2"
+  integrity sha1-SGNmL51eW7jwwAZI7/CL6xT9ZfI=
+
 traverse@^0.6.6:
   version "0.6.6"
   resolved "https://registry.npm.taobao.org/traverse/download/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"