Re: [討論] 動畫的播放
線上觀看：http://web.ntust.edu.tw/~B9409041/link/motion/1.html
檔案下載：http://web.ntust.edu.tw/~B9409041/link/motion/1.fla
概念部分：
用到有限狀態機的概念 (本程式並未實作有限狀態機)
紀錄目前狀態，根據目前狀態判斷下一步
應用部分：
範例是以屬性 y 為動畫的代表
事實上所有屬性都可以套用，包括目前影格
這樣應該可以作出幾乎所有的動畫了吧？
設計部分：
畫面上有4個元件分別為A1、A2、A3、A4
== 原始碼部分 ==
//系統變數
var speed = 0.3; //移動速度
var d = 20; //移動距離
var n = 4; //數量 (若要修改，必須增加畫面上的元件)
//狀態變數
var AoFlag = false; //false 表示已歸位。
var AtFlag = false; //false 表示已到位。
//init
for(var i = 1 ; i <= n ; i++)
{
var A = this["A"+i];
A.i = i; //紀錄i
A.T.text = i; //設定文字方塊
A.oy = A._y+d; //初始值
A.ty = A._y-d; //終值
A._y = A._y+d; //歸位
//設定事件
A.onPress = function()
{
//狀態設定
AoFlag = true; //假設還沒到原位
AtFlag = true; //假設還沒到原位
//紀錄傳入 onEnterFrame 的變數
var thisI = this.i;
//時間軸迴圈
this._parent.onEnterFrame = function()
{
//是否歸位
if(AoFlag)
AoFlag = Ao();
//是否到位
else if ( AtFlag )
AtFlag = At(thisI);
else
onEnterFrame = null;
}
}
}
//回到原位
function Ao()
{
//與目標的距離
var d = 0;
//所有人回原位
for (var i = 1 ; i <= n ; i++)
{
var A = this["A"+i];
A._y += (A.oy - A._y) * speed; //向目標移動 speed 倍的距離
d += Math.abs(A.oy - A._y); //計算距離
}
//判斷是否到位
if(d > 1)
return true;
else
return false;
}
//移動到定位
function At(i)
{
//與目標的距離
var d = 0;
var A = this["A"+i];
A._y += (A.ty - A._y) * speed; //向目標移動 speed 倍的距離
d += Math.abs(A.ty - A._y); //計算距離
//判斷是否到位
if(d > 1)
return true;
else
return false;
}
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 122.120.113.234
※ 編輯: etrexetrex 來自: 122.120.113.234 (05/08 20:19)
→
05/08 20:21, , 1F
05/08 20:21, 1F
※ 編輯: etrexetrex 來自: 122.120.113.234 (05/08 20:26)
推
05/08 20:43, , 2F
05/08 20:43, 2F
→
05/08 20:44, , 3F
05/08 20:44, 3F
→
05/08 20:48, , 4F
05/08 20:48, 4F
討論串 (同標題文章)