svnno****@sourc*****
svnno****@sourc*****
2010年 11月 13日 (土) 23:44:20 JST
Revision: 2141 http://sourceforge.jp/projects/sie/svn/view?view=rev&revision=2141 Author: dhrname Date: 2010-11-13 23:44:20 +0900 (Sat, 13 Nov 2010) Log Message: ----------- linearに関する基本的なアニメーション関数を適用 Modified Paths: -------------- branches/06x/063/org/w3c/dom/svg.js Modified: branches/06x/063/org/w3c/dom/svg.js =================================================================== --- branches/06x/063/org/w3c/dom/svg.js 2010-11-12 13:59:18 UTC (rev 2140) +++ branches/06x/063/org/w3c/dom/svg.js 2010-11-13 14:44:20 UTC (rev 2141) @@ -4491,7 +4491,7 @@ this._begin = null; this._end = null; this._from = this._to = this._values = this._by = null; - this._keyTimes = null; + this._keyTimes = [0, 1]; this.addEventListener("beginEvent", function(evt) { var tar = evt.target; if (!tar.isRepeat) { @@ -4532,7 +4532,11 @@ } else if (name === "by") { tar._by = evt.newValue; } else if (name === "keyTimes") { - tar._keyTimes = evt.newValue.split(";"); + var s = evt.newValue.split(";"); + for (var i=0;i<s.length;++i) { + tar._keyTimes[i] = parseFloat(s[i]); + } + s = null; } evt = null; }, false); @@ -4682,6 +4686,10 @@ throw new DOMException(DOMException.INVALID_STATE_ERR); } }; +/*getCurrentTimeメソッド + *現在の時間コンテナ内での時刻であり、 + *決して現在時刻ではない。要素のbeginイベントの発火したときが0sである。 + */ /*float*/ SVGAnimationElement.prototype.getCurrentTime = function(){ return (this._currentFrame * 125 / 0.8); }; @@ -4750,6 +4758,9 @@ *くわしくはNAIBU.Time.start関数のコードを参照 */ NAIBU.Clip[NAIBU.Clip.length] = this; + /*_valueListプロパティは、 + *機会が理解できる形で保管されているvalueの値の配列リスト + */ this._valueList = []; this.addEventListener("DOMNodeInserted", function(evt){ if (evt.eventPhase === Event.BUBBLING_PHASE) { @@ -4762,57 +4773,72 @@ *[(new SVGPoint()), (new SVGPoint())] *この_valueListプロパティはアニメの際に使うので、_valuesプロパティはアニメ中に使わない */ + var vi = ttr.cloneNode(false); if (!!tta) { + ttr[attrName].animVal = vi[attrName].baseVal; for (var i=0, tav=tar._values, tvli=tav.length;i<tvli;++i) { var vir = ttr.cloneNode(false); //仮の要素 + delete vir._tar; vir.setAttributeNS(null, attrName, tav[i]); tar._valueList[tar._valueList.length] = vir.baseVal; } } else if (!!CSS2Properties[attrName] || attrName.indexOf("-") > -1) { //スタイルシートのプロパティならば - tar._valueList = tar._value; + for (var i=0, tav=tar._values, tvli=tav.length;i<tvli;++i) { + tar._valueList = parseFloat(tar._value); + } } else if ("animatedPoints" in ttr) { + ttr.animatedPoints = vi.points; for (var i=0, tav=tar._values, tvli=tav.length;i<tvli;++i) { - var vir = ttr.cloneNode(false); //仮の要素 + var vir = ttr.cloneNode(false); + delete vir._tar; vir.setAttributeNS(null, "points", tav[i]); tar._valueList[tar._valueList.length] = vir.points; } } else if ("normalizedPathSegList" in ttr) { + ttr.animatedNormalizedPathSegList = vi.normalizedPathSegList; for (var i=0, tav=tar._values, tvli=tav.length;i<tvli;++i) { - var vir = ttr.cloneNode(false); //仮の要素 + var vir = ttr.cloneNode(false); + delete vir._tar; vir.setAttributeNS(null, "d", tav[i]); tar._valueList[tar._valueList.length] = vir.normalizedPathSegList; } } else { + vi = null; return; } - evt = tta = vir = null; + evt = tta = vir = vi = null; }, false); }, false); this.addEventListener("beginEvent", function(evt) { var tar = evt.target; var attrName = tar.getAttributeNS(null, "attributeName"), newAttr = tar.targetElement.attributes.getNamedItemNS(null, attrName); var ttr = tar.targetElement, tta = ttr[attrName]; - var vir = ttr.cloneNode(false), vta = vir[attrName]; tar._frame = function() { - var d = tar.getSimpleDuration(), n = tar._valueList.length - 1; + var d = tar.getSimpleDuration(), n = tar._valueList.length - 1, tg = tar.getCurrentTime(); if ((n !== -1) && (d !== 0)) { - var ntd = n / d; + var ii = Math.floor(tg*n) / d; } else { return; } - var ii = Math.floor(tar.getCurrentTime() * ntd); if (!!tta) { - var base = tta.baseVal; - tta.baseVal = vta; + var base = tta.baseVal, tanim = tta.animVal; + var v1 = tar._valueList[ii], v2 = tar._valueList[ii+1]; + var v = v1 + (v2-v1) * (tg-tar._keyTimes[ii]*d) * (n-1) / d; + tanim.newValueSpecifiedUnits(tanim.unitType, v); + tta.baseVal = tanim; + tanim = null; } else if (!!CSS2Properties[attrName] || attrName.indexOf("-") > -1) { //スタイルシートのプロパティならば var base = null; + var v1 = tar._valueList[ii], v2 = tar._valueList[ii+1]; + var v = v1 + (v2-v1) * (tg-tar._keyTimes[ii]*d) * (n-1) / d; } else if ("animatedPoints" in ttr) { - var base = tta.points; - tta.points = vta; + var base = ttr.points; + ttr.points = ttr.animatedPoints; } else if ("normalizedPathSegList" in ttr) { - var base = tta.normalizedPathSegList; - tta.normalizedPathSegList = vta; + var base = ttr.normalizedPathSegList; + ttr.normalizedPathSegList = ttr.animatedNormalizedPathSegList; } + v1 = v2 = v = null; /*setAttrbute(NS)メソッドはDOM属性を書き換えるため利用しない。 * * 参照:アニメーションサンドイッチモデル @@ -4834,7 +4860,7 @@ tta.animatedPoints = tta.points; tta.points = base; } else if ("normalizedPathSegList" in ttr) { - tta.animatednormalizedPathSegList = tta.normalizedPathSegList; + tta.animatedNormalizedPathSegList = tta.normalizedPathSegList; tta.normalizedPathSegList = base; } };