微信小プログラム生中継点賛コンポーネントと原理の浅い分析

原理:
a.3つの異なる3次ベッセル曲線を描くことによって、3枚の画像を選択してそれぞれのベッセル曲線に沿って運動させ、運動軌跡は以下の図の通りである.
b.3次ベッセル曲線x(t),y(t)の数学式を計算する.3次ベッセル曲線は、4つの点によって1つの曲線、2つの制御点、1つの起点、1つの終点を形成します.多項式係数を用いてx,yの数学式を得ることができる.

const p0 = data[0]; //             
      const p1 = data[1]; //                 
      const p2 = data[2]; //                 
      const p3 = data[3]; //             

      const t = factor.t;

      /*       */
      const cx1 = 3 * (p1.x - p0.x);
      const bx1 = 3 * (p2.x - p1.x) - cx1;
      const ax1 = p3.x - p0.x - cx1 - bx1;

      const cy1 = 3 * (p1.y - p0.y);
      const by1 = 3 * (p2.y - p1.y) - cy1;
      const ay1 = p3.y - p0.y - cy1 - by1;

      /*  xt yt   */
      const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x;
      const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y;
      return {
        x,
        y
      };

ここには3本のベッセル曲線が描かれており、式を3回適用すればよいが、ここではループを採用していない.ベッセル曲線の線数が比較的多い場合、ctxをループ呼び出してもよい.factor.tは3次ベッセル曲線のパラメータであり、値範囲[0,1]をとり、最後にctxを呼び出す.draw()を設定し、タイマを設定すると、ベッセル曲線に沿って画像が動きます.
完全なソースはgithubを参照してください:https://github.com/ruanhongbiao/live-like-miniapp-masterstarと意見を歓迎します!