Loop Snowflake Animation - Html5 Canvas

Question

HiIn Animate CC on an HTML canvas for a web banner I want to animate snowflakes on a landscape.  At the moment I'm using  "Code Snippets" --> "Html5 Canvas" --> " Animation" --> "Animate Horizontally" and animated several snowflake-Movie-Clips falling from top to bottom.  How can I loop snow infinitely so that it falls endlessly from top to bottom? I found this article:https://theblog.adobe.com/html5-canvas-javascript-basics/But I didn't quite understand how to use the code correctly in a html5-banner without buttons.

kglad · Accepted Answer

create a snowflake and assign it a class/linkage id = "Snow". you can then use:

var snowA = [];

var tl = this;

var snowNum = 100;

var snow;

createSnowF();

var animateSnowI = setInterval(animateSnowF,100);

function createSnowF(){

for(var i=0;i<snowNum;i++){

snow = new lib.Snow;

snow.x = stage.canvas.width*Math.random();

snow.y = -stage.canvas.height*Math.random();

snow.rot = 2*Math.round(Math.random())-1;

snow.sp = 5*Math.round(Math.random())+5;

tl.addChild(snow);

snowA.push(snow);

}

function animateSnowF(){

for(var i=0;i<snowNum;i++){

snowA.rotation+=5*snowA.rot;

snowA.y+=snowA.sp;

if(snowA.y>stage.canvas.height+snowA.nominalBounds.height){

snowA.y=-snowA.nominalBounds.height;

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.