Layout responsif

Isi

Hippani Animator Tur singkat Tutorial Antarmuka

Menu dan Toolbar Preferensi Timeline Perpustakaan Editor Pemain Mengekspor Image Editor Editor gambar Font Loader

Animasi

Film Adegan Bingkai

Objek JavaScript Terjemahan Editor Lisensi Membandingkan versi Apa yang baru

Menciptakan permainan Loop

Memperluas HTML

Tutorial ini menunjukkan bagaimana untuk membuat layout responsif yang menggunakan JavaScript. Menambahkan dua kotak ke perpustakaan. Membuat satu merah dan satu hijau. Kotak ini adalah hanya contoh. Setiap bentuk atau objek dapat digunakan.

Tambahkan kotak ke editor.

Mengatur kotak, sehingga mereka mengisi sisi kiri dan kanan. Meninggalkan perbatasan di sekitar mereka.

Sekarang ini adalah contoh dari halaman web dengan konten pada sisi kiri dan kanan. Ini akan terlihat baik pada desktop web browser atau telepon dalam modus lansekap. Sayangnya, tata letak ini tidak akan bekerja dengan baik dalam modus potret. Baik, dua kotak harus menyusut kecil untuk muat, atau diperluas untuk mengisi layar, dan memotong sisi kotak.

Situasi ini adalah dimana layout responsif yang diperlukan. Dalam modus potret, satu kotak harus bergerak di atas yang lain. Untuk melakukan ini, kita perlu bergerak kotak menggunakan JavaScript. Ini berarti mematikan 'Menggunakan Timeline' untuk kotak dan pengaturan 'ID skrip'.

Untuk memindahkan kotak diluar batas film, kita perlu mematikan klip di properti film.

Tempat terbaik untuk mengatur kotak adalah di 'Pada Resize' acara film.

Fungsi-fungsi yang kita perlu GetLeft, GetTop, GetWidth dan GetHeight. Fungsi-fungsi ini memberikan batas-batas web browser atau perangkat menggunakan koordinat film. Klip diaktifkan, nilai-nilai kembali perjanjian film. Jika Anda menggunakan 'None' skala film, GetLeft dan GetTop akan selalu kembali 0 dan dapat diabaikan.

Pertama mari kita mengatur dua kotak sehingga satu mengisi sisi kiri dan sisi lain mengisi sisi kanan.

BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

Selanjutnya, kami akan menambahkan batas ukuran 10. Nilai ini 10 tidak selalu dalam pixel, dalam skala yang sama film. Penggunaan film skala 'None' untuk segalanya dalam piksel.

var Border=10;
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);

Akhirnya kita akan menguji untuk melihat apakah lebar web browser atau perangkat kurang dari ketinggian. Ketika itu terjadi, mengatur ulang kotak vertikal.

var Border=10;
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}

Sekarang Anda bisa melihat, jika Anda mengubah ukuran pemain, dua kotak akan mengatur diri mereka sendiri secara otomatis. Dua kotak ini dapat dengan mudah diganti dengan bentuk dan benda-benda lain. Contoh ini dapat diperluas untuk menangani lebih kompleks layout.

Menciptakan permainan Loop

Memperluas HTML

Dokumentasi ini diterjemahkan dari bahasa Inggris, menggunakan penerjemah online. Kami Mohon maaf jika Anda menemukan kesalahan. Jika Anda ingin membantu kami membuat koreksi. Ada terjemahan editor di Hippani Animator (dalam menu Bantuan). Kami memberikan kunci lisensi gratis kepada siapa saja yang mengoreksi frase lebih dari 100. Silahkan hubungi kami untuk rincian lebih lanjut.