画像をベジエ曲線に沿って移動させる


■動作ブラウザ　【 IE:4.0　 NN:6.0】
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × ○ - ○ ○ × × × × ○ - × -
Macintosh × ○ ○ ○ - × × × × ○ - - ×
UNIX - - - - - × × × × ○ - - -
Dreamcast - - - - - - - - - - × × -

ポイント t = t + 0.01; T = 1 - t; imgX = x[0]*T*T*T + x[1]*3*t*T*T + x[2]*3*t*t*T + x[3]*t*t*t; imgY = y[0]*T*T*T + y[1]*3*t*T*T + y[2]*3*t*t*T + y[3]*t*t*t;
説　　明 画像をベジエ曲線に沿って移動させるには以下の計算式で表示するXY座標を求め画像のスタイルシートプロパティに設定します。

x = X*(1-t)3 + X*3*t*(1-t)2 + X*3*t2*(1-t) + X*(1-t)3
y = Y*(1-t)3 + Y*3*t*(1-t)2 + Y*3*t2*(1-t) + Y*(1-t)3
サンプル <html> <head> <title>画像をベジエ曲線に沿って移動させる</title> <script language="JavaScript"><!-- function moveImg() { if (t <= 1) { t = t + 0.01; T = 1 - t; imgX = x[0]*T*T*T + x[1]*3*t*T*T + x[2]*3*t*t*T + x[3]*t*t*t; imgY = y[0]*T*T*T + y[1]*3*t*T*T + y[2]*3*t*t*T + y[3]*t*t*t; document.myIMG.style.left= imgX; document.myIMG.style.top = imgY; } } function set() { x = new Array(); y = new Array(); x[0] = 0; y[0] = 0; x[1] = 22; y[1] = 160; x[2] = 134; y[2] = 201; x[3] = 215; y[3] = 10; t = 0; imgX = imgY = 0; timerID = setInterval("moveImg()",200); } // --></script> </head> <body onLoad="set()"> <img src="image.jpg" name="myIMG" style="position:absolute;top:0px;"> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!
写真素材 PIXTA