css系列：音频播放效果-波纹律动

介绍

语音播放的律动效果，通俗来说就是一个带动画的特殊样式的进度条，播放的部分带有上下律动的动画，未播放的部分是普通的灰色竖状条。

实现中夹带了less变量、继承和循环遍历，可以顺带学习一下。

结果展示

大致效果如图所示，样式需要改下，动画效果bar中的上边距调整下即可。

代码

<template><div class="ripple-container"><div class="blue-ripple"><template v-for="(item, index) in rippleList"><!-- if判断是判断当前进度来展示播放还是未播放 --><div v-if="index >= Math.floor(rate * rippleList.length)" :key="index" :style="{ height: item + '%' }"></div><span v-else :key="index"></span></template></div></div>
</template><script>
export default {props: {// 当前进度，传入0.4这种数字，进度需要从0逐渐增长，直接传入一个比较大的进度只会出现空白一段的现象rate: {type: Number,default: 0.4,},},data() {return {rippleList: [40, 20, 40, 50, 70, 50, 20, 40, 30, 20, 30, 50, 100, 60, 20, 40, 30, 20, 30, 40, 70, 40, 20, 40, 40, 50, 70, 50,20, 40, 30, 20, 30, 50, 100, 60, 20,],};},
};
</script><style lang="less" scoped>
.ripple-container {.blue-ripple {width: 100%;height: 48px;display: flex;// 纵向居中align-items: center;// less变量，主题色@color: #3370ff;// 给span标签增加样式，不设置高度是因为高度在动画中// span标签用于展示波纹律动效果span {width: 3px;border-radius: 18px;margin-right: 4px;}// div继承span标签的样式，用来统一波纹条样式// div标签用于展示非正在播放的部分div {// less继承需要将所有层级的类名都写上&:extend(.ripple-container .blue-ripple span);background: rgba(0, 0, 0, 0.16);}@keyframes bar {0% {background: @color;margin-top: 5%;height: 10%;}50% {background: @color;margin-top: 0;height: 100%;}100% {background: @color;margin-top: 5%;height: 10%;}}// less循环遍历生成span的样式// 这里使用的是less的when语法，当@i小于等于@n时执行.generate-span(@n,@i:1) when(@i <= @n) {span:nth-child(@{i}) {// 这个本来是想配合.generate-keyframes使用的，但是less似乎不支持遍历生成@keyframes的名字// @name: ` "bar@{i}" `;animation: bar 2s 0.2s * @i infinite linear;}// 递归调用，生成下一个span的样式，这里when是判断是否结束的，这个递归调用用来形成遍历.generate-span(@n, @i + 1);}// 循环遍历生成keyframes，生成有问题.generate-keyframes(@n,@i:1) when(@i <= @n) {// 用less变量来解决不能直接使用@i问题@keyfaramesName: ` "bar@{i}" `;// 似乎不支持动态生成keyframes的名称@keyframes @keyfaramesName {0% {background: @color;margin-top: 5%;height: 10;}50% {background: @color;margin-top: 0;height: 100;}100% {background: @color;margin-top: 5%;height: 10;}}.generate-keyframes(@n, @i + 1);}// 调用循环遍历.generate-span(100);// .generate-keyframes(100);}
}
</style>