Lark Posted December 16, 2021 Share Posted December 16, 2021 Hello! I'm trying to make a rain effect that's is at least midly efficient. In the below example, when an element reaches its destination it is deleted, then a new element is created. I would like to, instead, have an element reshuffle its size and color, then move to a new initial position and just fall again. I tried rewriting the generateRainDrop function, to have it take an existing drop and just set its size , color, and position. This worked to the extent that the boxes did reshuffle, but then they stopped spinning - they just fell down. I tried using pause and play in between setting, and also tried using invalidate, to varying degrees of failure. At no point could I get a box to: randomly change size, color and initial position then continue falling and spinning, without recreating the box fully. See the Pen ZEXemXg by LarkRanger (@LarkRanger) on CodePen 1 Link to comment Share on other sites More sharing options...
_Greg _ Posted December 16, 2021 Share Posted December 16, 2021 Hi! Not sure that this is right way, i think is simple way to use `repeatRefresh` Check See the Pen dyVvaaY?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen duration, delay, and stagger you can't update with this method. 2 Link to comment Share on other sites More sharing options...
Lark Posted December 16, 2021 Author Share Posted December 16, 2021 That is actually really cool. I tried repeatRefresh but couldn't get it to work with the randomizer functions being outer scope, but I guess that if you implement all the colors like this it works just fine, haven't tried that. Thanks! Link to comment Share on other sites More sharing options...
Carl Posted December 16, 2021 Share Posted December 16, 2021 you were on the right track with using the onComplete to call a function that did stuff again. I separated the animating and generating functions so that when each drop was done animating it would call a function that would reposition it and animate it again. I was working quickly so I hacked some things up a bit. But this should show the general idea and I'm sure you can add back in some of your other things without any trouble See the Pen MWEpxbR?editors=0010 by snorkltv (@snorkltv) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now