HTML5 における画像の放物線運動に関するいくつかの考えについての簡単な説明

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

ここでの H5 開発で一般的に使用されるデザイン ドラフト サイズは 640 * 1008 であるため、このサイズに基づくソリューションのアイデアは次のとおりです。

1. まず、PS で移動する要素を別途 png にエクスポートします。デザイン案で移動ルートが計画されている場合は、そのルートも png としてエクスポートする必要があります。

2. AI でデザイン ドラフトと同じサイズの新しいファイルを作成し、次に示すように、モーション ルートがある場合は、そのファイルに変位要素を 2 回ドラッグします。

ここで注意する必要があるのは、パスの始点と終点が画像の移動点に対応していることです。

1. キャンバスには変形処理がありませんので、移動点は画像の左上になります。
2. Canvas では、translate(x1, y1) の x1 と y1 を基に、drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) の dx と dy が加算されるため、画像が平行移動されて移動されます。最終オフセット。
3. 要素がposition:absoluteによって配置され、その位置がtransformでtranslate3d(x, y, z)によって制御される場合、オフセットはx、yである必要があります。通常、transformでは左、上、および追加のマージンを制御するために模倣することがあります。要素の位置を変更するには、変換に追加の translation3D(marginLeftX, marginLeftY, 0) を追加します。このマージンの値も考慮する必要があります。

3. AI では、次の図に示すように、ctrl + r キーを使用して基準線を引き出し、要素画像を移動してその x 位置と y 位置を引き出します。

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

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

4. 調整が完了したら、追加の 2 本の基準線を制御点 1 の位置にドラッグし、メニューバー - ウィンドウ - 情報から情報パネルを開き、始点、制御点、終点、および 3 つの点を変更します。それぞれ座標を取り出します。

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