ホームページ > 記事 > ウェブフロントエンド > HTML5 での画像の放物線運動に関するヒントを共有する

HTML5 での画像の放物線運動に関するヒントを共有する

小云云オリジナル: 2018-01-11 10:17:482994ブラウズ

この記事では、h5 での画像の放物線運動についての考え方を中心に、ベジェ曲線に沿った運動方法について詳しく紹介します。興味のある方は参考にしていただければ幸いです。。

一般に、放物線、より正確にはベジェ曲線に沿ってオブジェクトや画像を移動することは、H5 開発の一般的な要件です。そのため、設計草案に基づいて移動パスを迅速に計算する方法が、開発者が解決する最初の問題です。

ここでの H5 開発で一般的に使用されるデザインドラフトサイズは 640 * 1008 であるため、このサイズに基づく解決策のアイデアは次のとおりです:

まず、デザインの場合、PS で置き換えられる要素を個別に PNG にエクスポートします。ドラフトが計画されている場合は、そのルートを png としてエクスポートする必要もあります

2. AI でデザインドラフトと同じサイズの新しいファイルを作成し、そのファイルにディスプレイスメント要素を 2 回ドラッグします。モーションルートがある場合は、以下のようにドラッグして入力します:

ここで注意する必要があるのは、パスの始点と終点です。画像の移動点に対応します。対応する状況は次のとおりです。

キャンバスキャンバス内の変形処理がないため、移動点は画像の左上隅になります。変換および移動されるのは、translate(x1, y1) 、 sWidth, sHeight, dx, dy, dWidth, dHeight) の x1 と y1 および dx と dy の最終オフセットに従って追加されるためです。
要素がposition:absoluteによって配置され、その位置がtransformのtranslate3d(x, y, z)によって制御される場合、オフセットは通常、transformでは、left、top、およびを模倣します。要素の位置を制御するために追加のマージンを追加し、transform で追加の translation3D(marginLeftX, marginLeftY, 0) を追加することも必要です。このマージンの値を考慮してください。
3 を使用します。以下の図に示すように、AI で基準線を引き出し、要素画像を移動してその x、y 位置を引き出します:

次に、ペンツールを選択し、始点と終点をクリックします。続けて、終点をクリックした後マウスを放さず、AI を直接ドラッグすると、2 つの制御点が自動的に追加され、マウスを移動することで 2 つの制御点の位置を調整できます。パスの目的を調整します。ペンツールによって生成されたパスは、以下に示すように、デザインドラフト上の基準線のパスと一致するまで続きます。

目的の位置までドラッグした後、マウスを放し、キーボードの Enter キーを押してパスを確認します。パスが希望どおりでない場合は、コントロールポイントをドラッグして調整を続けることができます

4. 調整が完了したら、追加の 2 本の参照線をコントロールポイント 1 の位置にドラッグし、メニューバーを使用します。 --ウィンドウ--情報、情報パネルを開き、始点、制御点、終点、3つの点の座標をそれぞれ取り出します

5、それぞれ制御点、終点、始点のピクセル差を計算します。、H5 で置き換えられる画像の実際の x、y に基づいて、座標値とピクセルの差を計算して、実際の制御点と終点の座標を取得します。次に、これら 3 つの座標点を式に適用します。

。

コードをコピーします

コードは次のとおりです: var path = getBezierPath([278 + 119, 572 - 32], [ 278 - 4, 572 - 137] , [278 + 119, 572 - 32 ] , [278, 572], 50);

ここで、パラメーター getBezierPath (終点、制御点 1、制御点 2、開始点、移動数) です。制御点 2 がない場合は、そのまま記入します。 getBezierPath の最終的な式は次のとおりです:

function getBezierPath(p1, p2, p3, p4, times) {
    function Point2D(x,y){  
        this.x = x || 0.0;  
        this.y = y ||0.0;  
    }  
    
    function PointOnCubicBezier( cp, t ) {  
        var   ax, bx, cx;  
        var   ay, by, cy;  
        var   tSquared, tCubed;  
        var   result = new Point2D ;  
        cx = 3.0 * (cp[1].x - cp[0].x);  
        bx = 3.0 * (cp[2].x - cp[1].x) - cx;  
        ax = cp[3].x - cp[0].x - cx - bx;        
        cy = 3.0 * (cp[1].y - cp[0].y);  
        by = 3.0 * (cp[2].y - cp[1].y) - cy;  
        ay = cp[3].y - cp[0].y - cy - by;        
        tSquared = t * t;  
        tCubed = tSquared * t;        
        result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;  
        result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;        
        return result;  
    }  
    function ComputeBezier( cp, numberOfPoints, curve ){  
        var   dt;  
        var   i;        
        dt = 1.0 / ( numberOfPoints - 1 );  
         for( i = 0; i < numberOfPoints; i++)  
            curve[i] = PointOnCubicBezier( cp, i*dt );  
    }  
      
    var cp=[  
        new Point2D(parseInt(p4[0]), parseInt(p4[1])), new Point2D(p2[0], p2[1]), new Point2D(p3[0], p3[1]), new Point2D(p1[0], p1[1])  
    ];  
    var numberOfPoints = times;  
    var curve=[];  
    ComputeBezier( cp, numberOfPoints, curve );  
    return curve;
}

HTML5 での画像の放物線運動に関するヒントを共有する

関連記事