HarmonyOS 如何实现WaveView动画?

语音搜索的时候,按住语音按钮,下面的背景有水波纹的动画效果。

HarmonyOS
2024-09-27 11:19:15
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang
@Entry  
@Component  
struct Page240423185507109 {  
  private settings: RenderingContextSettings = new RenderingContextSettings(true)  
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  
  waveSpeed: number = 0.03  
  phase: number = 0  
  
  drawWave() {  
    this.context?.clearRect(0, 0, this.context.width, this.context.height)  
  
    this.context?.beginPath()  
    for (let x = 0; x <= this.context.width; x += 10) {  
      const y = this.context.height / 2 + Math.sin(x * 0.01 + this.phase) * 20  
      this.context?.lineTo(x, y)  
    }  
    this.context?.lineTo(this.context.width, this.context.height)  
    this.context?.lineTo(0, this.context.height)  
    this.context?.closePath()  
  
    this.context.fillStyle = '#30007bff'  
    this.context?.fill()  
  
    this.context?.beginPath()  
    for (let x = 0; x <= this.context.width; x += 10) {  
      const y = this.context.height / 2 + Math.sin(x * 0.02 + this.phase) * 10  
      this.context?.lineTo(x, y)  
    }  
    this.context?.lineTo(this.context.width, this.context.height)  
    this.context?.lineTo(0, this.context.height)  
    this.context?.closePath()  
  
    this.context.fillStyle = '#50007bff'  
    this.context?.fill()  
  
    this.context?.beginPath()  
    for (let x = 0; x <= this.context.width; x += 10) {  
      const y = this.context.height / 2 + Math.sin(x * 0.015 + this.phase) * 30  
      this.context?.lineTo(x, y)  
    }  
    this.context?.lineTo(this.context.width, this.context.height)  
    this.context?.lineTo(0, this.context.height)  
    this.context?.closePath()  
  
    this.context.fillStyle = '#20007bff'  
    this.context?.fill()  
  
    this.phase += this.waveSpeed  
  }  
  
  build() {  
    Column() {  
      Canvas(this.context)  
        .width(200)  
        .height(100)  
        .backgroundColor(Color.Pink)  
        .onReady(() => {  
          setInterval(this.drawWave.bind(this), 20)  
        })  
    }.width("100%").height("100%").justifyContent(FlexAlign.Center)  
  }  
}

具体实现逻辑:

this.context?.beginPath()  
for (let x = 0; x <= this.context.width; x += 10) {  
  const y = this.context.height / 2 + Math.sin(x * 0.01 + this.phase) * 20  
  this.context?.lineTo(x, y)  
}  
this.context?.lineTo(this.context.width, this.context.height)  
this.context?.lineTo(0, this.context.height)  
this.context?.closePath()  
  
this.context.fillStyle = '#30007bff'  
this.context?.fill()

这一段代码,就是一条水波纹。

分享
微博
QQ
微信
回复
2024-09-27 17:06:56
相关问题
HarmonyOS 如何实现RippleView动画
1204浏览 • 1回复 待解决
HarmonyOS canvas动画如何实现逐帧动画
1167浏览 • 1回复 待解决
HarmonyOS 组合动画如何实现
831浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
3235浏览 • 1回复 待解决
HarmonyOS 如何实现动画集合?
1267浏览 • 1回复 待解决
HarmonyOS如何实现动态缩放动画
1251浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动画
1428浏览 • 1回复 待解决
HarmonyOS 如何实现音频声浪动画
1992浏览 • 1回复 待解决
HarmonyOS 动画实现
1380浏览 • 1回复 待解决
如何应用属性动画实现宽高的动画
1293浏览 • 1回复 待解决
如何实现动画转场效果
2143浏览 • 1回复 待解决
HarmonyOS 如何实现呼吸灯动画
1731浏览 • 1回复 待解决
鸿蒙如何实现动画值变化
10153浏览 • 1回复 待解决
文字动画效果如何实现
3866浏览 • 0回复 待解决
求教ArkUI如何实现组合动画
6548浏览 • 1回复 待解决
HarmonyOS router跳转动画如何实现
759浏览 • 1回复 待解决
HarmonyOS 如何实现放大缩小的动画
1551浏览 • 1回复 待解决
HarmonyOS Canvas 实现动画
1489浏览 • 1回复 待解决
HarmonyOS Canvas的动画实现
725浏览 • 1回复 待解决
渐变动画效果如何实现
531浏览 • 0回复 待解决
HarmonyOS 动画效果实现
1462浏览 • 1回复 待解决
HarmonyOS动画用什么实现
1203浏览 • 1回复 待解决
HarmonyOS clipShape 动画效果实现
1215浏览 • 0回复 待解决
HarmonyOS 点赞动画实现方案
1311浏览 • 1回复 待解决