18 function con() { console.log( Array.prototype.join.call( arguments, " " ) ); }

19 function $( id ) { return document.getElementById( id ); }

24 function onloadx() {
25
26 canvasEL = $( "canvasELID" );
27 canvas = canvasEL.getContext( '2d' );
28 screenW = canvas.canvas.width;
29 screenH = canvas.canvas.height;
30
31
32
33 //画面要素の作成
34 elements = new Object();
35 elements.A = new Element( 50, 300, null, null, "red" );
36 elements.B = new Element( 500, 300, null, null, "green" );
37 elements.C = new Element( 250, 300, null, null, "blue" );
38
39
40 //アニメエンジン始動
41 anms = new Array();
42 timerMS = 100;
43 timerID = setInterval( run, timerMS );
44
45
46 //アニメの作成
47 anm = new Anm( timerMS, 2000, function() { console.log( "callback" ) } );
48
49 //●3 関数での移動ができている。
50
51 //どのように移動するかを定義する関数
52
53 //放物線　関数
54 f1 = function() {
55 var cnt = this.parent.cnt;
56 var cntmax = this.parent.cntmax;
57
58 var x = cnt / cntmax; //0～1
59 x -= .5;
60
61 var y = x * x * 1000;
62
63 return y;
64 }
65
66 //正弦波　関数
67 f2 = function() {
68 var cnt = this.parent.cnt;
69 var cntmax = this.parent.cntmax;
70
71 var y = Math.sin( cnt ) * 20;
72
73 return y;
74 }
75
76 //各動き
77 anm.add( elements.A, "x", elements.A.x, elements.C.x );
78 anm.add( elements.A, "y", elements.A.y, elements.C.y, f1 );
79 anm.add( elements.B, "x", elements.B.x, elements.C.x );
80 anm.add( elements.B, "y", elements.B.y, elements.C.y, f2 );
81 anm.reverse = true;
82 anms.push( anm );
83
84
85 //背景色アニメ
86 anm = new Anm( timerMS, 3000 );
87
88 //新しい背景色を返す関数
89 f3 = function() {
90 var cnt = this.parent.cnt;
91 var cntmax = this.parent.cntmax;
92
93 var val = 255 * ( cnt / cntmax );
94
95 return "RGB(" + val + "," + val + "," + val + ")";
96 }
97
98 anm.add( document.body.style, "backgroundColor", 0, 255, f3 );
99 anm.reverse = true;
100 anms.push( anm );
101
102 }

103 function run() {
104 var drawFLG = false;
105
106 //アニメ実行
107 for( var i = 0; i < anms.length; i++ ) {
108 var anm = anms[ i ];
109
110 //check. アニメの終了検知
111 if( anm.reverse ) {
112 if( anm.direction > 0 && anm.cnt > anm.cntmax ) {
113 anm.direction *= -1;
114 anm.cnt = anm.cntmax - 1;
115 } else if( anm.direction < 0 && anm.cnt < 0 ) {
116 anm.direction *= -1;
117 anm.cnt = 1;
118 }
119 } else if( anm.cnt > anm.cntmax ) {
120
121 //●2 一連のアニメの終了でcallbackが実行できている。　大きな目的。
122
123 anms.splice( i--, 1 ); //アニメ削除
124 anm.callback(); //アニメ後処理
125 continue;
126 }
127
128 //アニメanmが含む各動きmotionについて
129 for( var j = 0; j < anm.motions.length; j++ ) {
130
131 var motion = anm.motions[ j ];
132
133 if( motion.isNum ) {//変更する値が数値である場合
134
135 if( motion.f )
136 motion.element[ motion.member ] = motion.sx + motion.f() - motion.firstF; //←関数はここで実行
137 else //単純な移動　始点から目的地までの距離＊進捗
138 motion.element[ motion.member ] = motion.sx + motion.length * ( anm.cnt / anm.cntmax );
139
140 } else //変更する値が文字列である場合（ たとえば、"RGB(255,255,255)" など ）
141 motion.element[ motion.member ] = motion.f();
142
143 }//for j
144
145 anm.cnt += anm.direction;
146 drawFLG = true;
147
148 }//for i
149
150 if( drawFLG ) draw( canvas );
151 }

152 function draw( cc ) {
153 cc.clearRect( 0, 0, screenW, screenH );
154 //画面要素を描く（赤、青、緑の四角）
155 for( var name in elements ) {
156 var element = elements[ name ];
157 element.draw( cc );
158 }
159 }