{"id":886,"date":"2016-07-18T16:33:15","date_gmt":"2016-07-18T21:33:15","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=886"},"modified":"2017-02-03T14:34:38","modified_gmt":"2017-02-03T19:34:38","slug":"reproducing-a-clever-animation-product-part-26","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/07\/18\/reproducing-a-clever-animation-product-part-26\/","title":{"rendered":"Reproducing A Clever Animation Product, Part 26"},"content":{"rendered":"<p>I got the basics of the fountain effect working.  I defined forty elements, gave them random characteristics in a loop, set a delay of 1.5 seconds from the end of the previous animation element, then set the forty elements to begin flying on a 1.45 second setback following by a jump back 1.5 seconds.  This has the effect of launching a new element every 0.05 seconds (twenty per second) for two seconds, with the elements all clearing after a further 1.5 seconds minus.<\/p>\n<p>It could probably be tweaked a hair, but I hope you&#8217;ll agree that this is a respectable emulation of the effect shown on the <a href=\"http:\/\/www.greensock.com\">Greensock home page.<\/a>  Again, I have no idea whether I&#8217;ve done this the same way they did, but it works well enough.<\/p>\n<p>Here is the initialization code.  The <code>handle006<\/code> element was already in place, but I added a clear instruction with a 1.5 second delay, as described above.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      var handle006 = document.getElementById(\"handle006\");\r\n      bcInitElement(handle006,\"20px\",\"201px\",\"green\",\"rgba(0,0,0,0)\",\"260px\",1,\"block\",\"This text reacts to gravity.\");\r\n      addTransformToList(\"handle006\",2.0,{topNew:0},{effect: \"gravity\", velocity: -8.0, acceleration: 0.16});\r\n      addTransformToList(\"handle006\",2.0,{left:80},\"linear\",\"-=2.00\");\r\n      addTransformToList(\"handle006\",0.00,{display:\"none\"},\"\",\"+=1.50\");\r\n\r\n      var ftnElementNames = new Array;\r\n      ftnElementNames[ 0] = \"ftn000\";\r\n      ftnElementNames[ 1] = \"ftn001\";\r\n      ftnElementNames[ 2] = \"ftn002\";\r\n      ftnElementNames[ 3] = \"ftn003\";\r\n      ftnElementNames[ 4] = \"ftn004\";\r\n      ftnElementNames[ 5] = \"ftn005\";\r\n      ftnElementNames[ 6] = \"ftn006\";\r\n      ftnElementNames[ 7] = \"ftn007\";\r\n      ftnElementNames[ 8] = \"ftn008\";\r\n      ftnElementNames[ 9] = \"ftn009\";\r\n      ftnElementNames[10] = \"ftn010\";\r\n      ftnElementNames[11] = \"ftn011\";\r\n      ftnElementNames[12] = \"ftn012\";\r\n      ftnElementNames[13] = \"ftn013\";\r\n      ftnElementNames[14] = \"ftn014\";\r\n      ftnElementNames[15] = \"ftn015\";\r\n      ftnElementNames[16] = \"ftn016\";\r\n      ftnElementNames[17] = \"ftn017\";\r\n      ftnElementNames[18] = \"ftn018\";\r\n      ftnElementNames[19] = \"ftn019\";\r\n      ftnElementNames[20] = \"ftn020\";\r\n      ftnElementNames[21] = \"ftn021\";\r\n      ftnElementNames[22] = \"ftn022\";\r\n      ftnElementNames[23] = \"ftn023\";\r\n      ftnElementNames[24] = \"ftn024\";\r\n      ftnElementNames[25] = \"ftn025\";\r\n      ftnElementNames[26] = \"ftn026\";\r\n      ftnElementNames[27] = \"ftn027\";\r\n      ftnElementNames[28] = \"ftn028\";\r\n      ftnElementNames[29] = \"ftn029\";\r\n      ftnElementNames[30] = \"ftn030\";\r\n      ftnElementNames[31] = \"ftn031\";\r\n      ftnElementNames[32] = \"ftn032\";\r\n      ftnElementNames[33] = \"ftn033\";\r\n      ftnElementNames[34] = \"ftn034\";\r\n      ftnElementNames[35] = \"ftn035\";\r\n      ftnElementNames[36] = \"ftn036\";\r\n      ftnElementNames[37] = \"ftn037\";\r\n      ftnElementNames[38] = \"ftn038\";\r\n      ftnElementNames[39] = \"ftn039\";\r\n\r\n      var ftnElements = new Array;\r\n      var tempHalf;\r\n      var tempColor;\r\n      var startX = new Array;\r\n      var endX = new Array;\r\n      var tempVelocity = new Array;\r\n      var tempAcceleration = new Array;\r\n      var tempColors = new Array;\r\n      tempColors[0] = \"#770000\";\r\n      tempColors[1] = \"#990000\";\r\n      tempColors[2] = \"#BB0000\";\r\n      tempColors[3] = \"#DD0000\";\r\n      tempColors[4] = \"#FF0000\";\r\n\r\n      for (var j=0; j<40; j++) {\r\n        ftnElements[j] = document.getElementById(ftnElementNames[j]);      \r\n        tempHalf = Math.floor((Math.random() * 3) + 1);\r\n        tempWidth = 8 + tempHalf * 2 + \"px\";\r\n        tempColor = Math.floor((Math.random() * 4) + 1);\r\n        startX[j] = \"140px\";\r\n        endX[j] = -148 + Math.floor((Math.random() * 282) + 1) + \"px\";\r\n        tempVelocity[j] = -9.0 - Math.random() * 4;\r\n        tempAcceleration[j] = 0.37; \/\/0.25 + Math.random() * 0.25;\r\n        bcInitElement(ftnElements[j],startX[j],\"201px\",\"#FFFFFF\",tempColors[tempColor],tempWidth,1,\"block\",\"\");\r\n        ftnElements[j].style.height = tempWidth;\r\n        ftnElements[j].style.borderRadius = 4 + tempHalf + \"px\";\r\n        addTransformToList(ftnElementNames[j],1.5,{topNew:0},{effect: \"gravity\", velocity: tempVelocity[j], acceleration: tempAcceleration[j]},\"-=1.45\");\r\n        addTransformToList(ftnElementNames[j],1.5,{left: endX[j]},\"linear\",\"-=1.50\");\r\n      }\r\n<\/pre>\n<p><iframe loading=\"lazy\" width=\"330px\" height=\"480px\" src=\"https:\/\/www.rpchurchill.com\/demo\/animation\/animation_demo_20160718.html\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>I'll work on looping back at a later date, since I'm currently doing a very long road trip to clear my mind before coming back home to get back at it.  Please feel free to contact me as I'm traveling.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I got the basics of the fountain effect working. I defined forty elements, gave them random characteristics in a loop, set a delay of 1.5 seconds from the end of the previous animation element, then set the forty elements to &hellip; <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/07\/18\/reproducing-a-clever-animation-product-part-26\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[87,101,49],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/886"}],"collection":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/comments?post=886"}],"version-history":[{"count":6,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/886\/revisions"}],"predecessor-version":[{"id":1437,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/886\/revisions\/1437"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}