kita mula -mula menentukan saiz viewport. Kami melampirkan roda imej.png dirujuk sebagai "roda" ke panggung. Selepas itu, kami menggunakan "mengendalikan" untuk menetapkan kedudukan awal imej atau nod ini. "Mengendalikan" pada mana -mana nod, meletakkan dirinya pada offset yang ditentukan oleh titik penjajaran pada nod induknya. Kedua -dua "mengendalikan" dan "menyelaraskan" ditentukan sebagai unit relatif. Sebagai contoh, 0 adalah sudut kiri atas dan 1 adalah sudut kanan bawah. Kod di atas memposisikan roda di tengah viewport.

Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});

<??>
<??>

Sila ambil perhatian bahawa jarak di atas bukan 300 piksel, tetapi 3/14 kali saiz viewport. Anda juga boleh menetapkan nilai lain untuk nod seperti skala, condong, dan putaran. Untuk skala dalam arah tertentu (seperti mendatar), anda boleh menggunakan Scalex. Coretan kod berikut skala roda secara mendatar sebanyak 1.4 kali.

Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});

putaran, zum, dan kecondongan akan menjadi pusat nod sebagai titik putaran secara lalai. Anda juga boleh menetapkan titik putaran yang berbeza untuk nod menggunakan kaedah berikut:

Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        offsetX: 300
    });

semua dalam semua, elemen tetap membolehkan anda memindahkannya dan skala atau memutarnya.

peristiwa tetikus dan sentuh

Untuk mengemas kini nod dalam interaksi pengguna, anda boleh menggunakan pelbagai peristiwa tetikus dan sentuhan. Teruskan dengan contoh roda kami di atas, kami boleh menulis kod berikut:

Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        scaleX: 1.4
    });

atau anda boleh menentukan peristiwa -peristiwa ini, seperti Stage.Mouse.CLICK = 'click';. Kod yang dikemas kini ialah:

node.pin({
    pivotX: x,
    pivotY: y
});

Contoh lain ialah Stage.Mouse.MOVE = 'touchmove mousemove';.

Animasi Tween (tweening)

Animasi Tween menggunakan peralihan lancar ke nilai kedudukan nod. Ini menghalang perubahan mendadak dalam kedudukan atau saiz nod yang berkaitan. Sebagai contoh, kod di bawah berputar roda secara tiba -tiba di Pi Radians dan mengubah kedudukannya sebanyak 600 setiap kali ia mengklik.

var wheelNode = Stage.image('wheel').appendTo(stage);
wheelNode.pin({
    'handle': 0.5
});
wheelNode.on('click', function () {
    // 在此處對(duì)輪子執(zhí)行某些操作。
});

Walau bagaimanapun, menambah kaedah tween boleh melancarkan peralihan.

wheelNode.on(click, function () {
     // 在此處對(duì)輪子執(zhí)行某些操作。
 });

Beberapa pilihan tersedia, seperti kaedah pelonggaran, tempoh, dan kelewatan. Dalam kod di atas, saya telah menetapkan tempoh ke 3000 milisaat dan fungsi pelonggaran untuk melantun. Di samping itu, anda boleh menggunakan pelbagai fungsi pelonggaran seperti linear, quad, kubik, dan kuartal. Menetapkan kelewatan akan memulakan peralihan selepas kelewatan yang ditentukan. Jika tiada nod diperlukan selepas animasi selesai, anda boleh memanggil tween.remove(); untuk memadam nod. Untuk melakukan tindakan lain, anda boleh melaksanakan fungsi panggil balik menggunakan coretan kod berikut selepas animasi tween selesai:

var wheelRotation = Math.PI;
var wheelPosition = 300;

wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.pin({
        rotation: wheelRotation,
        offsetX: wheelPosition
    });
});

Tekstur atlas

Tekstur digunakan oleh nod pokok untuk menarik grafik pada kanvas. Untuk memaparkan grafik pada kanvas, anda boleh menggunakan meja sprite, juga dikenali sebagai "galeri tekstur." Menetapkan nama atlas tekstur adalah pilihan. Jadual Sprite perlu mempunyai satu set tekstur yang dinamakan. Untuk menggunakannya dalam permohonan, kita boleh merujuknya dengan nama. Anda boleh menggunakan tatasusunan tekstur sebagai bingkai untuk membuat animasi. Animasi itu sendiri adalah nod. Berikut adalah contoh dengan pahlawan animasi:

wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.tween(3000)
        .pin({
            rotation: wheelRotation,
            offsetX: wheelPosition
        })
        .ease('bounce');
});

Untuk menghidupkan pahlawan, anda memerlukan kod berikut. Untuk menjadikannya lebih cepat, anda boleh meningkatkan FPS:

tween.done(function () {
    // 在此處執(zhí)行您的操作。
});

anim Terdapat banyak kaedah lain, seperti gotoFrame(n), yang akan membawa anda terus ke bingkai n . Bergantung pada nilai n , anda juga boleh menggunakan untuk memindahkan bingkai moveFrame(n) n ke hadapan atau ke belakang.

Ringkasan

Dalam tutorial pengenalan ini, kami meliputi semua yang anda perlukan untuk memulakan dengan panggung.js. Konsep yang dibincangkan harus membantu anda membuat animasi aksara asas dan berinteraksi dengan pengguna menggunakan sprite. Anda boleh mengetahui lebih lanjut mengenai perpustakaan ini dari laman web rasmi. Saya juga mengesyorkan agar anda memuat turun fail dari halaman GitHub mereka. Demo yang dimasukkan ke dalam fail muat turun akan menjelaskan lagi isu tersebut.

(bahagian FAQ harus ditambah di sini, kandungannya sama dengan bahagian FAQ dalam teks input, tetapi boleh sedikit menulis dan menyesuaikan seperti yang diperlukan)

Atas ialah kandungan terperinci Pengenalan kepada Stage.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!