# moving cat

[JS](../../../js) ⟩ [browser](../..) ⟩ [animation](..) ⟩ [example]() ⟩ moving cat

{% hint style="success" %}
keep moving an image by updating its <mark style="color:yellow;">`.style.left`</mark> property.
{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}
* replit ⟩ [moving cat](https://replit.com/@pegasusroe/animation-moving-cat#index.js)

```javascript
const {log} = console;
const {cos} = Math;

// ⭐️ import
import { $ } from './js/ext/Node_ext.js';         // Node extension
// --------------------------------------------------------------------

let cat = $("img");
let angle = Math.PI / 2;

// ⭐️ 1. request first frame
requestAnimationFrame(animate);

// render loop
// - t1: current timestamp (in ms)
// - t0: last timestamp
function animate(t1, t0) {
    
    if (!t0) t0 = t1;
    
    // ⭐️ 2. update animation
    angle += (t1 - t0) * 0.001;        // 1/sec = 57.3 °/sec
    cat.style.left = cos(angle) * 100 + "px";
    
    // ⭐️ 3. request next frame
    requestAnimationFrame(t2 => animate(t2, t1));
}
```
{% endtab %}

{% tab title="🗺️ 圖表" %}
{% embed url="https://replit.com/@pegasusroe/animation-moving-cat#index.html" %}
{% endtab %}

{% tab title="👥 相關" %}
* [.requestanimationframe](../../dom/type/window/.requestanimationframe "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Eloquent JS ⟩ DOM ⟩ [Positioning & Animating](https://eloquentjavascript.net/14_dom.html#h_MAsyozbjjZ)
{% endtab %}
{% endtabs %}

