微信小程序下这种波浪进度条布局效果怎么实现？

Question

如效果图所示，需要实现这种波浪形的布局效果，底部背景色的高度需要随着百分比的变化而变化，请教下怎么实现？

目前的想法是截取曲线那一部分当作背景图，底下颜色深的部分设置背景色，再动态设置高度。但是这样感觉不太合适。想问下有没有更好的思路。是微信小程序中的需求。

Answer 1

看这个
https://juejin.im/post/5b4ffa...

Answer 2

wxml:
  view:
    style:
      width: N
      height: N
      border: N
      border-radius: 50%
      overflow: hidden
    children:
      image:
        style:
            width: 100%
            height: 100%
            transform: translate(0, 100-进度=结果%) translateZ(0);
        src: SVG[path+animate=高清] || PNG[位图+transform=标清]