• R/O
  • HTTP
  • SSH
  • HTTPS

clientJs: コミット

クライアント側 js 開発用


コミットメタ情報

リビジョンd93e0f2faddc687d56a9528402f74ba2415a0407 (tree)
日時2015-12-09 22:55:51
作者itozyun <itozyun@user...>
コミッターitozyun

ログメッセージ

Version 0.6.200, fix X.Node.Anime.

変更サマリ

差分

Binary files a/0.6.x/img/loading.gif and b/0.6.x/img/loading.gif differ
--- a/0.6.x/js/02_dom/10_XNodeAnime.js
+++ b/0.6.x/js/02_dom/10_XNodeAnime.js
@@ -41,9 +41,7 @@ var X_NODE_ANIME_RESET = 1,
4141 */
4242 function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
4343 var list = X_NodeAnime_QUEUE,
44- obj = this[ '_anime' ],
45- isNew = !obj,
46- now, stop;
44+ obj = this[ '_anime' ];
4745
4846 if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){
4947 alert( '@animate 要素はツリーに追加されていません!' );
@@ -51,10 +49,9 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
5149 return this;
5250 };
5351
54- if( isNew ){
52+ if( !obj ){
5553 this[ '_anime' ] = obj = {
5654 x : 0, y : 0, a : 1,
57- destX : 0, destY : 0, destA : 1,
5855 duration : 0
5956 //phase, lazyRelease, easing, follower, releaseNow
6057 };
@@ -62,30 +59,27 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
6259
6360 if( 0 <= duration && X_Type_isFinite( duration ) ){
6461 obj.duration = duration;
65- stop = !duration;
6662 };
6763
68- if( obj.phase !== 7 ){
69- // アニメーション中は easing の変更ができない
70- obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];
71- };
64+ obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];
65+
7266 // form :
7367 obj.startX = obj.x = X_NodeAnime_getFinite( start[ 'x' ], obj.x );
7468 obj.startY = obj.y = X_NodeAnime_getFinite( start[ 'y' ], obj.y );
7569 obj.startA = obj.a = X_NodeAnime_getFinite( start[ 'opacity' ], obj.a );
7670
7771 // to :
78- obj.destX = X_NodeAnime_getFinite( dest[ 'x' ], obj.destX );
79- obj.destY = X_NodeAnime_getFinite( dest[ 'y' ], obj.destY );
80- obj.destA = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.destA );
72+ obj.destX = X_NodeAnime_getFinite( dest[ 'x' ], obj.x );
73+ obj.destY = X_NodeAnime_getFinite( dest[ 'y' ], obj.y );
74+ obj.destA = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.a );
8175
8276 obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;
77+ obj.inited = false;
8378
84- if( stop && 6 <= obj.phase ){
79+ if( !obj.duration && 6 <= obj.phase ){
8580 this[ 'stop' ](); // 現在値で停止
86- } else
87- if( !stop || obj.lazyRelease ){
88- if( isNew || !obj.phase ){
81+ } else {
82+ if( !obj.phase ){
8983 list[ list.length ] = this;
9084 obj.phase = 1;
9185 obj.uid = ++X_NodeAnime_uid;
@@ -97,14 +91,14 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
9791 obj.uid = ++X_NodeAnime_uid;
9892 X_NodeAnime_needsDetection = true;
9993 } else
100- if( !stop ){
94+ if( obj.duration ){
10195 // リストの先頭にいるため検査不要でアニメーション開始可能 4, 5, 6, 7
10296 obj.phase = 6;
10397 } else
104- // obj.lazyRelease はあり
98+ // GPU 転送予約、または transform や opacity の値のみ設定
10599 if( obj.phase !== 5 ){ // GPU解除待ち ではない -> 4. 6, 7
106- obj.phase = 4; // 強制停止(GPU転送予約)
107- obj.releaseNow = false; // TODO folower が要るため GPU 転送できないケースあり
100+ obj.phase = 4; // 強制停止(GPU転送予約)または値のみ更新
101+ obj.releaseNow = false; // TODO folower がいるため GPU 転送できないケースあり
108102 X_NodeAnime_needsDetection = true;
109103 };
110104
@@ -120,11 +114,6 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
120114 X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );
121115 };
122116 };
123- } else {
124- if( obj.phase ){
125- this[ 'stop' ](); // リストから外す
126- };
127- console.log( 'リストに加えない!' );
128117 };
129118
130119 return this;
@@ -167,6 +156,8 @@ function X_Node_stop( option ){
167156 obj.startA = obj.destA = obj.a = 1;
168157 }; // TODO 終了値で停止も,,,
169158
159+ // obj.canceled = true;
160+
170161 if( rm ) break; // 1,2,3,6 の場合ここまで
171162
172163 obj.destX = obj.x;
@@ -188,12 +179,34 @@ function X_Node_stop( option ){
188179
189180 return this;
190181 };
182+/*
183+ * remove(append swap 等でない部的に呼ばれている場合も), kill 時に
184+ */
185+function X_NodeAnime_stopNow( xnode ){
186+ var obj = xnode[ '_anime' ],
187+ flags = xnode[ '_flags' ],
188+ list = X_NodeAnime_QUEUE,
189+ skipUpdate;
190+
191+ // if( !obj || !obj.phase ) return; 呼び出し側で検証済
192+
193+ X_NodeAnime_needsDetection = true;
194+ list.splice( list.indexOf( xnode ), 1 );
195+ obj.phase = 0;
196+
197+ // この部分 startUpdate へ?
198+ if( flags & ~X_Node_BitMask_RESET_GPU ){
199+ skipUpdate = flags & X_NodeFlags_GPU_RESERVED;
200+ ( flags & X_NodeFlags_GPU_RELEASE_RESERVED ) || X_NodeAnime_updatePosition( xnode, obj.x, obj.y, obj.a, false );
201+ skipUpdate || ( xnode[ '_rawObject' ].style.cssText = X_Node_CSS_objToCssText( xnode ) );
202+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
203+ };
204+};
191205
192206 /*
193207 * 1. 新規アニメーションが現在アニメーション中の要素の親か子であればアニメーションを待機
194- * 2.
195208 */
196-function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){
209+function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){
197210 var list = X_NodeAnime_QUEUE,
198211 i = 0, _xnode;
199212
@@ -203,7 +216,7 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){
203216 // アニメーションの優先度はリストにいる順
204217 // まず先行する後続待機要素の中に、親子関係のものがいないか?探す
205218 if( _xnode[ '_anime' ].phase <= 3 ){
206- if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){
219+ if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){ // 祖先か?見た方が早そう
207220 // -> いる、このような要素が複数いる場合、誰に後続すればいいか?判然としないため、準待機フラグを立てる
208221 return 2;
209222 };
@@ -218,7 +231,7 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){
218231
219232 if( 6 <= _xnode[ '_anime' ].phase ){
220233 if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){
221- return isText ? 3 : _xnode;
234+ return isTest ? 3 : _xnode;
222235 };
223236 };
224237 };
@@ -228,17 +241,16 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){
228241
229242 function X_NodeAnime_updateAnimations( e ){
230243 var list = X_NodeAnime_QUEUE,
231- i = list.length,
232244 now = X_Timer_now(),
233- c = false,
245+ c = false,
234246 i, xnode, obj, _xnode,
235- rm, easing, follower, lazy;
247+ rm, easing, lazy;
236248
237249 if( X_NodeAnime_needsDetection ){
238250 X_NodeAnime_needsDetection = false;
239251
240252 //
241- list.sort( X_NodeAnime_sortAnimationNode );
253+ list.sort( X_NodeAnime_sortAnimationNode );
242254
243255 for( i = 0; xnode = list[ i ]; ++i ){
244256 obj = xnode[ '_anime' ];
@@ -254,7 +266,7 @@ function X_NodeAnime_updateAnimations( e ){
254266 };
255267 };
256268
257- for( ; i; ){
269+ for( i = list.length; i; ){
258270 rm = false;
259271 xnode = list[ --i ];
260272 obj = xnode[ '_anime' ];
@@ -271,11 +283,17 @@ function X_NodeAnime_updateAnimations( e ){
271283 break;
272284 };
273285 // アニメーション終了
286+ xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END );
287+
274288 case 4 : // 強制停止(GPU転送予約)
275289 lazy = !obj.follower && !obj.releaseNow && obj.lazyRelease;
276290 X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, !!lazy );
277291
278- xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END );
292+ //if( obj.canceled ){
293+ // xnode[ 'asyncDispatch' ]( X_EVENT_CANCELED );
294+ //} else {
295+
296+ //};
279297
280298 if( lazy ){
281299 console.log( 'アニメーション終了(' + obj.phase + ') -> GPU 解除待機 ' + lazy );
@@ -292,10 +310,11 @@ function X_NodeAnime_updateAnimations( e ){
292310 obj.startTime = now;
293311 obj.destTime = now + obj.duration;
294312 obj.phase = 7; // アニメーション中
295- obj.progress = 0;
296- X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, true );
313+ obj.progress = 0;
297314 xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_START );
298315 c = true;
316+ //obj.canceled = false;
317+ ( obj.inited && !X_NodeAnime_translateZ ) || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, true );
299318 break;
300319
301320 case 5 : // GPU解除待ち
@@ -305,7 +324,13 @@ function X_NodeAnime_updateAnimations( e ){
305324 } else {
306325 c = true;
307326 };
308- break;
327+ break;
328+
329+ default : // 2 or 3
330+ // 待機状態でも親要素が GPU 化していなければ、開始値をセットすることは可能
331+ obj.inited || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, false );
332+ obj.inited = false;
333+ break;
309334 };
310335
311336 obj.releaseNow = false;
--- a/0.6.x/js/02_dom/20_XNode.js
+++ b/0.6.x/js/02_dom/20_XNode.js
@@ -781,12 +781,13 @@ function X_Node_remove(){
781781
782782 if( !parent ) return this;
783783
784- // TODO anime
785784 // stop() ->
786785 if( this[ '_anime' ] && this[ '_anime' ].phase ){
787786 console.log( 'Animation 中の REMOVE' );
788- this[ 'stop' ]();
787+ X_NodeAnime_stopNow( this );
789788 };
789+ // 子孫にアニメーション中の要素が要る
790+ // 先祖に GPU 化した要素が要る
790791
791792 delete this.parent;
792793 parent[ '_xnodes' ].splice( parent[ '_xnodes' ].indexOf( this ), 1 );
@@ -798,7 +799,7 @@ function X_Node_remove(){
798799 if( X_UA_DOM.IE4 ){
799800 if( elm = this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ){
800801 X_Node_reserveRemoval[ X_Node_reserveRemoval.length ] = this;
801- X_Node_reserveUpdate();
802+ X_Node_reserveUpdate();
802803 } else
803804 if( !this[ '_tag' ] && ( ( parent[ '_flags' ] & X_NodeFlags_IE4_FIXED ) === 0 ) ){
804805 parent[ '_flags' ] |= X_NodeFlags_IE4_DIRTY_CHILDREN;
@@ -849,8 +850,6 @@ function X_Node_onKill( that ){
849850
850851 parent && parent[ '_xnodes' ] && parent[ '_xnodes' ].splice( parent[ '_xnodes' ].indexOf( that ), 1 );
851852
852- elm = that[ '_rawObject' ] || X_UA_DOM.IE4 && X_Node__ie4getRawNode( that );
853-
854853 if( xnodes && ( i = xnodes.length ) ){
855854 delete that[ '_xnodes' ];
856855 for( ; i; ){
@@ -861,12 +860,13 @@ function X_Node_onKill( that ){
861860
862861 X_Node_CHASHE[ that[ '_uid' ] ] = null; // array に対して delete X_Node_CHASHE[ uid ] はまずい!
863862
864-// TODO anime
865863 if( that[ '_anime' ] && that[ '_anime' ].phase ){
866864 console.log( 'Animation 中の KILL' );
867- that[ 'stop' ]();
865+ X_NodeAnime_stopNow( that );
868866 };
869867
868+ elm = that[ '_rawObject' ] || X_UA_DOM.IE4 && X_Node__ie4getRawNode( that );
869+
870870 // remove _xnodes
871871 if( X_UA_DOM.IE4 ){
872872 if( elm ){
@@ -895,26 +895,15 @@ function X_Node_onKill( that ){
895895 * @example node.contains( testNode );
896896 */
897897 function X_Node_contains( v ){
898- var elm, type, xnodes, i;
898+ var xnodes;
899899
900900 if( !v || !this[ '_tag' ] || this === v ) return false;
901-
902- // contains ie4+
903- /*
904- if( ( elm = this[ '_rawObject' ] || X_UA_DOM.IE4 && X_Node__ie4getRawNode( this ) ) && document.contains && ( type = X_Node_getType( v ) ) && ( type === X_NodeType_RAW_HTML || type === X_NodeType_RAW_TEXT ) ){
905- return elm.contains( v );
906- }; */
907901
908- //if( document.compareDocumentPosition ){
909- //
910- //};
911-
912902 xnodes = this[ '_xnodes' ];
913903 if( !xnodes || !xnodes.length ) return false;
914- if( this === v[ 'parent' ] ) return true; // fast
915- if( xnodes.indexOf( v ) !== -1 ) return true; // fast
916- for( i = xnodes.length; i; ){
917- if( xnodes[ --i ][ 'contains' ]( v ) ) return true;
904+
905+ while( v = v[ 'parent' ] ){
906+ if( this === v ) return true;
918907 };
919908 return false;
920909 };
@@ -1237,6 +1226,17 @@ function X_Node_call( name /*, opt_args... */ ){
12371226 return this.parent ? X_Node_CSS_getCharSize( this ) : 0;
12381227 case 'inGPU' :
12391228 return !!( this[ '_flags' ] & ( X_NodeFlags_GPU_NOW | X_NodeFlags_GPU_RELEASE_RESERVED ) );
1229+ case 'isGPUChild' :
1230+ if( this[ '_flags' ] & X_NodeFlags_IN_TREE ){
1231+ parent = this;
1232+ while( parent = parent.parent ){
1233+ if( parent[ '_flags' ] & ( X_NodeFlags_GPU_NOW | X_NodeFlags_GPU_RELEASE_RESERVED ) ) return true;
1234+ };
1235+ };
1236+ return false;
1237+ case 'containGPU' :
1238+
1239+ return false;
12401240 case 'canAnimateNow' :
12411241 return ( this[ '_flags' ] & X_NodeFlags_IN_TREE ) && X_NodeAnime_detectWaitAnimation( this, true, true ) === 6;
12421242 case 'animeState' :
@@ -1460,12 +1460,12 @@ var X_Node__commitUpdate =
14601460 console.log( 'GPU 解放 ' );
14611461 //X_Node_updateReservedByReleaseGPU = true;
14621462 that[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
1463- //return elm;// TODO もしかしたらこのタイミングで更新できるかも。
1463+ //return elm;// このタイミングで更新できるっぽい。
14641464 };
14651465
14661466 // 3. GPU予約 -> GPU
14671467 if( that[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){
1468- // TODO size 取得のための update の場合、GPU化を待つ
1468+ // TODO size 取得のための update の場合、GPU化をスキップ
14691469 that[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
14701470 that[ '_flags' ] |= X_NodeFlags_GPU_NOW;
14711471 };
@@ -1518,7 +1518,7 @@ var X_Node__commitUpdate =
15181518 if( that[ '_flags' ] & X_NodeFlags_IS_SVG ){
15191519 elm = document.createElementNS( 'http://www.w3.org/2000/svg', that[ '_tag' ].toLowerCase() );
15201520
1521- // math http://www.w3.org/1998/Math/MathML
1521+ // TODO math http://www.w3.org/1998/Math/MathML
15221522 } else {
15231523 elm = document.createElement( that[ '_tag' ] );
15241524 };
--- a/0.6.x/js/20_ui/15_ScrollBox.js
+++ b/0.6.x/js/20_ui/15_ScrollBox.js
@@ -597,11 +597,7 @@ function X_UI_ScrollBox_resetPosition( that, time ){
597597 };
598598
599599 function X_UI_ScrollBox_onAnimeEnd( e ){
600- if( e.target !== this.xnodeSlider ){
601- console.log( '- not much -' );
602- console.dir(e);
603- };
604- if( e.target === this.xnodeSlider && this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){
600+ if( this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){
605601 this.isInTransition = false;
606602 //console.log( '-2-' );
607603 this[ 'dispatch' ]( XUI_Event.SCROLL_END );
旧リポジトリブラウザで表示