47 lines
1.7 KiB
Markdown
47 lines
1.7 KiB
Markdown
|
---
|
|||
|
|
title: Animation
|
|||
|
|
localeTitle: Анимация
|
|||
|
|
---
|
|||
|
|
## Анимация в холсте
|
|||
|
|
|
|||
|
|
Чтобы анимировать объекты в `canvas` , используйте `window.requestAnimationFrame` для создания цикла рисования.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
function draw() {
|
|||
|
|
/* code goes here */
|
|||
|
|
window.requestAnimationFrame(draw);
|
|||
|
|
}
|
|||
|
|
window.requestAnimationFrame(draw);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Приведенный ниже код заставит функцию `draw` запускать каждый кадр.
|
|||
|
|
|
|||
|
|
`canvas` не имеет специальных функций, которые позволяют анимировать. Вы просто должны быть использованы для написания в циклах анимации. Обычная парадигма проектирования для циклов анимации - это обновление состояния, а затем рисование состояния. Например, чтобы нарисовать квадрат, перемещающийся по экрану:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
canvas = document.getElementById("canvas");
|
|||
|
|
ctx = canvas.getContext('2d');
|
|||
|
|
|
|||
|
|
var x=0;
|
|||
|
|
var y=50;
|
|||
|
|
function draw() {
|
|||
|
|
// reset canvas
|
|||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|||
|
|
//update state
|
|||
|
|
x+=1;
|
|||
|
|
|
|||
|
|
// render state
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.rect(x, y, 50, 50);
|
|||
|
|
ctx.fill();
|
|||
|
|
|
|||
|
|
window.requestAnimationFrame(draw);
|
|||
|
|
}
|
|||
|
|
window.requestAnimationFrame(draw);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Чтобы увидеть эту концепцию в действии, см. Страницу « [Particle Sim](/articles/canvas/particle-sim) ».
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
* [API холста MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
|