回転移動するレイヤースクリプトを作るには？

通りすがり1号 2000/01/10(月) 17:44:34
汎用の「回転移動するレイヤースクリプト」を作ろうと思って、
ここ↓にあったスクリプトをこねくり回していたんですが、
http://www.fureai.or.jp/~tato/DHTML/simple/part3/cross/slidlay2.htm
うまく動かなくて悩んでいます。
自分で改造していたソースを下に書いておきます。

<html>
<head>
<title>ぐるぐる</title>
<script langage="JavaScript">

//--配列いろいろ
var wx=new Array();
var wy=new Array();
var ex=new Array();
var ey=new Array();
var spd=new Array();
var step=new Array();
var stepX=new Array();
var stepY=new Array();
var stepT=new Array();
var mvFlag=new Array();
var slideID=new Array();
var count=new Array();
var radi=new Array();

//--degからradへ変換
function deg(rad){rad/Math.PI*180}

//--レイヤー移動
function moveLAYER(layName,x,y){
if(document.layers)document.layers[layName].moveTo(x,y);
if(document.all)document.all(layName).style.pixelLeft=x;
if(document.all)document.all(layName).style.pixelTop=y;
}

//--ぐるぐる関数
function rotateLAYERs(layName,centerX,centerY,radius,startT,endT,wait,stpx){

//--移動初期化
if(!mvFlag[layName]){
clearTimeout(slideID[layName]);
count[layName]=0; //--移動回数カウント
step[layName]=stpx; //--移動ステップ数
stepT[layName]=rad(endT-startT)/step[layName]; //--単位移動量t
wx[layName]=Math.cos(rad(startT))*radi[layName]+centerX; //--移動中x座標
wy[layName]=Math.sin(rad(startT))*radi[layName]+centerY; //--移動中y座標
ex[layName]=Math.cos(rad(endT))*radi[layName]+centerX; //--到着場所x座標
ey[layName]=Math.sin(rad(endT))*radi[layName]+centerY; //--到着場所y座標
spd[layName]=wait; //--移動ウェイト
mvFlag[layName]=true; //--移動中フラグ
}

//--移動位置算出＆ループ制御
if(mvFlag[layName]&&(count[layName]<=step[layName]-1)){
count[layName]++;
wx[layName]=Math.cos(startT+count[layName]*stepT[layName])*radi[layName]+centerX;
wy[layName]=Math.sin(startT+count[layName]*stepT[layName])*radi[layName]+centerY;
clearTimeout(slideID[layName]);
slideID[layName]=setTimeout('rotateLAYERs("'+layName+'")',spd[layName]);
}else{
wx[layName]=ex[layName];
wy[layName]=ey[layName];
clearTimeout(slideID[layName]);
mvFlag[layName]=false;
}

//--移動
moveLAYER(layName,wx[layName],wy[layName]);
}
</script>
</head>
<body onLoad="rotateLAYERs('test',200,200,100,0,90,10,100)">
<div id="test" style="position:absolute; top:200; left:200;">test</div>
</body>
</html>

些細なことでも結構ですので、どなたかアドバイスをお願いします。

りうきん [E-Mail] 2000/01/10(月) 19:42:11
回転移動という意味がちょっとわからないのですが、
ある点を中心に回転するレイヤーが作りたいというならば、
以下のアドレスに、前にここで教えてもらった数式を基本に作った
スクリプトがおいてありますので見てみてください。

http://www3.ocn.ne.jp/~lapis/script/msmove.html

通りすがり1号 2000/01/28(金) 22:35:07
お返事が遅くなってすいません。

りうきんさんが書いていたスクリプトの方が短いので、
こちらを使おうといろいろ試行錯誤していましたが、
どうにも解決できないところがあるのです。

なぜか回転移動レイヤーを呼び出す場所で回転の速さが
変わるのです。

たぶん言葉で説明しても上手く伝わらないと思うので
アドレスを書いておきます。IE5専用です。
http://www.iris.dti.ne.jp/~aqua/aqua.html

原因は何でしょう？
SetInterval()の呼び出しに問題があるのかな？

りうき(ん) [E-Mail] 2000/01/30(日) 22:39:39
サンプルを見せていただいたのですが、うちでは、その回転速度の
ばらつきというのが再現できませんでした。
(celeron466MHz/Win98/IE5/1280*960px/32bitcolor)
体感的には全部等速で動いています。
ということなので、原因はちょっと把握しかねます。
スクリプトをばらしていって調べるくらいしか対処はできませんね。
お役に立てなくてごめんなさい。

[上に] [前に] [次に]