}\r
} ).mix( function($frame) {\r
$frame.up("$list").mix( {\r
- /*開始時刻リスト (後述のupdateStateメソッドで使う)*/\r
+ /*終了時刻（単位フレーム数）のキャッシュとして使う*/\r
+ end: 0,\r
+ \r
+ /*開始時刻（単位フレーム数）リスト (後述のupdateStateメソッドで使う)*/\r
beginList: { \r
next: null,\r
value: Number.MAX_VALUE\r
},\r
\r
- /*終了時刻リスト (後述のupdateStateメソッドで使う)*/\r
+ /*終了時刻（単位フレーム数）リスト (後述のupdateStateメソッドで使う)*/\r
endList: {\r
next: null,\r
value: Number.MAX_VALUE\r
/*終了処理をした後の待機状態を示す定数*/\r
POSTWAITING: 4,\r
\r
+ /*初期化用メソッド*/\r
+ init: function() {\r
+ this.state = this.WAITING;\r
+ this.begin = 0;\r
+ return this;\r
+ },\r
+ \r
/*引数で指定されたフレーム数に応じて、stateプロパティを更新するメソッド*/\r
updateState: function( /*number*/ f) {\r
if (f === void 0) {\r
this.state = begin;\r
/*beginプロパティに開始時刻をキャッシュ用に保存*/\r
this.begin = startTime;\r
- } else if (!f && !startTime) {\r
+ } else if (!startTime) {\r
/*開始時刻が0ならば、アニメーションを開始*/\r
this.state = begin;\r
}\r
} else if (state === begin) {\r
- this.state = play;\r
+ if (endTime >= cacheBegin) {\r
+ /*終了時刻にもう到達したときは、直接BEGINNING状態からENDING状態へ移行*/\r
+ this.state = end;\r
+ /*現時点を終了時刻とみなす*/\r
+ this.end = f;\r
+ } else {\r
+ this.state = play;\r
+ }\r
} else if (state === play) {\r
if ( (endTime >= cacheBegin) || (startTime > cacheBegin) ) {\r
/*終了時刻に到達したか、再び開始イベントが発火されたとき*/\r
this.state = end;\r
+ /*現時点を終了時刻とみなす*/\r
+ this.end = f;\r
}\r
} else if (state === end) {\r
if (endTime >= cacheBegin) {\r
\r
/*開始と再生と終了時に発火されるイベントリスナーを登録するメソッド*/\r
addEvent: function ( /*string*/ eventName, /*fnction*/ listener) {\r
- this["_" +eventName+ "ListenerList"].push(listener);\r
+ var evtName = "_" +eventName+ "ListenerList";\r
+ /*プロトタイプ継承していた場合は新しく配列を作成*/\r
+ if (!this.hasOwnProperty(evtName)) {\r
+ this[evtName] = [];\r
+ }\r
+ this[evtName].push(listener);\r
},\r
\r
/*入力されたフレーム数fの場面に切り替えるメソッド*/\r
for (var i=0;i<list.length;++i) {\r
list[i](this);\r
}\r
- this.updateState(f);\r
- } else if (state === /*this.ENDING*/ 3) {\r
+ /*開始時刻と終了時刻が一致した場合はstateはENDING状態*/\r
+ state = this.updateState(f).state;\r
+ }\r
+ if (state === /*this.ENDING*/ 3) {\r
list = this._endListenerList;\r
for (var i=0;i<list.length;++i) {\r
list[i](this);\r
}\r
state = list = void 0;\r
}\r
- } );\r
- \r
- /*$endFrame オブジェクト\r
- * 終了時の処理をするためのフレームを集める*/\r
- $frame.up("$endFrame").mix( {\r
- timelines: []\r
+ } ).mix( function() {\r
+ /*後述の$beginや$endで使うメソッド*/\r
+ this.addList = this.addBeginList;\r
} );\r
\r
/*$begin オブジェクト\r
event: str\r
};\r
}\r
- },\r
- \r
- /*$frame.$listのbeginList(あるいはendList)オブジェクトを設定しておくプロパティ*/\r
- list: $frame.$list.beginList,\r
+ }, \r
\r
/*_parse メソッド\r
* 引数の文字列を解析して、フレーム数を算出し、結果を$frame.beginプロパティに出力\r
_parse: function (str) {\r
var plusminus = str.search(/[\+\-]/),\r
event = null,\r
- ele;\r
+ ele,\r
+ /*endListのvalueプロパティには、活動継続フレーム数と開始フレーム数を足したものが入る*/\r
+ endList = this.$list.addEndList(Number.MAX_VALUE);\r
if (str === "indefinite") {\r
this.begin = Number.MAX_VALUE;\r
} else if (plusminus > 0) {\r
this.begin = Math.floor( this.begin * this.fpms);\r
if (str === "indefinite") {\r
/*begin属性の値がindefiniteの場合は、何もしない。\r
- * 開始時刻はlistenerメソッドの呼び出しか、beginElementメソッドに依存*/\r
+ * 開始時刻はbeginElementメソッドに依存*/\r
} else if (event) {\r
ele = event.id ? this.eventTarget.ownerDocument.getElementById(event.id)\r
: this.eventTarget;\r
/*イベントの時間差を設定しておく\r
* eventOffsetとobjListの変数はクロージャとしてlistener関数で使われる*/\r
var eventOffset = this.begin,\r
- /*objListのvalueプロパティはあとで書き換えられる*/\r
- objList = this.$list.addBeginList(Number.MAX_VALUE),\r
+ /*objListのvalueプロパティはあとで書き換えられる（イベントの場合のみ）*/\r
+ objList = this.$list.addList(Number.MAX_VALUE),\r
/*イベントのリスナーとして使う*/\r
listener = function(evt) {\r
- objList.value = this.begin = eventOffset + this.$frame.currentFrame;\r
- var s = this.$activate;\r
- this.activeTime = s.call() || Number.MAX_VALUE;\r
- this.simpleDuration = s.simpleDur;\r
- s = void 0;\r
- this.$frame.addLine(this);\r
+ objList.value = this.begin = eventOffset + base("$frame").currentFrame;\r
+ endList.value = this.begin + this.activeTime;\r
this.isResolved = true;\r
};\r
this.eventOffset = eventOffset;\r
ele && ele.addEventListener(evtName, listener.bind(this), false);\r
}\r
} else {\r
- /*イベントの影響を防ぐため\r
- * すでに、フレームオブジェクトのタイムラインには登録済みなので、\r
- * フレームではなく、自分独自のタイムラインに登録しておけばよい*/\r
- this.$frame = this;\r
+ /*開始リストに登録しておく（$endの場合は終了リストに登録）*/\r
+ this.$list.addList(this.begin);\r
+ /*活動継続時間から算出される終了フレーム数は、終了リストに入れておく*/\r
+ endList.value = this.begin + this.activeTime;\r
}\r
s = event = str = plusminus = ele = void 0;\r
},\r
/*初期値を設定*/\r
this.begin = 0;\r
this.isResolved = false;\r
- /*$listオブジェクトを更新*/\r
- this.$list = this.$list.up();\r
var str = this.trim(this.string);\r
if (str.indexOf(";") > -1){\r
/*;で区切られたリストを一つずつ解析*/\r
} else {\r
this._parse(str);\r
}\r
- str = void 0;\r
+ s = str = void 0;\r
return this;\r
},\r
\r
- /*イベントのリスナーとして、parseメソッドで使う*/\r
- listener: function(evt) {\r
- this.begin = this.eventOffset + this.$frame.currentFrame;\r
- var s = this.$activate;\r
- s.begin = this.begin;\r
+ /*$listと$activateオブジェクトを更新して、活動継続時間を求めるメソッド*/\r
+ updateList: function() {\r
+ this.$list = this.$list.up();\r
+ /*beginとend属性を考慮に入れないで、活動継続時間を求める*/\r
+ var s = ( this.$activate = this.$activate.up() );\r
+ /*$endオブジェクトに付属している$listプロパティを更新したものと一致させておく*/\r
+ s.end && (s.end.$list = this.$list);\r
this.activeTime = s.call() || Number.MAX_VALUE;\r
this.simpleDuration = s.simpleDur;\r
- s = void 0;\r
- this.$frame.addLine(this);\r
- this.isResolved = true;\r
+ return this;\r
}\r
\r
/*$activate オブジェクト\r
if (!this.string) {\r
return null;\r
}\r
+ /*addListメソッドには、addBeginList関数が入っているはずなので、それを一時的に変更する*/\r
+ this.$list.addList = this.$list.addEndList;\r
this.parse(this.string);\r
+ this.$list.addList = this.$list.addBeginList;\r
return this.isResolved ? this.begin\r
: "indefinite";\r
}\r
} ).mix( {\r
- /*イベントリスナー用の関数*/\r
- listener: function(evt) {\r
- if (this.begin <= 0) {\r
- /*強制的に終了させる*/\r
- this.removeLine(this.$begin);\r
- }\r
- this.begin = this.eventOffset + this.$frame.currentFrame;\r
- var s = this.$begin.$activate;\r
- s.end = this.begin;\r
- /*未解決だったendの値が、イベントの発生により、解決して再定義されたとき、\r
- * $activateオブジェクトを使って活動継続時間を再計算する*/\r
- this.$begin.activeTime = s.call();\r
- this.isResolved = true;\r
- s = void 0;\r
- }\r
+ $list: $frame.$begin.$list.up()\r
} );\r
} );\r
/*$from オブジェクト\r
}\r
return s;\r
},\r
+ \r
+ /*repeatイベントの発火時刻リスト\r
+ * setSmilEventメソッドを見よ*/\r
+ _repeatList: [],\r
+ \r
+ /*SMILイベント関連を発火させるためのメソッド\r
+ * もっぱら、push メソッドで使われる*/\r
+ setSmilEvent: function($list) {\r
+ var detail = 0;\r
+ $list.addEvent("begin", function($list) {\r
+ var target = this._ele;\r
+ /*IE11のために、MouseEventsでSMILEventsの代用をする*/\r
+ var evt = target.ownerDocument.createEvent("MouseEvents");\r
+ evt.initMouseEvent("beginEvent" ,true, true, window, detail, 0, 0, 0, 0, false, false, false, false, 0, target);\r
+ target.dispatchEvent(evt);\r
+ /*repeatイベントのために、_repeatListプロパティを初期化する*/\r
+ var list = this._repeatList = [],\r
+ simpleDuration = this.timeline.simpleDuration;\r
+ }.bind(this) );\r
+ $list.addEvent("end", function() {\r
+ var target = this._ele;\r
+ var evt = target.ownerDocument.createEvent("MouseEvents");\r
+ evt.initMouseEvent("endEvent" ,true, true, window, detail, 0, 0, 0, 0, false, false, false, false, 0, target);\r
+ target.dispatchEvent(evt);\r
+ }.bind(this) );\r
+ },\r
\r
/*引数で指定した要素 ele の属性を解析して、フレームに追加する*/\r
push: function(/*Element Node*/ ele) {\r
min: this.getAttr("min", "0"),\r
max: this.getAttr("max", "indefinite")\r
} )\r
- } ).parse();\r
- frame.$activate.end.$begin = frame;\r
+ } ).updateList().parse();\r
+ $frame.addLine(frame.$list.init());\r
+ \r
/*beginElementメソッドを追加*/\r
- function eleMethod (obj, eventName) {\r
- return (obj.string !== "indefinite") ? function(){}\r
+ var objList = frame.$list.addList(Number.MAX_VALUE),\r
+ /*endListのvalueプロパティには、活動継続フレーム数と開始フレーム数を足したものが入る*/\r
+ endList = frame.$list.addEndList(Number.MAX_VALUE);\r
+ ele.beginElement = (frame.string !== "indefinite") ? function(){}\r
: function() {\r
- obj.listener( {\r
- /*アニメーションの開始をこのメソッドが呼ばれた時点とする*/\r
- timeStamp: Date.now()\r
- } );\r
+ objList.value = frame.begin = base("$frame").currentFrame;\r
+ endList.value = frame.begin + frame.activeTime;\r
+ frame.isResolved = true;\r
var evt = this.ownerDocument.createEvent("MouseEvents");\r
- evt.initMouseEvent(eventName + "Event" ,true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, this);\r
+ evt.initMouseEvent("beginEvent" ,true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, this);\r
this.dispatchEvent(evt);\r
};\r
- };\r
- ele.beginElement = eleMethod(frame, "begin");\r
/*endElementメソッドを追加*/\r
- ele.endElement = eleMethod(frame.$activate.end, "end");\r
- if (frame.isResolved) {\r
- /*開始時間が初期化されてしまうのを防ぐ*/\r
- var cacheBegin = frame.begin;\r
- frame.listener( {\r
- /*アニメーションの開始をこのメソッドが呼ばれた時点とする*/\r
- timeStamp: Date.now()\r
- } );\r
- frame.begin = cacheBegin;\r
- }\r
+ var endFrame = frame.$activate.end || {};\r
+ ele.endElement = (endFrame.string !== "indefinite") ? function(){}\r
+ : function() {\r
+ if (frame.isResolved) {\r
+ endList.value = frame.begin + frame.activeTime;\r
+ endFrame.isResolved = true;\r
+ var evt = this.ownerDocument.createEvent("MouseEvents");\r
+ evt.initMouseEvent("endEvent" ,true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, this);\r
+ this.dispatchEvent(evt);\r
+ }\r
+ };\r
/*setFrameメソッドを使ったときの、再帰スタックの使いすぎを防ぐため*/\r
frame.timelines = [];\r
+ this.setSmilEvent(frame.$list);\r
begin = ele = void 0;\r
return frame;\r
},\r
to: "",\r
\r
/*initメソッドで使われるアニメーション関数*/\r
- _setFrame: function (frame) {\r
- this.state = "playing";\r
+ _setFrame: function ($list) {\r
this.setAttribute(this.to);\r
},\r
\r
- /*アニメーション中かどうかの判別\r
- * 1, idling アニメがまだ始まっていない待機状態 (規定値)\r
- * 2, playing アニメーションの再生中\r
- */\r
- state: "idling",\r
- \r
/*開始を設定されたタイムライン ($beginオブジェクト)*/\r
timeline: base("$frame").$begin,\r
\r
- /*_setEndFrameメソッドで終了処理をさせたいときに、呼び出されるメソッド\r
- * 終了処理が必要なときだけ、trueを返す*/\r
- checkEnd: function (frame) {\r
- var line = this.timeline,\r
- end = line.begin + line.activeTime;\r
- if (!line.isResolved || isNaN(end)) {\r
- /*未解決など問題が発生したとき*/\r
- line = frame = void 0;\r
- return false;\r
- } else if (\r
- ( ( frame < line.begin ) || ( end <= frame )\r
- ) && (this.state === "playing") ) {\r
- /*stateプロパティを書き換えることで、一度のみ、終了処理させる*/\r
- this.state = "idling";\r
- line = frame = void 0;\r
- return true;\r
- } else {\r
- line = frame = void 0;\r
- return false;\r
- }\r
- },\r
- \r
/*アニメが終了した際の後処理*/\r
- _setEndFrame: function (frame) {\r
+ _setEndFrame: function ($list) {\r
/*removeの場合、アニメーションを凍結せずに、もとに戻す*/\r
- if (this.checkEnd(frame) && (this.fill === "remove")) {\r
+ if (this.fill === "remove") {\r
this.removeAttribute();\r
}\r
},\r
var thisele = this.element;\r
if (line && thisele) {\r
this.timeline = line;\r
- /*ラインの中に、属性処理をするためのラインを追加*/\r
- line.addLine(\r
- { setFrame: this._setFrame.bind(this),\r
- begin: 1,\r
- activeTime: 1\r
- }\r
- );\r
- base("$frame").$endFrame.addLine(\r
- { setFrame: this._setEndFrame.bind(this),\r
- begin: 1,\r
- activeTime: 1\r
- }\r
- );\r
+ /*$begin.$listのイベントに属性処理を追加*/\r
+ line.$list.addEvent("begin", this._setFrame.bind(this));\r
+ line.$list.addEvent("play", this._setFrame.bind(this));\r
+ line.$list.addEvent("end", this._setEndFrame.bind(this));\r
+ /*アニメーションが再起動する可能性もあるため、$listのstateプロパティはここで初期化*/\r
+ line.$list.state = line.$list.WAITING;\r
}\r
- /*アニメーションが再起動する可能性もあるため、stateプロパティはここで初期化*/\r
- this.state = "idling";\r
line = thisele = void 0;\r
}\r
}).up("$animateElement").mix( {\r
return "";\r
},\r
\r
- _setFrame: function(currentTime) {\r
+ _setFrame: function($list) {\r
+ var currentFrame = $list.currentFrame;\r
/*durationは単純継続時間\r
*advanceは継続時間内での、進捗率\r
* 仕様を参照 http://www.w3.org/TR/smil-animation/#AnimFuncValues\r
/*単純継続時間が不定の場合、補間はせずに初期値が採用されるため、advanceは0となる\r
* 仕様を参照 SMIL Animation 3.2.2. Animation function values のInterpolation and indefinite simple durations\r
* http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimFuncValues*/\r
- advance = duration ? ( (currentTime - line.begin) % duration ) / duration\r
+ advance = duration ? ( (currentFrame - $list.begin) % duration ) / duration\r
: 0;\r
this.setAttribute(this.tocall(advance));\r
- this.state = "playing";\r
line = duration = advance = void 0;\r
},\r
\r
- /*_setEndFrameメソッドは、終了処理と凍結作業をするときに、falseを返す*/\r
- _setEndFrame: function(frame) {\r
+ /*_setEndFrameメソッドは、終了処理と凍結作業をする*/\r
+ _setEndFrame: function($list) {\r
+ var frame = $list.currentFrame;\r
/*上書きされたメソッドを呼び出してアニメーションの凍結作業をする*/\r
- if (!this.checkEnd(frame)) {\r
- return;\r
- }\r
if (this.fill === "freeze") {\r
var line = this.timeline,\r
duration = line.simpleDuration;\r
/*後の_setFrameメソッドで使うダミー*/\r
__setAttribute: function(){},\r
\r
- _setFrame: function(currentFrame) {\r
+ _setFrame: function($list) {\r
+ var currentFrame = $list.currentFrame;\r
/*__transformListの中で、自分より後の項目に再生中のものがあれば、\r
*アニメーションを再生させないで、後に続く項目に任せる*/\r
var list = this.element.__transformList,\r
this.$animateElement._setFrame.call(this, currentFrame);\r
},\r
\r
- _setEndFrame: function(currentFrame) {\r
+ _setEndFrame: function($list) {\r
var list = this.element.__transformList;\r
- if (!this.checkEnd(currentFrame) || (this.fill !== "remove") || !list) {\r
+ if ((this.fill !== "remove") || !list) {\r
return;\r
}\r
if (!this.isSum) {\r
floor = Math.floor;\r
while(obj) {\r
var frame = obj.frame,\r
- target = obj.target\r
+ target = obj.target,\r
detail = 0;\r
if (frame <= num) {\r
/*IE11ではSVGEventsやDOMEventsを使うと問題が起きるため、MouseEventsで代用する*/\r
frame++;\r
try {\r
$f.setFrame(frame);\r
- $f.$endFrame.setFrame(frame);\r
} catch(e) {\r
}\r
_cancel.handle = requestAnimationFrame(step);\r
OSDN Git Service
