-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
97 lines (70 loc) · 2.3 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
---
title: "XRSession: cancelAnimationFrame() method"
short-title: cancelAnimationFrame()
slug: Web/API/XRSession/cancelAnimationFrame
page-type: web-api-instance-method
status:
- experimental
browser-compat: api.XRSession.cancelAnimationFrame
---
{{APIRef("WebXR Device API")}}{{SeeCompatTable}}{{SecureContext_Header}}
The **`cancelAnimationFrame()`** method of
the {{domxref("XRSession")}} interface cancels an animation frame which was previously
requested by calling {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame")}}.
## Syntax
```js-nolint
cancelAnimationFrame(handle)
```
### Parameters
- `handle`
- : The unique value returned by the call
to {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} that
previously scheduled the animation callback.
### Return value
None ({{jsxref("undefined")}}).
## Usage notes
This function has no effect if the specified `handle` cannot be found.
## Examples
In the example below we see code which starts up a WebXR session if immersive VR mode
is supported. Once started, the session schedules its first frame to be rendered by
calling {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}}.
The `pauseXR()` function shown at the bottom can be called to suspend the
WebVR session, in essence, by canceling any pending animation frame callback. Since each
frame callback schedules the next one, removing the callback terminates updating of the
WebXR scene.
```js
const XR = navigator.xr;
let requestHandle = null;
let xrSession = null;
if (XR) {
XR.isSessionSupported("immersive-vr").then((isSupported) => {
if (isSupported) {
startXR();
}
});
}
function frameCallback(time, xrFrame) {
xrSession.requestAnimationFrame(frameCallback);
// Update and render the frame
}
async function startXR() {
xrSession = XR.requestSession("immersive-vr");
if (xrSession) {
stopButton.onclick = stopXR;
requestHandle = xrSession.requestAnimationFrame(frameCallback);
}
}
function pauseXR() {
if (xrSession && requestHandle) {
xrSession.cancelAnimationFrame(requestHandle);
requestHandle = null;
}
}
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{DOMxRef("Window.cancelAnimationFrame")}}
- {{domxref("XRSession.requestAnimationFrame")}}