Buat pemasa pusaran dengan kanvas HTML5 dan Prototype.js

Kandungan

• Siapkan persekitaran pembangunan yang cepat
• Membuat tayangan slaid sederhana
• Menyiapkan kanvas kami
• Melukis busur sederhana dengan kanvas API
• Membuat animasi masa
• Contoh pengiraan "Epoch"
• Pelaksanaan akhir dan kerja rumah

Di dunia di mana kerangka kerja JavaScript membuat manipulasi DOM penyemak imbas mudah, tidak menghairankan bahawa tayangan slaid berdasarkan JavaScript kini telah banyak menggantikan rakan sejajarnya dengan Flash sebagai alat pilihan untuk pereka web yang ingin mempamerkan gambar di laman web mereka.

Walaupun begitu, masih ada beberapa skrip yang benar-benar boleh menuntut untuk menyediakan set ciri lengkap agar sesuai dengan rancangan yang didorong oleh Flash terbaik dari segi pengalaman pengguna untuk pengunjung.

Dalam tutorial ringkas ini, saya bertujuan untuk menunjukkan bagaimana kita dapat memanfaatkan kekuatan kerangka Prototype.js dan kanvas HTML5 untuk meningkatkan pertunjukan slaid sederhana dengan pemasa pusaran untuk memberikan maklum balas yang lebih baik bagi pengunjung yang melihat tayangan slaid. Kami akan mengetahui cara menggunakan kaedah busur kanvas untuk menarik segmen dan juga belajar bagaimana menggunakan masa Epoch untuk memastikan masa animasi yang tepat.

Walaupun tutorial ini menggunakan Prototype.js, sebenarnya tidak ada yang tidak dapat anda tiru di jQuery (atau perpustakaan JavaScript lain). Menurut pengalaman saya, sangat berharga untuk mengetahui perpustakaan lain, jadi sila ikuti dan - jika perlu - sesuaikan kodnya kemudian untuk rangka kerja JS kegemaran anda.

Mari kita mulakan!

Siapkan persekitaran pembangunan yang cepat

Perkara pertama yang pertama, kita perlu mengatur persekitaran pembangunan kita. Untuk demo ringkas ini, saya telah memulakan dengan tiga fail utama:

1. indeks.html - versi HTML yang dilucutkan dari projek HTML5 Boilerplate yang sangat baik.
2. gaya.css - helaian gaya teras untuk demo kami. Saya juga menyambungkan fail reset.css untuk memastikan kita bermula dengan persaingan yang sama rata.
3. tunjukkan.js - fail JavaScript utama. Di sinilah kita akan menulis sebahagian besar JavaScript kita untuk tutorial ini (jangan lupa yang ini!).

Setelah anda menghubungkan fail ini bersama-sama, pastikan untuk memasukkan Prototaip.js versi CDN Google terkini dari fail index.html:

skrip src = "http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"> / skrip>

Membuat tayangan slaid sederhana

Itu disusun, mari masuk dan buat tayangan slaid asas. Untuk tujuan tutorial ini, kami tidak memerlukan banyak ciri jadi kami akan memastikan perkara-perkara tetap bagus dan sederhana. Nasib baik Johnathon Snook mempunyai syarat yang serupa tiga tahun yang lalu dan oleh itu saya telah menggunakan Slaid jQuery Paling Mudah sebagai templat untuk versi Prototype.js kami.

Nyalakan show.js di editor teks anda dan tambahkan kod berikut:

var canvasShow = (fungsi (tetingkap) {// tayangan slaid di sini} (tetingkap));

Kami memulakan dengan amalan terbaik menggunakan fungsi memanggil sendiri untuk melindungi kaedah dan pemboleh ubah teras kami dari ruang lingkup global. Ini membantu memastikan skrip kami tidak bertentangan dengan kod lain yang mungkin sudah berjalan di halaman kami (petua: untuk maklumat lebih lanjut mengenai corak ini dan banyak lagi, saya sangat mengesyorkan Pola Reka Bentuk Javascript Penting Addy Osmani).

Dengan ini, kita boleh mula menulis kod pertunjukan asas kami:

var canvasShow = (function (window) {/ * * * PRIVATE VARS * / var show, slide_list; / * * * INITIALISE * Menetapkan vars yang diperlukan dan menetapkan pilihan konfigurasi * Menjalankan rancangan * / function init (id) {// Dapatkan rujukan ke elemen pertunjukan show = $ (id); slide_list = show.down ('ul'); / * * * Pilih semua gambar yang bukan gambar pertama gambar dan sembunyikan masing-masing * Saya menggunakan kaedah invoke () yang kurang dikenali - aset hebat untuk Prototype.js * http://api.prototypejs.org/language/Enumerable/prototype/invoke/ * / slide_list.select ('li: not (: first)'). invoke ('hide'); // Jalankan rancangan runShow ();} / * * * LOOP * Gelung pertunjukan utama - menunjukkan dan menyembunyikan slaid dan menyusun semula DOM * / function runShow () {var showLoop = setInterval (function () {// 1) Pilih semula & cache slaid pertama yang baru var pertama = slide_list.select ('li'). first (); // 2 Sembunyikan slaid pertama dan kemudian tunjukkan slaid seterusnya terlebih dahulu. sembunyikan () seterusnya (). Tunjukkan (); // 3) Tambahkan slaid pertama ke hujung senarai slide_list.insert (pertama); }, 3000); } / * * * REVEAL * Return "public" kaedah * / return {init: init};} (window)); Event.observe (window, 'load', function () {// Hubungi kami tayangan slaid canvasShow.init ('tayangan slaid');});

Kami kini mempunyai dua kaedah dalam rancangan kami. The di dalamnya() kaedah menerima ID elemen pertunjukan, menyembunyikan semua kecuali slaid pertama dan kemudian menembak runShow () kaedah yang mengawal kami gelung tunjuk. The runShow () kaedah hanya gelung setiap tiga saat menyembunyikan slaid pertama semasa, menunjukkan slaid seterusnya dan kemudian menggeser slaid pertama yang asal hingga akhir ul> unsur.

Di bahagian bawah skrip kami kembali di dalamnya() mendedahkannya sebagai kaedah umum yang kemudian kita panggil apabila halaman kita (termasuk gambar) dimuat sepenuhnya.

Burung helang di antara anda mungkin menyedari bahawa saya tidak menggunakan setInterval () untuk mengawal gelung kita. Sebagai gantinya saya menggunakan kemudahan PeriodicalExecuter Prototype.js yang mempunyai kelebihan untuk melindungi kita daripada pelbagai pelaksanaan fungsi panggilan balik gelung yang selari. Ia adalah sedikit tambahan yang bagus dibakar terus ke Prototype.js.

Menguji kod kami di penyemak imbas menunjukkan tayangan slaid ringkas kami berfungsi seperti yang diharapkan. Ia tidak akan memenangi sebarang anugerah tetapi cukup baik untuk tujuan kita.

Menyiapkan kanvas kami

Kini tiba masanya untuk membuat elemen kanvas kita dan menyiapkannya untuk melukis pemasa kemajuan. Untuk melakukan ini, kami telah menambahkan kaedah baru persediaan Pemasa () yang menguji sokongan kanvas, dan jika dijumpai, membuat elemen kanvas secara dinamik dan mengambil konteks 2Dnya:

fungsi setupTimer () {canvas = document.createElement ('kanvas'); if (canvas.getContext && canvas.getContext ('2d')) {// periksa sokongan kanvas kanvas.width = 30; kanvas.height = 30; ctx = canvas.getContext ('2d'); ctx.strokeStyle = 'rgba (255,255,255, .8)'; ctx.lineCap = 'pantat'; ctx.lineWidth = 4; canvas.writeAttribute ('class', 'timer'); tunjukkan.insert (kanvas); } lain {// jika sokongan kanvas tidak tersedia kanvas = false; }}

Kami juga telah menetapkan beberapa gaya asas untuk grafik pemasa kami menggunakan kaedah Canvas API yang sesuai. Terdapat banyak tutorial bagus yang mendokumentasikan asas-asas menggambar dengan Canvas API, jadi saya tidak akan membuat anda bosan dengan pergi ke tempat lama di sini.

Dengan persediaan asas ini selesai, kami kini sudah bersedia untuk menarik grafik pemasa ke kanvas kami.

Melukis busur sederhana dengan kanvas API

Pemasa pusaran yang ingin kita buat akan menjadi bentuk donat 360deg klasik, mirip dalam bentuk dengan beberapa "memuat GIF" AJAX yang biasa digunakan di seluruh web.

Untuk menunjukkan kemajuan masa, kita akan mempunyai skrip kita secara melukis menggambar segmen (darjah) bentuk donat bermula pada 0 dan terus berpusing hingga 360deg penuh. Lingkaran penuh ini akan memetakan peredaran masa antara slaid semasa yang muncul di permulaan gelung tunjuk (gelung tunjuk adalah sebahagian daripada runShow () kaedah dari langkah 2) dan ia disembunyikan untuk memilih slaid seterusnya di akhir gelung persembahan.

Perkara pertama yang perlu kita lakukan ialah membuat fungsi yang akan melukis busur di kanvas kita. Untuk melakukan ini, kita akan menggunakan kaedah busur API Canvas. Sekiranya anda tidak biasa dengan kaedah ini, saya sangat mengesyorkan anda membaca bahagian "Lingkaran" artikel netmag Rob Hawkes di BelajaryangasasdaripadaHTML5 kanvas yang mempunyai penjelasan dan gambaran besar.

Fungsi kami untuk melukis busur adalah seperti berikut:

fungsi drawArc (startAngle, endAngle) {var drawingArc = true; // tetapkan nilai boolean untuk menunjukkan bahawa kita sedang melukis // Tentukan jalan kita menggunakan APIctx.beginPath (); ctx.arc (15,15,10, Math.PI / 180) * (startAngle-90), (Math.PI / 180) * (endAngle-90), false); ctx.stroke (); // lukis pada lukisan kanvasArc = false; }

Fungsi kami mengambil dua argumen yang menentukan mulakan dan akhir sudut arka (dalam darjah). Ini seterusnya diserahkan sebagai argumen ke-4 dan ke-5 kepada kaedah busur API Canvas. Oleh kerana kaedah busur mengharapkan sudut permulaan dan akhir diberikan dalam radian, kami memanipulasi input dengan dua cara sebelum diteruskan sebagai argumen:

1. Kami menggunakan ungkapan sederhana untuk menukar darjah kami menjadi radian dengan cepat (radian = darjah * PI / 180). Ini membolehkan kami memberikan input dalam darjah yang saya rasa lebih mudah dalam konteks ini yang ingin kami capai.
2. Memandangkan sudut 0 hingga jam 3 (jika kita membayangkan bulatan sebagai muka jam), saya mengurangkan 90 dari sudut permulaan dan akhir untuk memulakan 0 darjah pada pukul 12, 90 darjah pada Jam 3, 180 darjah pada pukul 6 dan seterusnya ...

Kita boleh menguji fungsi kita dengan menambahkan yang berikut di di dalamnya() fungsi:

drawArc (0,90); // melukis lengkok dari 0 darjah hingga 90 darjah

Membuat animasi masa

Kami kini dapat menggambar segmen (arka) pemasa kami menggunakan kami drawArc () fungsi. Untuk menghidupkan pemasa hingga 360 darjah, kita hanya memerlukan cara untuk memanggil drawArc () berfungsi berulang kali, meningkatkan argumen kedua (endAngle) sehingga mencapai 360.

Satu-satunya peringatan adalah bahawa kita mesti memastikan bahawa animasi kita berulang tepat 3.000 mili saat kerana - jika anda melihat gelung tayangan kami - ini adalah selang antara slaid yang muncul dan slaid seterusnya yang menggantikannya.

Jadi bagaimana kita bernyawa? Pemikiran pertama anda mungkin melakukan ini dengan menggunakan loop for, tetapi itu tidak memungkinkan kita untuk mengawal kemajuan animasi sehingga kita dapat menolak kaedah tersebut. Penyelesaian seterusnya mungkin dengan menggunakan JavaScript setInterval, tetapi itu bukan kaedah yang tepat untuk mengukur masa kerana bergantung pada beban CPU komputer pengguna. Syukurlah, kami mempunyai penyelesaian yang lebih baik - masa Epoch.

Dengan menggunakan masa Epoch, kita dapat mengira pemboleh ubah ‘posisi’ perpuluhan berdasarkan garis animasi khayalan yang berjalan dari sifar (permulaan animasi) hingga satu (akhir animasi). Dengan mengalikan perwakilan perpuluhan kedudukan semasa kita dengan tujuan akhir kita (iaitu: 360), kita dapat menentukan nilai yang harus kita lalui sebagai endAngle kepada kita drawArc () kaedah.

Menggunakan masa Epoch agak mudah dan dilaksanakan di kami runTimer () kaedah di bawah.

fungsi runTimer () {clearCanvas (); // pastikan kita membersihkan kanvas untuk mengelakkan melukis // gunakan masa Epoch untuk memastikan kod dijalankan dalam masa yang ditentukan var start = (Tarikh baru) .getTime (), // mengembalikan masa Epoch mis.: "1327253227656" durasi = 3000 * 0.75, // selang antara setiap penamat peralihan slaid = permulaan + tempoh; var tInterval = setInterval (function () {clearCanvas (); // pastikan kami telah membersihkan kanvas untuk mengelakkan daripada melukis kanvas.removeClassName ('kanvas-tersembunyi'); var currTime = (Tarikh baru) .getTime (); / / dapatkan "masa" semasa sebagai Epoch // Bandingkan zaman masa dengan zaman akhir // mengembalikan kedudukan sebagai perpuluhan (contoh: 0.35678) // pos adalah antara 0 (awal) dan 1 (akhir) var pos = currTime> selesai ? 1: (currTime-start) / tempoh; var seg = Math.floor (356 * pos); // memberikan sudut akhir dalam darjah // Lukiskan segmen lengkok drawArc kami (-4, seg); jika (pos> = 1) {// jika kita telah mencapai matlamat kita, hentikan putaran! ClearInterval (tInterval); resetTimer ();}}, 50)}

Kami akan menguraikan langkah-langkah utamanya seperti berikut.

Setelah mula-mula membersihkan kanvas, kami menetapkan beberapa pemboleh ubah utama. Mula-mula kita mendapat perwakilan zaman semasa menggunakan kaedah getTime () objek Tarikh asli JavaScript dan menetapkannya ke pemboleh ubah permulaan. Ini mewakili titik 0 [sifar] pada baris animasi kami.

var start = (Tarikh baru) .getTime (); // mengembalikan Epoch

Seterusnya kami menetapkan jangka masa animasi kami agar sesuai dengan jangka masa gelung persembahan kami. Ini memastikan jangka masa animasi pemasa sesuai dengan selang antara peralihan slaid.

tempoh var = 3000;

Terakhir kami mengira pemboleh ubah selesai dengan menambah jangka masa hingga waktu mula. Ini mewakili akhir animasi kita (satu di baris animasi kita).

var selesai = permulaan + tempoh;

Seterusnya kita membuat gelung dalaman menggunakan setInterval dan minta ia berulang sangat dengan cepat (setiap 50 milisaat).

Untuk setiap gelung kami meminta masa semasa (masa semasa) menggunakan getTime (). Sekiranya masa sekarang adalah lebih besar daripada masa selesai yang kami kira sebelumnya maka kami sudah sampai ke penghujung animasi kami. Jika tidak, kita tolak masa mula dari masa sekarang dan bahagikan dengan jangka masa yang diketahui untuk menghasilkan a perwakilan perpuluhan kedudukan kita pada baris animasi.

var currTime = (Tarikh baru) .getTime (); var pos = currTime> selesai? 1: (currTime-start) / tempoh;

Untuk langkah terakhir dalam gelung kita, kita gandakan 360 (lilitan total pemasa kita) dengan kita kedudukan pada baris animasi untuk menghasilkan nilai yang kemudian kita sampaikan sebagai argumen kedua drawArc (). Ini kemudian menarik segmen grafik pemasa yang diperlukan dan keseluruhan proses diulang sehingga lingkaran pemasa 360deg penuh dilukis.

Contoh pengiraan "Epoch"

Contoh mudah boleh membantu di sini. Sekiranya kita mengatakan masa permulaan kita adalah 8034 dan untuk lelaran ini, pemboleh ubah currTime ditetapkan ke 8745 maka:

(8745-8034)/3000

= 0.237

360 * 0.237 = 85 // nilai akhir 85 kami adalah apa yang diturunkan drawArc ()

Syukurlah untuk saya (dan anda) saya tidak perlu membuat matematik ini untuk mengira animasi yang tepat. Banyak orang yang pandai telah melakukan ini untuk kita. Saya sangat mengesyorkan membaca persembahan ini oleh ahli pasukan teras Prototype.js, Thomas Fuchs, yang menerangkan semua mengenai animasi berdasarkan masa Epoch dengan lebih terperinci.

Pelaksanaan akhir dan kerja rumah

Kami sekarang telah menghasilkan pemasa berasaskan kanvas yang berfungsi menggunakan Prototype.js dan HTML5 Canvas API. Kod kerja terakhir dapat dilihat dengan memuat turun fail sumber untuk tutorial ini.

Seperti yang anda lihat, gelung pertunjukan kami kini memanggil runTimer () pada akhir setiap lelaran. Ini seterusnya menghidupkan pemasa kanvas kami dari 0 hingga 360deg tepat tiga saat sebelum gelung tayangan kami dipanggil lagi dan keseluruhan proses berulang.

Anda dapat melihat kod terakhir yang beraksi di sini [pautan ke demo]. Saya juga mengesyorkan memuat turun kod sumber untuk artikel ini dan mengkaji pelaksanaan akhir. Saya telah berusaha memastikan perkara-perkara sederhana dan tidak semestinya sempurna, tetapi ini harus memberi anda asas yang baik untuk bekerja sekiranya anda ingin meningkatkan skrip anda sendiri.

Bagi anda yang mencari kaedah untuk memperbaiki kod akhir, saya mungkin mencadangkan baris pertanyaan berikut:

• Tambahkan kawasan 'trek' untuk pemasa dengan melukis pemasa 360deg separa telus dan penuh pada kanvas kedua yang berlapis di belakang yang pertama. Peningkatan visual yang bagus.
• Memfaktorkan semula dan mengoptimumkan kod untuk memastikan kedua-dua pemasa dan gelung tayangan dijalankan dari satu pemboleh ubah ‘durasi’. Ini menjadikan kod akhir lebih terkawal sekiranya anda ingin mengubah selang antara setiap slaid.
• Berikan cadangan untuk penyemak imbas yang tidak menyokong kanvas - agensi reka bentuk Zurb telah menggunakan penyelesaian pemasa berasaskan CSS untuk tayangan slaid Orbit mereka.
• Tulis kaedah untuk memudar pemasa pada akhir setiap gelung pertunjukan dan biarkan ia memudar kembali pada awalnya.

Sekiranya anda ingin melihat beberapa ciri ini dalam tindakan, anda mungkin ingin melihat Protoshow - tayangan slaid ringkas (namun kuat) yang saya tulis menggunakan Prototype.js dan script.aculo.us.

Protoshow.js adalah penerus skrip Simple Slide Show Deep Blue Sky dan sedang dalam pengembangan biasa. Saya ingin mencari orang untuk menyumbang dalam projek ini dan jika anda ingin terlibat, sertai saya di GitHub atau masukkan saya di Twitter.

Nasib baik meningkatkan skrip anda dan tolong hantarkan contoh pelaksanaan anda di alam liar!