小程序动画-循环放大缩小的动画(一闪一闪的)

var circleCount = 0;  
      // 心跳的外框动画  
      this.animationMiddleHeaderItem = wx.createAnimation({  
        duration:1000,    // 以毫秒为单位  
        timingFunction: 'linear',  
        delay: 100,  
        transformOrigin: '50% 50%',  
        success: function (res) {  
        }  
      });  
      setInterval(function() {  
        if (circleCount % 2 == 0) {  
          this.animationMiddleHeaderItem.scale(1.15).step();  
        } else {  
          this.animationMiddleHeaderItem.scale(1.0).step();  
        }  
          
        this.setData({  
          animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()  //输出动画
        });  
          
        circleCount++;  
        if (circleCount == 1000) {  
          circleCount = 0;  
        }  
      }.bind(this), 1000);  

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
对于微信小程序的音频录制,可以使用wx.getRecorderManager()来进行录音操作。同时,可以使用wx.createInnerAudioContext()来播放录制的音频文件。 至于波纹循环动画,可以使用小程序的canvas绘图功能来实现。具体实现步骤如下: 1. 在wxml文件中添加一个canvas标签,并设置其宽高和id属性。 ``` <canvas canvas-id="wave" style="width: 100%; height: 300rpx;"></canvas> ``` 2. 在js文件中获取canvas对象,并设置其属性。 ``` const ctx = wx.createCanvasContext('wave') const screenWidth = wx.getSystemInfoSync().windowWidth const screenHeight = wx.getSystemInfoSync().windowHeight const waveWidth = screenWidth * 0.8 const waveHeight = 100 const waveLeft = (screenWidth - waveWidth) / 2 const waveTop = (screenHeight - waveHeight) / 2 function drawWave(percent) { ctx.clearRect(0, 0, screenWidth, screenHeight) ctx.setLineWidth(2) ctx.setStrokeStyle('#ffffff') ctx.beginPath() for (let i = 0; i <= waveWidth; i += 20) { let x = i + waveLeft let y = waveTop + waveHeight / 2 * Math.sin((i / waveWidth) * 2 * Math.PI - percent * 2 * Math.PI) ctx.lineTo(x, y) } ctx.stroke() ctx.draw() } ``` 3. 在录音开始时,使用定时器更新波纹动画。 ``` let timer = null let startTime = null wx.getRecorderManager().onStart(() => { startTime = Date.now() timer = setInterval(() => { let duration = Date.now() - startTime let percent = duration / 5000 // 5秒循环一次 drawWave(percent) }, 1000 / 60) // 60帧每秒 }) ``` 4. 在录音结束时,清除定时器。 ``` wx.getRecorderManager().onStop(() => { clearInterval(timer) drawWave(0) }) ``` 这样就可以实现一个简单的波纹循环动画了。需要注意的是,由于小程序的canvas只支持2d绘图,所以波纹的效果只能是平面的。如果需要实现3d效果,可以考虑使用WebGL等技术。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值