{"id":2180,"date":"2017-08-13T12:26:26","date_gmt":"2017-08-13T12:26:26","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=2180"},"modified":"2018-04-08T08:18:32","modified_gmt":"2018-04-08T08:18:32","slug":"animated-butterfly","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/animated-butterfly\/","title":{"rendered":"Animated Butterfly"},"content":{"rendered":"<p>We can create an animated butterfly that is flapping its wings using the <strong>setInterval()<\/strong> method.<\/p>\n<p>In this example, we need to use eight\u00a0images of a \u00a0butterfly that flaps its wings at a different stage.<\/p>\n<p><a href=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2181\" src=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif\" alt=\"\" width=\"50\" height=\"50\" \/><\/a><a href=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly2.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2182\" src=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly2.gif\" alt=\"\" width=\"50\" height=\"50\" \/><\/a><a href=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly3.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2183\" src=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly3.gif\" alt=\"\" width=\"50\" height=\"50\" \/><\/a><a href=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly4.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2184\" src=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly4.gif\" alt=\"\" width=\"50\" height=\"50\" \/><\/a><a href=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly5.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2187\" src=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly5.gif\" alt=\"\" width=\"50\" height=\"50\" \/><\/a><a href=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly6-2.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2188\" src=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly6-2.gif\" alt=\"\" width=\"50\" height=\"50\" \/><\/a><a href=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly7.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2189\" src=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly7.gif\" alt=\"\" width=\"50\" height=\"50\" \/><\/a><a href=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly8.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2190\" src=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly8.gif\" alt=\"\" width=\"50\" height=\"50\" \/><\/a><\/p>\n<p>Name the images files as bfly1.gif,\u00a0bfly2.gif,\u00a0bfly3gif, bfly4.gif,\u00a0bfly5.gif,\u00a0bfly6.gif,\u00a0bfly7.gif,\u00a0bfly8.gif.<\/p>\n<p>We need to load the images starting from image1 till image 8 and then repeat the sequence again at a regular interval set by using the\u00a0<strong>setInterval()<\/strong> method.<\/p>\n<p>We declare a global variable i and assign an initial value 0 to it, then use the iteration i+=1 to increase its value one at a time. We reset the value of i\u00a0back to 0 after its value exceed 9 using the if statement.<\/p>\n<p>We use the following statement to load the images:<\/p>\n<pre>var dice = document.getElementById(\"die\");\r\ndice.src=\"bfly\"+i+\".gif\";<\/pre>\n<p>The full script is as follows:<\/p>\n<pre>var i=0\r\n\r\nvar step;\r\nfunction start(){\r\n\r\nmyVar=setInterval(rolldice,100);\r\n}\r\nfunction rolldice(){\r\ni+=1\r\nif (i&lt;9){\r\nvar dice = document.getElementById(\"die\");\r\ndice.src=\"bfly\"+i+\".gif\";\r\n}\r\nelse\r\n{i=0}\r\n}\r\nfunction stop()\r\n{clearInterval(myVar)}\r\n\r\n\u00a0\r\n\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>View<a href=\"http:\/\/javascript-tutor.net\/Jsample\/animated_bfly.htm\"> Animated Butterfly<\/a> here.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We can create an animated butterfly that is flapping its wings using the setInterval() method. In this example, we need to use eight\u00a0images of a \u00a0butterfly that flaps its wings at a different stage. Name the images files as bfly1.gif,\u00a0bfly2.gif,\u00a0bfly3gif, bfly4.gif,\u00a0bfly5.gif,\u00a0bfly6.gif,\u00a0bfly7.gif,\u00a0bfly8.gif. We need to load the images starting from image1 till image 8 and then &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/animated-butterfly\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Animated Butterfly&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2180","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animated Butterfly - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"Created an animated butterfly in JavaScript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Butterfly - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"Created an animated butterfly in JavaScript\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-08T08:18:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/animated-butterfly\/\",\"url\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html\",\"name\":\"Animated Butterfly - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#primaryimage\"},\"image\":{\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#primaryimage\"},\"thumbnailUrl\":\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif\",\"datePublished\":\"2017-08-13T12:26:26+00:00\",\"dateModified\":\"2018-04-08T08:18:32+00:00\",\"description\":\"Created an animated butterfly in JavaScript\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#primaryimage\",\"url\":\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif\",\"contentUrl\":\"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated Butterfly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated Butterfly - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Created an animated butterfly in JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html","og_locale":"en_US","og_type":"article","og_title":"Animated Butterfly - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"Created an animated butterfly in JavaScript","og_url":"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2018-04-08T08:18:32+00:00","og_image":[{"url":"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/animated-butterfly\/","url":"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html","name":"Animated Butterfly - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"primaryImageOfPage":{"@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#primaryimage"},"image":{"@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#primaryimage"},"thumbnailUrl":"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif","datePublished":"2017-08-13T12:26:26+00:00","dateModified":"2018-04-08T08:18:32+00:00","description":"Created an animated butterfly in JavaScript","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#primaryimage","url":"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif","contentUrl":"http:\/\/javascript-tutor.net\/wp\/wp-content\/uploads\/2017\/08\/bfly1.gif"},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anibtfly.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"Animated Butterfly"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=2180"}],"version-history":[{"count":6,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2180\/revisions"}],"predecessor-version":[{"id":2542,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2180\/revisions\/2542"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=2180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}