एनीमेशन और कैनवास

मेरे हाथ कैनवस पर लग गए। मैंने उसे बहुत समय पहले देखा था, बहुत ज्यादा उसने मुझे रेखांकन के लिए एक उपकरण के रूप में पसंद किया। और Habré पर कैनवस सप्ताह ने ब्याज का समर्थन किया।

लेकिन बोरिंग ग्राफिक्स के बजाय, मैंने एनीमेशन की दिशा में खुदाई करना शुरू कर दिया। यह पता चला कि हम दृश्य को हर बार एक नए तरीके से खींचते हैं, क्रमशः वर्तमान फ़्रेम के बारे में सभी जानकारी जेएस में संग्रहीत की जाती है। और मैंने एक सरल एल्गोरिथ्म बनाने की कोशिश करने का फैसला किया है जो आपको उपयोगकर्ता के अनुरोध पर ऑब्जेक्ट, उनके राज्य और चयन के लिए एनिमेशन संग्रहीत करने की अनुमति देगा।

कैनवास

यहां सब कुछ सरल और मानक है।
<! DOCTYPE html >
< html >
< head >
< title > Animation test </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
</ head >
< body >
< canvas id ="cnv" width ="600" height ="200" > It's not working! </ canvas >
< select id ="animations" name ="animations" onchange ="changeAnimation(this.value)" >
< option value ="stop" > Stop </ option >
< option value ="jump" > Jump </ option >
< option value ="bum" > Bum </ option >
< option value ="dead" > Dead </ option >
</ select >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .


<! DOCTYPE html >
< html >
< head >
< title > Animation test </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
</ head >
< body >
< canvas id ="cnv" width ="600" height ="200" > It's not working! </ canvas >
< select id ="animations" name ="animations" onchange ="changeAnimation(this.value)" >
< option value ="stop" > Stop </ option >
< option value ="jump" > Jump </ option >
< option value ="bum" > Bum </ option >
< option value ="dead" > Dead </ option >
</ select >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .


<! DOCTYPE html >
< html >
< head >
< title > Animation test </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
</ head >
< body >
< canvas id ="cnv" width ="600" height ="200" > It's not working! </ canvas >
< select id ="animations" name ="animations" onchange ="changeAnimation(this.value)" >
< option value ="stop" > Stop </ option >
< option value ="jump" > Jump </ option >
< option value ="bum" > Bum </ option >
< option value ="dead" > Dead </ option >
</ select >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .

चयन वस्तु के लिए एनिमेशन की एक सूची के साथ कैनवास के तहत जोड़ा जाता है। मेरे पास एक ऑब्जेक्ट होगा, हालांकि एल्गोरिथ्म किसी भी प्रतिबंध का मतलब नहीं है।

वैश्विक चर

अब हम JS पर चलते हैं। यहां मुझे दृश्य वस्तुओं और संभव एनिमेशन को संग्रहीत करने के लिए कई चर की आवश्यकता होगी।
//
function $(id) {
return document .getElementById(id);
}

var tx = $( 'cnv' ).getContext( '2d' ); //
var childs = {}; //
var animate = {}; //
* This source code was highlighted with Source Code Highlighter .


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

var tx = $( 'cnv' ).getContext( '2d' ); //
var childs = {}; //
var animate = {}; //
* This source code was highlighted with Source Code Highlighter .


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

var tx = $( 'cnv' ).getContext( '2d' ); //
var childs = {}; //
var animate = {}; //
* This source code was highlighted with Source Code Highlighter .


चिल्ड सभी दृश्य वस्तुओं को बुनियादी मापदंडों के साथ संग्रहित करेगा। हम सरणी पर जाएंगे और एक-एक करके ड्रा करेंगे।
चेतन में, हम इसके एनीमेशन के उद्देश्य के लिए स्टोर करते हैं। यहां यह अलग तरह से किया जा सकता है, उदाहरण के लिए, चेतन में हम केवल उन वस्तुओं के लिए एनिमेशन संग्रहीत करते हैं जिनकी उन्हें आवश्यकता होती है, और दूसरों के लिए हम खुद ही चिल्ड एरे में रेंडरिंग पर जानकारी संग्रहीत करते हैं। मेरे संस्करण में, प्रत्येक ऑब्जेक्ट में कम से कम एक एनीमेशन होना चाहिए अगर वह कैनवास पर प्रदर्शित होना चाहता है।

एरेस भरें

सबसे पहले, हमारी वस्तु जोड़ें। मैंने पैरामीटर नहीं लिखा, क्योंकि मेरा मानना ​​है कि संक्षिप्तता के लिए, आप इसके लिए जा सकते हैं, और नाम सभी सहज हैं।

function initAnimation() {

//
childs[ 'ball' ] = {
'at' : 'jump' , //
'w' : 30, //
'h' : 30, //
'fw' : 30, //
'x' : 100, //
'y' : 100 //
}

//
animate[ 'ball' ] = {
'jump' : { //
'el' : null , // Image
'src' : 'images/ball.png' , //
'step' : 0, //
'speed' : 3, //
'curr' : 0, //
'steps' : 3, // , 0
'onend' : null //
},
'bum' : {
'el' : null ,
'src' : 'images/ball_m.png' ,
'step' : 0,
'speed' : 3,
'curr' : 0,
'steps' : 7,
'onend' : 'onBumEnd'
},
'stop' : {
'el' : null ,
'src' : 'images/ball_s.png' ,
'step' : 0,
'speed' : 10,
'curr' : 0,
'steps' : 0,
'onend' : null
},
'dead' : {
'el' : null ,
'src' : 'images/ball_d.png' ,
'step' : 0,
'speed' : 10,
'curr' : 0,
'steps' : 0,
'onend' : null
}
}

//
for ( var o in childs) {

//
for ( var a in animate[o]) {

//
var img = new Image();
img.src = animate[o][a].src;
//
animate[o][a].el = img;

}

}

}
* This source code was highlighted with Source Code Highlighter .


function initAnimation() {

//
childs[ 'ball' ] = {
'at' : 'jump' , //
'w' : 30, //
'h' : 30, //
'fw' : 30, //
'x' : 100, //
'y' : 100 //
}

//
animate[ 'ball' ] = {
'jump' : { //
'el' : null , // Image
'src' : 'images/ball.png' , //
'step' : 0, //
'speed' : 3, //
'curr' : 0, //
'steps' : 3, // , 0
'onend' : null //
},
'bum' : {
'el' : null ,
'src' : 'images/ball_m.png' ,
'step' : 0,
'speed' : 3,
'curr' : 0,
'steps' : 7,
'onend' : 'onBumEnd'
},
'stop' : {
'el' : null ,
'src' : 'images/ball_s.png' ,
'step' : 0,
'speed' : 10,
'curr' : 0,
'steps' : 0,
'onend' : null
},
'dead' : {
'el' : null ,
'src' : 'images/ball_d.png' ,
'step' : 0,
'speed' : 10,
'curr' : 0,
'steps' : 0,
'onend' : null
}
}

//
for ( var o in childs) {

//
for ( var a in animate[o]) {

//
var img = new Image();
img.src = animate[o][a].src;
//
animate[o][a].el = img;

}

}

}
* This source code was highlighted with Source Code Highlighter .


function initAnimation() {

//
childs[ 'ball' ] = {
'at' : 'jump' , //
'w' : 30, //
'h' : 30, //
'fw' : 30, //
'x' : 100, //
'y' : 100 //
}

//
animate[ 'ball' ] = {
'jump' : { //
'el' : null , // Image
'src' : 'images/ball.png' , //
'step' : 0, //
'speed' : 3, //
'curr' : 0, //
'steps' : 3, // , 0
'onend' : null //
},
'bum' : {
'el' : null ,
'src' : 'images/ball_m.png' ,
'step' : 0,
'speed' : 3,
'curr' : 0,
'steps' : 7,
'onend' : 'onBumEnd'
},
'stop' : {
'el' : null ,
'src' : 'images/ball_s.png' ,
'step' : 0,
'speed' : 10,
'curr' : 0,
'steps' : 0,
'onend' : null
},
'dead' : {
'el' : null ,
'src' : 'images/ball_d.png' ,
'step' : 0,
'speed' : 10,
'curr' : 0,
'steps' : 0,
'onend' : null
}
}

//
for ( var o in childs) {

//
for ( var a in animate[o]) {

//
var img = new Image();
img.src = animate[o][a].src;
//
animate[o][a].el = img;

}

}

}
* This source code was highlighted with Source Code Highlighter .


मैं थोड़ा समझाऊंगा। प्रत्येक एनीमेशन सभी फ़्रेमों के साथ एक फ़ाइल है। कैनवास पर, मैं वर्तमान फ्रेम के अनुरूप छवि का केवल भाग प्रदर्शित करता हूं। इसके लिए, मैं चरण और चरणों (फ़्रेमों की संख्या) को संग्रहीत करता हूं।

छवि इस प्रकार है:

यह सबसे बड़ी 8 फ्रेम बम एनीमेशन के लिए जिम्मेदार सबसे बड़ी छवि है।

गति और वक्र फ्रेम स्विचिंग गति के लिए जिम्मेदार हैं। मैं कैनवास को हर 16ms पर फिर से चलाता हूं और ताकि फ्रेम आवश्यक गति से बदल जाए, मैं वक्र पर विचार करता हूं और गति तक पहुंचने के बाद मैं फ्रेम को बदलता हूं।

मैं एनीमेशन के अंत में ओनेंड कहता हूं। यहां हम एनीमेशन के प्रकार को बदल सकते हैं - विस्फोट से अवशेषों को प्रदर्शित करने या किसी ऑब्जेक्ट को सरणी से हटाने के लिए। इस के लिए, एक छोटे से अधिक, मैं एक समारोह है:
function onBumEnd() {

//
childs[ 'ball' ].at = 'dead' ;
//
animate[ 'ball' ][childs[ 'ball' ].at].curr = 0;

}

* This source code was highlighted with Source Code Highlighter .


function onBumEnd() {

//
childs[ 'ball' ].at = 'dead' ;
//
animate[ 'ball' ][childs[ 'ball' ].at].curr = 0;

}

* This source code was highlighted with Source Code Highlighter .


function onBumEnd() {

//
childs[ 'ball' ].at = 'dead' ;
//
animate[ 'ball' ][childs[ 'ball' ].at].curr = 0;

}

* This source code was highlighted with Source Code Highlighter .


एनिमेशन

एक वस्तु के लिए 4 एनिमेशन हैं:

• यह कार्य करना चाहिए:
• कूदता है:
• फट:
• मृत:

एनीमेशन बदलने का कार्य

एनिमेशन को आसानी से बदलने के लिए, हमारे पास चयन और इसके लिए एक फ़ंक्शन है:
function changeAnimation(value) {

//
childs[ 'ball' ].at = value;
//
animate[ 'ball' ][childs[ 'ball' ].at].curr = 0;

}

* This source code was highlighted with Source Code Highlighter .


function changeAnimation(value) {

//
childs[ 'ball' ].at = value;
//
animate[ 'ball' ][childs[ 'ball' ].at].curr = 0;

}

* This source code was highlighted with Source Code Highlighter .


function changeAnimation(value) {

//
childs[ 'ball' ].at = value;
//
animate[ 'ball' ][childs[ 'ball' ].at].curr = 0;

}

* This source code was highlighted with Source Code Highlighter .


हम लॉन्च करते हैं

तो सभी चित्र और सरणियां तैयार हैं, और मैं एनीमेशन शुरू करता हूं।
function startAnimation() {

//
setInterval( function () {

//
ctx.save();
ctx.fillStyle = '#FFFFFF' ;
ctx.fillRect(0, 0, 600, 200);
ctx.restore();

//
for ( var o in childs) {

//
if (animate[o]) {

//
var step = animate[o][childs[o].at].step;

//
ctx.drawImage(
animate[o][childs[o].at].el, // Image
Math.round(childs[o].fw * step), // , *
0, // , 0
childs[o].w, //
childs[o].h, //
childs[o].x, //
childs[o].y, //
childs[o].w, //
childs[o].h //
);

// speed,
if (animate[o][childs[o].at].curr >= animate[o][childs[o].at].speed) {

//,
if (animate[o][childs[o].at].step >= animate[o][childs[o].at].steps) {

animate[o][childs[o].at].step = 0;

// , ,
if (animate[o][childs[o].at].onend)
window[animate[o][childs[o].at].onend]();

}
else animate[o][childs[o].at].step++;

//
animate[o][childs[o].at].curr = 0;

}

//
animate[o][childs[o].at].curr++;

}

}

}, 1000/16);

}

* This source code was highlighted with Source Code Highlighter .


function startAnimation() {

//
setInterval( function () {

//
ctx.save();
ctx.fillStyle = '#FFFFFF' ;
ctx.fillRect(0, 0, 600, 200);
ctx.restore();

//
for ( var o in childs) {

//
if (animate[o]) {

//
var step = animate[o][childs[o].at].step;

//
ctx.drawImage(
animate[o][childs[o].at].el, // Image
Math.round(childs[o].fw * step), // , *
0, // , 0
childs[o].w, //
childs[o].h, //
childs[o].x, //
childs[o].y, //
childs[o].w, //
childs[o].h //
);

// speed,
if (animate[o][childs[o].at].curr >= animate[o][childs[o].at].speed) {

//,
if (animate[o][childs[o].at].step >= animate[o][childs[o].at].steps) {

animate[o][childs[o].at].step = 0;

// , ,
if (animate[o][childs[o].at].onend)
window[animate[o][childs[o].at].onend]();

}
else animate[o][childs[o].at].step++;

//
animate[o][childs[o].at].curr = 0;

}

//
animate[o][childs[o].at].curr++;

}

}

}, 1000/16);

}

* This source code was highlighted with Source Code Highlighter .


function startAnimation() {

//
setInterval( function () {

//
ctx.save();
ctx.fillStyle = '#FFFFFF' ;
ctx.fillRect(0, 0, 600, 200);
ctx.restore();

//
for ( var o in childs) {

//
if (animate[o]) {

//
var step = animate[o][childs[o].at].step;

//
ctx.drawImage(
animate[o][childs[o].at].el, // Image
Math.round(childs[o].fw * step), // , *
0, // , 0
childs[o].w, //
childs[o].h, //
childs[o].x, //
childs[o].y, //
childs[o].w, //
childs[o].h //
);

// speed,
if (animate[o][childs[o].at].curr >= animate[o][childs[o].at].speed) {

//,
if (animate[o][childs[o].at].step >= animate[o][childs[o].at].steps) {

animate[o][childs[o].at].step = 0;

// , ,
if (animate[o][childs[o].at].onend)
window[animate[o][childs[o].at].onend]();

}
else animate[o][childs[o].at].step++;

//
animate[o][childs[o].at].curr = 0;

}

//
animate[o][childs[o].at].curr++;

}

}

}, 1000/16);

}

* This source code was highlighted with Source Code Highlighter .


सिद्धांत रूप में, मुझे लगता है कि टिप्पणियों से यह स्पष्ट है कि क्या आ रहा है और यह कैसे काम करता है। नतीजतन, मुझे दृश्य वस्तुओं को बचाने, गतिशील रूप से एनीमेशन सेट करने और इसके अंत पर प्रतिक्रिया करने का अवसर मिला।
चूंकि एनीमेशन में वस्तुओं को अक्सर दोहराया जाता है, इसलिए यह पुस्तकालय के सिद्धांत के अनुसार, वस्तुओं के एक सरणी के रूप में चिल्ड का उपयोग करने के लिए समझ में आता है।
बेशक सुधार करने के लिए कुछ है, लेकिन फिलहाल मुझे एनीमेशन के विषय पर एक अच्छा लेख नहीं मिला है और मैं अपने स्वयं के संस्करण का प्रस्ताव करता हूं।

संपूर्ण कोड

आप इसे यहाँ देख सकते हैं।
आप इसे यहाँ डाउनलोड कर सकते हैं ।