Questions tagged [cancelanimationframe]
27 questions
0
votes
2 answers
How to cancel current animation and immediately start new one with mouse event and requestAnimationFrame()
I want the dot to follow mouse cursor, e.g. on click.
Code seems simple, but with every click the dot runs shorter distance and doesn't reach the target.
The question is why?
The code is here:
https://jsfiddle.net/thiefunny/ny0chx3q/3/
HTML
Mikołaj Walanus
- 33
- 5
0
votes
1 answer
How to prevent requestAnimationFrame from redrawing canvas more then one time after clicking the button?
I am drawing canvas sin and adding movement to it
export class CanvasComponent implements OnInit {
@ViewChild('canvas', { static: true })
canvas: ElementRef;
ctx: CanvasRenderingContext2D;
winddrawvalue = 0;
windvalue…
Ioannis Mikhailidis
- 41
- 1
- 8
0
votes
1 answer
How do I stop a canvas animation when the same function is called again?
I am currently coding a website where, upon clicking a navigation link, HTML canvas draws a line to the relevant content box (I used markE's brilliant answer here https://stackoverflow.com/a/23941786 as a tutorial for the animation). I am in the…
Neniariel
- 23
- 7
0
votes
0 answers
RequestAnimationFrame, Arguments vs. Variables
So I am trying to create a function that will make an object move in a curving motion. This function is supposed to be reused and should be able to take different numbers as arguments. The numbers will serve as control points that guide the curve…
user2892930
- 1
- 1
- 3
0
votes
2 answers
Why cancelAnimationFrame doesn't cancel the requestAnimationFrame?
I can't figure out why the cancelAnimationFrame method does not cancel the requestAnimationFrame. The console still logs the message. Can anyone provide an explanation?
ukulele
- 79
- 10
0
votes
1 answer
How does cancelAnimationFrame work when the ids keeps incrementing?
Background:
When using setInterval or setTimeout we receive a single Id to cancel/clear the actions.
setInterval/setTimeout:
const timeoutId = setTimeout(() => {clearTimeout(timeoutId)}, 1000);
const intervalId = setInterval(() =>…
Armeen Moon
- 18,061
- 35
- 120
- 233
0
votes
1 answer
cancelAnimationFrame() not working when a conditional is true - JS Canvas
I'm building a small game similar to Chicken Invaders using the JS Canvas. Currently, I'm stuck with the effect of your ship exploding when an enemy hits your ship. I'm trying to create the effect on its own in a separate file.
My idea is that when…
Saif Taher
- 325
- 1
- 12
0
votes
3 answers
cancel canvas animation by adding eventListener
I am trying to reset my rectangle animation from the starting point when I resize the browser, the code is like this:
/*from basic setup*/
canvas = document.getElementById("myCanvas");
canvas.height = window.innerHeight;
canvas.width =…
mystreie
- 133
- 1
- 2
- 14
0
votes
0 answers
Canvas animation and animationFrame, snake effect
I am drawing four rectangles in my canvas, one for each side that goes back and forth (or up and down) automatically. What I would like to create is a snake effect, where for example my animation starts with the rectangle on the top that goes all…
intro__codes
- 172
- 9
0
votes
1 answer
Is there an optimization in canceling request animation frame?
Would there be any benefit(or even possible in window.cancelAnimationFrame(); this example below?
If so, How would I do so, and why?
Ref: requestAnimationFrame MDN
var last_known_scroll_position = 0;
var ticking = false;
function…
Armeen Moon
- 18,061
- 35
- 120
- 233
0
votes
1 answer
JS cancelAnimationFrame syntax
This may be really easy question but i just started playing with request animation frame and i need some guidance. I found on the internet that the safest (in terms of browser compatibility) syntax for request animation frame is this code:
…
Mevia
- 1,517
- 1
- 16
- 51
-1
votes
1 answer
Where to invoke cancelAnimationFrame upon completion?
I could not identify a line in step() function to indicate that the animation has completed. Therefore, I could not cancelAnimationFrame correctly.
Question: Is this the reason why cancelAnimationFrame() is not working? If yes, at which line of…
Jek
- 5,546
- 9
- 37
- 67