WeChat 미니 프로그램 위젯은 Canvas 기반으로 라이브 방송과 같은 버블 효과를 구현합니다.

이 글에서는 위챗 미니 프로그램 위젯을 위주로 자세하게 소개하고 있으며, Canvas를 기반으로 라이브 방송과 같은 효과를 구현하고 있으니 관심 있는 친구들이 참고하시면 좋을 것 같습니다.

첫 번째 게시물 Canvas 구현입니다. 버블 효과와 같은 라이브 방송 다이어그램:

구현 세부 사항:

1.JS:

drawImage:function(data){[/align]
    var that = this
    var p10= data[0][0];  /* 三阶贝塞尔曲线起点坐标值*/
    var p11= data[0][1];  /* 三阶贝塞尔曲线第一个控制点坐标值*/
    var p12= data[0][2];  /* 三阶贝塞尔曲线第二个控制点坐标值*/
    var p13= data[0][3];  /* 三阶贝塞尔曲线终点坐标值*/
    var p20= data[1][0];
    var p21= data[1][1];
    var p22= data[1][2];
    var p23= data[1][3];
    var p30= data[2][0];
    var p31= data[2][1];
    var p32= data[2][2];
    var p33= data[2][3];
    var t = factor.t;
    /*计算多项式系数 （下同）*/  
    var cx1 = 3*(p11.x-p10.x);
    var bx1 = 3*(p12.x-p11.x)-cx1;
    var ax1 = p13.x-p10.x-cx1-bx1;
    var cy1 = 3*(p11.y-p10.y);
    var by1 = 3*(p12.y-p11.y)-cy1;
    var ay1 = p13.y-p10.y-cy1-by1;
    var xt1 = ax1*(t*t*t)+bx1*(t*t)+cx1*t+p10.x;
    var yt1 = ay1*(t*t*t)+by1*(t*t)+cy1*t+p10.y;
    var cx2 = 3*(p21.x-p20.x);
    var bx2 = 3*(p22.x-p21.x)-cx2;
    var ax2 = p23.x-p20.x-cx2-bx2;
    var cy2 = 3*(p21.y-p20.y);
    var by2 = 3*(p22.y-p21.y)-cy2;
    var ay2 = p23.y-p20.y-cy2-by2;
    var xt2 = ax2*(t*t*t)+bx2*(t*t)+cx2*t+p20.x;
    var yt2 = ay2*(t*t*t)+by2*(t*t)+cy2*t+p20.y;
    var cx3 = 3*(p31.x-p30.x);
    var bx3 = 3*(p32.x-p31.x)-cx3;
    var ax3 = p33.x-p30.x-cx3-bx3;
    var cy3 = 3*(p31.y-p30.y);
    var by3 = 3*(p32.y-p31.y)-cy3;
    var ay3 = p33.y-p30.y-cy3-by3;
    /*计算xt yt的值 */
    var xt3 = ax3*(t*t*t)+bx3*(t*t)+cx3*t+p30.x;
    var yt3 = ay3*(t*t*t)+by3*(t*t)+cy3*t+p30.y;
    factor.t +=factor.speed;
    ctx.drawImage("../../images/heart1.png",xt1,yt1,30,30);
    ctx.drawImage("../../images/heart2.png",xt2,yt2,30,30);
    ctx.drawImage("../../images/heart3.png",xt3,yt3,30,30);
    ctx.draw();
    if(factor.t>1){
      factor.t=0;
      cancelAnimationFrame(timer);
      that.startTimer();
    }else{
      timer =requestAnimationFrame(function(){
        that.drawImage([[{x:30,y:400},{x:70,y:300},{x:-50,y:150},{x:30,y:0}],[{x:30,y:400},{x:30,y:300},{x:80,y:150},{x:30,y:0}],[{x:30,y:400},{x:0,y:90},{x:80,y:100},{x:30,y:0}]])
     })
    }}

2.

a. 세 가지 다른 3차 베지어 곡선을 그려서 세 장의 그림을 선택하고 각각의 베지어 곡선을 따라 이동하도록 합니다.

b. 3차 베지어 곡선 x(t), y(t)의 수학적 표현을 계산합니다.

3차 베지어 곡선은 4개의 점, 2개의 제어점, 시작점 및 끝점을 통해 곡선을 형성합니다.

다항식 계수를 사용하여 x(t), y(t)의 수학적 표현식을 얻습니다.

cx = 3 * ( x1 - x0 )
bx = 3 * ( x2 - x1 ) - cx
ax = x3 - x0 - cx - bx
cy = 3 * ( y1 - y0 )    
by = 3 * ( y2 - y1 ) - cy
ay = y3 - y0 - cy - by
x(t) = ax * t ^ 3 + bx * t ^ 2 + cx * t + x0
y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0

여기에 세 개의 베지어 곡선이 그려져 있습니다. 공식을 세 번 적용하면 됩니다. 여기에서는 루프를 사용하여 베지어 곡선이 많은 경우 루프를 사용하여 ctx.drawImage를 호출할 수 있습니다. 여기서 Factor.t는 3차 베지어 곡선의 매개변수이고 값 범위는 [0,1]이며 마지막으로 ctx .draw()를 호출하고 타이머를 설정하여 베지어 곡선을 따라 움직이는 그림을 구현합니다.

3.Tip:

여기서 사용되는 타이머는 requestAnimationFrame() 함수를 통해 구현됩니다. setInterval을 사용하지 않는 이유는 실제 테스트에서 프레임 스턱 현상이 있기 때문입니다. 애니메이션 디스플레이에 미묘한 불연속성이 있습니다.

Canvas를 기반으로 라이브 방송과 같은 버블 효과를 구현하는 더 많은 WeChat 애플릿 위젯을 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!