I dare anyone to tell me any better explanation for this thing! It's okay, youtube has billions of videos, feel free to try to tell me which channel even dares to compare!! Thanks prof, this was awesome, as usual of course!!!
Well, you know, while the best explanaition I myself have come to so far as well, there is no video response feature anymore on RU-vid for anybody to post a challenge to your dare.
As chaotic as web development is, this has been a very straight-forward and useful resource for me to begin puzzling out how I could possibly start writing some 2-D physics engine in JavaScript.
I find that, oftentimes, when people try to name things to be more "friendly", it ends up making things more confusing. This was overall a great explanation though!
Thx! Good introduction to the topic. I just transormed my setInteval functions to requestAnimationFrame. Now all browsers has the same effect. Earlier animations on FF were little bit too lazy ;)
Hi Steve, is there any benefit to wrapping something in window.requestAnimationFrame if you aren't repeatedly/recursively calling the callback? I've noticed people doing that sometimes and I'm not sure what the purpose is
It uses a different part of the event loop for scheduling things. So, if you need to have tasks, and microtasks and raf calls in a specific order, then it might be something you want. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-w-jULX0D5cg.html - video about the event loop etc.
When animating, stick to using transform and opacity as much as possible to get the best performance. Most things can be done in CSS but if you need to calculate position or property values then you will using JS. If you use JS then use requestAnimationFrame instead of setTimeout or setInterval.
Hello Steve, thank you very much for your helpful video. I have a question: if I have multiple box elements and access them via an array const boxes = document.querySelectorAll(".box"); I would like to apply the box.style.transform ... for every item in the array when clicking with forEach, like boxes.forEach(item =>{item.addEventListener("click", ()=>handleClick()} ? I keep getting the error: Uncaught TypeError: Cannot set properties of undefined (setting 'transform'). I don't really understand this error. Please help. Thank you very much.
Whenever you see an error that say "Cannot" do something "of undefined (setting x)" It means that the thing you wrote in front of x is undefined. Usually a misspelled variable or missing variable or wrong scope of variable.
So I'm making a small grid-based game project in the JS canvas. I am needing a fixed time-step sort of mechanism for various updates. Would you say the easiest method is to call my draw() and update() functions after a certain count of frames in the requestAnimationFrame loop? Can I assume that this framerate will not be too different on different browsers/machines?
The frame rate will definitely vary depending on the machine. But with requestAnimationFrame and highRes timestamps you can calculate things to run smoothly. You can also look at the Web Animations API.
Aw yes pretty smooth indeed.. I was getting smooth movements but now i get jerky movement in my windows programming when im programming my win32 NES emulator soooo it's about timing that causes it?
Animation with JS is a complex topic with many layers, many techniques, and many approaches. requestAnimationFrame is just one tool in the toolbox. There are many factors that go into making animations run smoothly and many things that can interfere with that.
The function runs automatically each time the screen is being painted. Most of the time this should be a fairly stable time increment with smooth animations. You can use the time passed between frames or time passed since the page loaded to calculate things.
You can make tutorial requests in the comments here - But I have several videos about that already: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ga_SLzsUdTY.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rhqeN10bK10.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-J06Uz7m-Jn8.html
@@SteveGriffith-Prof3ssorSt3v3 yeah sir First thank you for reply You taught them i am talking about touch image slider. Then we will get how to use them.
