3 lines
5.1 KiB
JavaScript
3 lines
5.1 KiB
JavaScript
"use strict";const h=require("../../../common/vendor.js"),p={props:{isPlaying:{type:Boolean,default:!1},bpm:{type:Number,default:110}},data(){return{canvasWidth:320,canvasHeight:400,ctx:null,timer:null,renderRunning:!1,coreScale:1,coreTargetScale:1,coreVelocity:0,pressed:!1,time:0,lastFrameTime:0,lastBeatTime:0,waveAmplitudeMultiplier:1,shockwaves:[],ringAngle:0}},mounted(){this.initCanvas()},beforeUnmount(){this.timer&&(clearTimeout(this.timer),this.timer=null),this.renderRunning=!1},watch:{isPlaying(e){e&&(this.waveAmplitudeMultiplier=1,this.ensureRenderLoop())}},methods:{initCanvas(){setTimeout(()=>{h.index.createSelectorQuery().in(this).select(".walker-canvas-container").boundingClientRect(t=>{if(t&&t.width>0)this.canvasWidth=t.width,this.canvasHeight=t.height>100?t.height:t.width*1.2;else{const o=h.index.getSystemInfoSync();this.canvasWidth=o.windowWidth-30,this.canvasHeight=this.canvasWidth*1.2}this.ctx||(this.ctx=h.index.createCanvasContext("walker",this),this.lastFrameTime=Date.now(),this.ensureRenderLoop())}).exec()},100)},triggerBeat(){const e=Math.min(this.canvasWidth,this.canvasHeight)*.32;this.shockwaves.push({radius:e,maxRadius:e*2.2,opacity:1}),this.waveAmplitudeMultiplier=2.5,this.coreVelocity-=.05,this.ensureRenderLoop()},onTouchStart(e){const t=e.touches[0];if(!t)return;const o=this.canvasWidth/2,i=this.canvasHeight/2-30,c=Math.min(this.canvasWidth,this.canvasHeight)*.32,n=t.x-o,s=t.y-i;Math.sqrt(n*n+s*s)<=c+40&&(this.pressed=!0,this.coreTargetScale=.9,this.ensureRenderLoop())},onTouchMove(e){if(!this.pressed)return;const t=e.touches[0];if(!t)return;const o=this.canvasWidth/2,i=this.canvasHeight/2-30,c=Math.min(this.canvasWidth,this.canvasHeight)*.32,n=t.x-o,s=t.y-i;Math.sqrt(n*n+s*s)>c+40&&(this.pressed=!1,this.coreTargetScale=1)},onTouchEnd(){this.coreTargetScale=1,this.pressed&&this.$emit("toggle-play"),this.pressed=!1},onTouchCancel(){this.coreTargetScale=1,this.pressed=!1},ensureRenderLoop(){this.renderRunning||(this.renderRunning=!0,this.renderLoop())},renderLoop(){this.isPlaying?this.time+=.016:this.time+=.016*.2;const t=120,o=12,i=(this.coreTargetScale-this.coreScale)*t;this.coreVelocity+=i*.016,this.coreVelocity*=Math.exp(-o*.016),this.coreScale+=this.coreVelocity*.016,this.waveAmplitudeMultiplier>1?(this.waveAmplitudeMultiplier-=.016*3,this.waveAmplitudeMultiplier<1&&(this.waveAmplitudeMultiplier=1)):!this.isPlaying&&this.waveAmplitudeMultiplier>.1&&(this.waveAmplitudeMultiplier-=.016*2,this.waveAmplitudeMultiplier<.1&&(this.waveAmplitudeMultiplier=.1)),this.draw(),this.ctx.draw(!1),this.isPlaying||this.shockwaves.length>0||Math.abs(this.coreScale-this.coreTargetScale)>=.001||Math.abs(this.coreVelocity)>=.001||this.waveAmplitudeMultiplier>.11?this.timer=setTimeout(()=>{this.renderLoop()},1e3/60):(this.timer=null,this.renderRunning=!1)},draw(){const e=this.ctx,t=this.canvasWidth,o=this.canvasHeight;e.clearRect(0,0,t,o);const i=Math.min(t,o)*.32,c=t/2,n=o/2-30;for(let d=this.shockwaves.length-1;d>=0;d--){const r=this.shockwaves[d];if(r.radius+=(r.maxRadius-r.radius)*.08,r.opacity-=.03,r.opacity<=0){this.shockwaves.splice(d,1);continue}e.beginPath(),e.arc(c,n,r.radius,0,Math.PI*2),e.strokeStyle=`rgba(16, 185, 129, ${r.opacity*.5})`,e.lineWidth=3,e.stroke()}this.drawWaves(e,t,o),e.save(),e.translate(c,n),e.scale(this.coreScale,this.coreScale),e.setShadow(0,12,24,"rgba(16, 185, 129, 0.3)");const s=e.createLinearGradient(-i,-i,i,i);s.addColorStop(0,"#34d399"),s.addColorStop(1,"#047857"),e.beginPath(),e.arc(0,0,i,0,Math.PI*2),e.fillStyle=s,e.fill(),e.setShadow(0,0,0,"transparent"),e.beginPath(),e.arc(0,0,i-2,0,Math.PI*2),e.strokeStyle="rgba(255, 255, 255, 0.35)",e.lineWidth=2,e.stroke();const l=Math.floor(i*.7);e.fillStyle="#ffffff",e.font=`bold ${l}px "DIN Condensed", "Inter", sans-serif`,e.textAlign="center",e.textBaseline="middle",e.fillText(this.bpm.toString(),0,-12),e.fillStyle="rgba(255, 255, 255, 0.85)",e.font='500 16px "Inter", sans-serif',e.fillText("BPM",0,i*.3),e.fillStyle="#ffffff";const a=i*.55;this.isPlaying?(e.fillRect(-8,a-6,5,14),e.fillRect(3,a-6,5,14)):(e.beginPath(),e.moveTo(-5,a-8),e.lineTo(9,a),e.lineTo(-5,a+8),e.closePath(),e.fill()),e.restore()},drawWaves(e,t,o){const i=o*.82,c=o*.08,n=[{color:"rgba(52, 211, 153, 0.3)",speed:1.5,freq:.012,amp:c*.7,offset:0},{color:"rgba(16, 185, 129, 0.6)",speed:2.5,freq:.015,amp:c,offset:Math.PI}],s=this.waveAmplitudeMultiplier,l=this.time;n.forEach(a=>{e.beginPath(),e.moveTo(0,o),e.lineTo(0,i);const d=25;for(let u=0;u<=t;u+=d){const f=i+Math.sin(u*a.freq+l*a.speed+a.offset)*a.amp*s;e.lineTo(u,f)}const r=i+Math.sin(t*a.freq+l*a.speed+a.offset)*a.amp*s;e.lineTo(t,r),e.lineTo(t,o),e.closePath(),e.fillStyle=a.color,e.fill()})}}};function m(e,t,o,i,c,n){return{a:c.canvasWidth+"px",b:c.canvasHeight+"px",c:h.o((...s)=>n.onTouchStart&&n.onTouchStart(...s),"a1"),d:h.o((...s)=>n.onTouchMove&&n.onTouchMove(...s),"c5"),e:h.o((...s)=>n.onTouchEnd&&n.onTouchEnd(...s),"fe"),f:h.o((...s)=>n.onTouchCancel&&n.onTouchCancel(...s),"2c")}}const g=h._export_sfc(p,[["render",m],["__scopeId","data-v-782dd882"]]);wx.createComponent(g);
|
|
//# sourceMappingURL=../../../../.sourcemap/mp-weixin/training/pages/components/walker-canvas.js.map
|