微信小程序css3实现音乐浪效果

好吧，我又来了，继续上一篇laji项目，为什么写这个呢，因为闲的。

开始之前大家要是想实现更好的效果可以参考以下这篇文章：微信小程序实现音乐浪_喵小花儿和喵小胖儿的博客-CSDN博客

多的不说了，还是直接上代码吧，懂的都懂，不懂我也没办法了，因为我也不懂。

<view class="wavys">
    <view wx:for="{{wavys}}" wx:key="index" class="wavy" style="animation-duration:{{item.duration}}ms;left:{{item.left}};background: {{item.color}};"></view>
</view>

其实我不想把样式放上来的，怕自己后面忘了呢

.wavys {
  width: 90%;
  height: 200rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  bottom: 100rpx;
}

.wavy {
  background: #795548;
  height: 0;
  flex: 1;
  margin: 0 1px;
  animation: voice linear infinite alternate-reverse;
}

@keyframes voice {
  0% {
    height: 0;
    opacity: 0.35;
  }
  100% {
    height: 100%;
    opacity: 1;
  }
}

接下来就是JS了：

Page({
  data: {
    wavys: [],
  },

  onLoad(options) {
    const wavyCount = 30; // 柱状图的条数
    const maxDuration = 1000; // 最长动画持续时间
    const wavyWidthPercent = 100 / wavyCount; // 单个柱状图占整个盒子的百分比
    const wavyWidthPx = 2; // 单个柱状图的宽度（px）
    let durationSum = 0; // 动画持续时间之和，用于计算动画延迟开始时间
    let hue = 0; // HSL色轮起始角度
    const wavys = [];
    for (let i = 0; i < wavyCount; i++) {
      const duration = 0.5 * maxDuration + Math.random() * 0.5 * maxDuration;
      durationSum += duration;

      const color = `linear-gradient(to top, hsl(${hue}, 70%, 80%), hsl(${hue}, 60%, 60%))`;
      hue += (360 / wavyCount);
      
      wavys.push({
        color, // 渐变色
        duration,
        left: `${wavyWidthPercent * i + (wavyWidthPercent - wavyWidthPx) / 2}%`,
      });
    }

    // 计算动画延迟开始时间
    let delaySum = 0;
    for (let i = 0; i < wavyCount; i++) {
      const wavy = wavys[i];
      const delay = durationSum === 0 ? 0 : (1 - wavy.duration / durationSum) * (maxDuration - 200);
      delaySum += delay;
      wavy.animationDelay = `${delaySum}ms`;
    }

    this.setData({
      wavys: wavys,
    });
  },

})

 诶~~~，到这之后可能有和我一样的小菜就会问了，这js写的都是啥意思啊，额~~~我也不知道（问ai的）,能用就行了。

最后看一下效果吧（是会动的哟）

效果图

完结，撒花~~~