leet-ice Posted October 11, 2022 Share Posted October 11, 2022 Wanting to animate a meter, similar to one in Fishing Clash, attached below at ~1:06.. Basically meter starts dropping to 0%, pressing a button has it go to 100% slowly. If it goes to 0, fish gets away. If meter goes to 100%, your line breaks. Seems like function-based values would help figure out new 'x' to go to onmousedown, but is that the best way to handle a dynamic 'x' to tween to? Calling invalidate seems to make it glitch/jumpy.. Would be nice if instead the dynamic function was called every single frame? But that's probably innefecient. https://greensock.com/function-based/ Other thing would be is adding in randomization, like every few seconds, maybe the fish starts pulling harder, and meter is going faster to 0%? or it's swimming towards you and you don't need to reel in as fast? Link to comment Share on other sites More sharing options...
Carl Posted October 11, 2022 Share Posted October 11, 2022 49 minutes ago, leet-ice said: Calling invalidate seems to make it glitch/jumpy do you have an example of this? this seems like an interesting challenge but it would be best to provide a minimal demo so that we can better understand what you are trying to do. This isn't typically the type of thing we just build up from scratch on request. Also a question: When you say "pressing a button has it go to 100% slowly" does that mean pressing and holding down or pressing multiple times in quick succession. Trying to better understand the game mechanics and see what features of GSAP might help you best. 1 Link to comment Share on other sites More sharing options...
Denis Gonchar Posted October 11, 2022 Share Posted October 11, 2022 Here we are... See the Pen poVqNYX by charnog (@charnog) on CodePen To implement... 1 hour ago, leet-ice said: Other thing would be is adding in randomization, like every few seconds, maybe the fish starts pulling harder, and meter is going faster to 0%? or it's swimming towards you and you don't need to reel in as fast? ... you can use setTimeout() with random time values and adjust the .timeScale() of the timeline randomly. 2 Link to comment Share on other sites More sharing options...
leet-ice Posted October 11, 2022 Author Share Posted October 11, 2022 Technically on mouse down it should keep tweening toward 100%. On release it continues to 0%. I'm not sure .progress() is solution due to this. Kinda seems like I should just build my own interval and handle it without tweens.. Link to comment Share on other sites More sharing options...
Denis Gonchar Posted October 12, 2022 Share Posted October 12, 2022 See the Pen RwyExeP by charnog (@charnog) on CodePen 3 1 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