Update 听书模块开发.md

ChenMingK · Aug 26, 2019 · 0ad588e · 0ad588e
1 parent b13529e
commit 0ad588e
Showing 1 changed file with 172 additions and 0 deletions.
diff --git a/开发文档/听书模块开发.md b/开发文档/听书模块开发.md
@@ -267,3 +267,175 @@ onAudioEnded() {
 }
 ```
 ended 事件会在音频播放完毕后触发，我们可以将时间和进度重置以及改变播放状态来控制相应组件的渲染。
+
+## 音乐播放时的小动画
+<img src="https://github.com/ChenMingK/ImagesStore/blob/master/imgs/musicplaying.gif" width=200px/>
+
+音乐播放的 App 经常会有这种线条跳动的动画，可以将其抽离为一个组件，暴露如下一些接口：
+
+- props: number 表示线条数目
+- method: startAnimation() 用于开始动画，stopAnimation() 用于停止动画，动画比较简单就是开启一个定时任务每隔一定时间改变线条高度
+```html
+<template>
+  <div class="playing-item-wrapper">
+    <div class="playing-item" :style="item" v-for="(item, index) in styles" :key="index" ref="playingItem"></div>
+  </div>
+</template>
+
+<script>
+  import { px2rem } from '@/utils/utils'
+
+  export default {
+    props: {
+      number: Number
+    },
+    computed: {
+      styles() {
+        const styles = new Array(this.number)
+        for (let i = 0; i < styles.length; i++) {
+          styles[i] = {
+            height: px2rem(this.random()) + 'rem' // 随机产生竖线
+          }
+        }
+        return styles
+      }
+    },
+    methods: {
+      startAnimation() { // 高度随机改变200ms
+        this.task = setInterval(() => {
+          this.$refs.playingItem.forEach(item => {
+            item.style.height = px2rem(this.random()) + 'rem'
+          })
+        }, 200)
+      },
+      stopAnimation() {
+        if (this.task) {
+          clearInterval(this.task)
+        }
+      },
+      random() {
+        return Math.ceil(Math.random() * 10) // 0~10随机数向上取整
+      }
+    }
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+  @import "../../assets/styles/global";
+
+  .playing-item-wrapper {
+    @include center;
+    .playing-item {
+      flex: 0 0 px2rem(2);
+      width: px2rem(2);
+      height: px2rem(1);
+      background: $color-blue;
+      margin-left: px2rem(2);
+      transition: all .2s ease-in-out;
+      &:first-child {
+        margin: 0;
+      }
+    }
+  }
+</style>
+```
+单独的 demo 如下：
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Bookmark</title>
+  <style>
+    #app {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    .playing-item-wrap {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100px; /* 演示需要，使用时 wrpper 不设置宽高 */
+      height: 100px;
+      margin: auto;
+      display: flex;
+    }
+    .playing-item {
+      flex: 0 0 20px;
+      width: 20px;
+      height: 10px;
+      background: skyblue;
+      margin-left: 2px;
+      transition: all .2s ease-in-out;
+    }
+    .playing-item:first-child {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="playing-item-wrap">
+      <div class="playing-item" :style="item" v-for="(item, index) in styles" :key="item" ref="playingItem"></div>
+    </div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+</body>
+</html>
+
+<script>
+  let app = new Vue({
+    el: '#app',
+    // 线条数目可以由父组件来传递
+    // props: {
+    //   number: Number
+    // },
+    data: {
+      number: 6 // 
+    },
+    computed: {
+      styles () {
+        const styles = new Array(this.number)
+        for (let i = 0; i < styles.length; i++) {
+          styles[i] = {
+            height: this.random() + 'px' // 高度随机
+          }
+        }
+        return styles
+      }
+    },
+    methods: {
+      startAnimation () { // 高度每 200ms 随机改变
+        this.task = setInterval(() => {
+          this.$refs.playingItem.forEach(item => {
+            item.style.height = this.random() + 'px'
+          })
+        }, 200)
+      },
+      stopAnimation () {
+        if (this.task) {
+          clearInterval(this.task)
+        }
+      },
+      random () {
+        return Math.ceil(Math.random() * 30) // 0 ~ 10 随机数向上取整
+      }
+    },
+    mounted () {
+      this.startAnimation()
+    }
+  })
+  
+</script>
+```