Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Recursos Tween.js

Referências

Modelos

Os modelos abaixo funcionam assumindo que:

  1. Fez o download recomendado;
  2. O arquivo zip foi descompactado para a pasta lib/ da sua diretoria de trabalho;

Isto é, deve obter a seguinte árvore:

(directoria de trabalho)/
    lib/
        tweenjs/
            (vários ficheiros)
    (os seus ficheiros de trabalho)

Um documento «standalone>

O código JavaScript está incluído no documento HTML.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="importmap">
        {
            "imports": {
                "tween": "./lib/tweenjs/tween.esm.js"
            }
        }
    </script>
</head>
<body>
    <div id="target"></div>
    <script type="module">
        import {Tween} from "tween";
        
        const target = document.getElementById("target");
        const value = { x: 0.0 };
        const tween = new Tween(value)
            .to({x: 10.0}, 5000)
            .onUpdate(v => target.innerText = `Got: ${v.x.toPrecision(2)}` )
            .yoyo(true)
            .repeat(Infinity)
            .start();

        const step = () => {
            tween.update();
            requestAnimationFrame(step);
        }

        step();
    </script>
</body>
</html>

Código e Documento separados

O código JavaScript está separado do documento HTML.

Ficheiro HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="importmap">
        {
            "imports": {
                "tween": "./lib/tweenjs/tween.esm.js",
                "prog": "./prog.js"
            }
        }
    </script>
</head>
<body>
    <div id="target"></div>
    <script type="module">
        import main from "prog";

        main("target");
    </script>
</body>
</html>

Ficheiro prog.js com código JavaScript:

import { Tween } from "tween";

export { main as default };

function main(target_id) {
    const target = document.getElementById(target_id);
    const value = { x: 0.0 };
    const tween = new Tween(value)
        .to({ x: 10.0 }, 5000)
        .onUpdate(v => target.innerText = `Got: ${v.x.toPrecision(2)}`)
        .yoyo(true)
        .repeat(Infinity)
        .start();

    const step = () => {
        tween.update();
        requestAnimationFrame(step);
    }

    step();
}

Uma Cadeia de Tweens

Ficheiro HTML:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="importmap">
            {
                "imports": {
                    "tween": "./lib/tweenjs/tween.esm.js",
                    "prog": "./tweens-chain.js"
                }
            }
        </script>
    </head>
    <body>
        <canvas id="tweens:target"></canvas>
        <script type="module">
            import main from "prog";
            main("tweens:target");
        </script>
    </body>
</html>

Ficheiro tweens-chain.js com código JavaScript:

import { Tween, Group } from "tween";

export { main as default };

function draw(c, m) {
  c.fillStyle = "khaki";
  c.fillRect(0, 0, 512, 512);
  c.fillStyle = "crimson";
  c.fillRect(m.x, m.y, 32, 32);
}

function main(target_id) {
  const context = document.getElementById(target_id).getContext("2d");
  context.canvas.width = 512;
  context.canvas.height = 512;

  const model = { x: 8, y: 8 };
  const right = new Tween(model).to({ x: 472 }, 1000);
  const down = new Tween(model).to({ y: 472 }, 1000);
  const left = new Tween(model).to({ x: 8 }, 1000);
  const up = new Tween(model).to({ y: 8 }, 1000);

  right.chain(down);
  down.chain(left);
  left.chain(up);
  up.chain(right);

  const group = new Group();
  group.add(right, down, left, up);
  right.start();

  const step = () => {
    group.update();
    draw(context, model);
    requestAnimationFrame(step);
  };

  step();
}