Kandungan
- Import dari Lakaran
- Buat lapisan topeng dan avatar
- Tentukan keadaan
- Animate antara negeri
- Cubalah pada peranti mudah alih yang sebenar
Sebab di sebalik prototaip reka bentuk bukanlah sesuatu yang baru - sama seperti semua idea mengenai reka bentuk dalam penyemak imbas. Apabila anda melihat reka bentuk dalam konteksnya yang sebenar, ia sangat berbeza. Anda membuat keputusan yang lebih baik apabila anda tidak perlu membuat andaian tentang bagaimana antara muka akan berfungsi dan dirasakan. Ini mungkin terdengar seperti kerja tambahan, tetapi pandangan yang dapat anda peroleh dengan melihat reka bentuk anda berfungsi sangat berharga.
Framer adalah alat prototaip berasaskan kod baru. Anda boleh membuat mockup di Sketch (atau Photoshop) seperti biasa, dan mengimportnya ke dalam Framer. Kemudian, tulis sedikit CoffeeScript dan anda dapat mencapai banyak.
Saya akan mengajar anda asas-asas prototaip dalam Framer, menggunakan contoh prototaip aplikasi iOS dengan dua paparan: paparan profil dan paparan zoom gambar avatar pengguna. Kami akan membuat prototaip bagaimana paparan foto yang diperluas akan dibuka dan ditutup, dan kami juga akan menghidupkannya. Lihat demo dalam talian di sini (untuk melihat kod sumber, cukup klik ikon di sudut kiri atas). Anda juga memerlukan percubaan percuma Framer, yang boleh anda dapatkan di framerjs.com.
Import dari Lakaran
Langkah pertama ialah mengimport lapisan dari Sketch ke Framer. Cukup klik butang Import di Framer semasa reka bentuk terbuka di Sketch, dan pilih fail yang betul dalam dialog yang berikut. Framer secara automatik akan mengimport gambar dari setiap lapisan dan membuatnya dapat diakses melalui kod seperti ini:
sketsa = Framer.Importer.load "diimport / profil"
Gunakan pemboleh ubah tersebut untuk mengakses lapisan yang diimport. Sebagai contoh, untuk merujuk lapisan bernama 'kandungan' dalam fail Sketsa, anda akan menaip sketch.content di Framer.
Buat lapisan topeng dan avatar
Fungsi inti dari prototaip ini adalah memperluas gambar avatar ketika diketuk, dan kemudian menutupnya ketika diketuk lagi. Pertama, kita akan membuat dua lapisan topeng - topeng bersarang, atau topeng di dalam topeng lain. Kami akan menghidupkan kedua topeng sekaligus untuk menghasilkan kesan pembukaan dan penutup yang baik dan halus. Lapisan headerMask akan memotong foto avatar ke segi empat tepat ketika diperluas, dan lapisan topeng akan memotongnya ke lingkaran kecil pada tampilan profil.
Buat lapisan headerMask seperti ini:
headerMask = lebar Lapisan baru: Lebar layar, tinggi, latar belakang 800 Warna: "telus"
Baris pertama kod membuat dan menamakan lapisan baru. Kemudian, menggunakan sintaks lekukan CoffeeScript, kami menetapkan sifat lebar, tinggi dan latar belakang. Kami akan menggunakan latar belakang yang telus sehingga lapisan di bawahnya ditunjukkan ketika foto avatar diperluas.
Seterusnya, buat lapisan topeng:
topeng = baru Lebar lapisan: 1000, tinggi: 1000 latar belakang Warna: "telus", sempadanRadius: 500 y: sketch.header.height - 100 superLayer: headerMask skala: 0.2, asalY: 0
Kami membuat lapisan baru dan menetapkan sifat dengan cara yang sama. Radius border yang besar menjadikan lapisan ini menjadi bulatan. Kami meletakkan lapisan topeng sehingga tumpang tindih lapisan header, yang diimport dari Sketch. Kami juga akan turun hingga 20 persen, atau 0,2. OriginY of zero menetapkan titik jangkar atau pendaftaran gambar ke tepi atas.
Baki harta tanah, superLayer, menetapkan lapisan headerMask yang kami buat sebagai induk lapisan baru ini. Inilah cara kerja penyamaran di Framer. Cukup tetapkan sifat superLayer, dan lapisan induk akan menutupi anak.
Seterusnya, kita perlu membuat grafik avatar dan meletakkannya di dalam topeng baru tersebut. Untuk memperbesar dan menghidupkan batas pemotongan, kami akan membuat lapisan avatar secara manual. Salin foto ke dalam subfolder 'gambar' folder projek. Kemudian buat lapisan menggunakan gambar itu:
avatar = gambar Lapisan baru: "images / avatar.png" lebar: mask.width, tinggi: mask.height superLayer: mask, force2d: true
Perhatikan bahawa kita menetapkan superLayer avatar menjadi lapisan topeng. Kedua-duanya kini bersarang di headerMask. Kami juga menetapkan lebar dan tinggi sehingga gambar memenuhi kawasan bertopeng sepenuhnya.
Terakhir, kami akan membuat pemboleh ubah untuk menyimpan kedudukan Y topeng yang akan kami gunakan untuk animasi. Kami akan memusatkannya secara mendatar, kerana lebih besar dari layar.
maskY = mask.y mask.centerX ()
Tentukan keadaan
Langkah pertama dalam membuat animasi adalah menentukan keadaan awal dan akhir. Di Framer, keadaan seperti bingkai utama yang ditulis dalam kod. Sebuah negeri hanyalah kumpulan harta tanah. Setiap lapisan mempunyai keadaan lalai. Untuk prototaip ini, lalai itu akan berfungsi sebagai titik awal untuk animasi, jadi kita hanya perlu menetapkan keadaan kedua untuk setiap lapisan.
Sintaks untuk negeri sangat mudah. Rujuk lapisan, gunakan kaedah layer.states.add (), dan kemudian senaraikan sifat yang akan disertakan.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (tumbuh: {skala: 1.1, y: maskY - 420})
Keadaan kedua untuk lapisan kandungan, yang diimport dari Sketch dan mengandungi semua elemen skrin profil lain, harus sepenuhnya telus. Dengan cara ini, apabila avatar diperluas, kita akan mempunyai latar belakang hitam dan ikon dan elemen yang diimport yang tersisa akan ditunjukkan.
Baris kedua kod membuat keadaan untuk headerMask, yang hanya akan memindahkannya ke kedudukan Y pada 120. Ini akan membolehkan tajuk dan butang tutup muncul di bahagian atas skrin ketika foto avatar diperbesar. Ini juga akan menghidupkan batas pemotongan foto avatar.
Terakhir, keadaan baru untuk lapisan topeng akan meningkatkannya dan memindahkannya ke atas, menggunakan pemboleh ubah maskY yang kita buat sebelumnya. Oleh kerana asal-usulY (atau titik jangkar) lapisan topeng adalah pinggir atasnya, kita perlu menggerakkannya hingga 420 piksel sehingga pusat gambar dapat dilihat.
Animate antara negeri
Untuk menghidupkan antara keadaan lalai dan yang baru yang baru kita buat, kita hanya memerlukan empat baris lagi kod. Kami akan menetapkan pengendali klik pada lapisan avatar. Apabila pengguna mengetuknya di skrin profil, kita akan beralih ke paparan yang diperluas dengan keadaan berbasikal. Apabila diketuk lagi, kita akan kembali ke keadaan lalai sehingga kembali ke bulatan kecil. Garis kod yang sama menangani kedua-dua interaksi:
avatar.on Events.Klik, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Baris pertama blok ini menyediakan pengendali klik pada lapisan avatar. Bila-bila masa ia diketuk, tidak kira bagaimana ia dipotong atau berapa ukurannya, pernyataan yang diikuti akan berjalan.
Kemudian kita hanya merujuk setiap lapisan, dan menggunakan kaedah layer.states.next () untuk menukar keadaan. Apabila anda menggunakan layer.states.next (), Framer akan menggunakan tetapan animasi lalai dalamannya. Ini sangat mudah, tetapi anda boleh membuat animasi yang lebih baik dengan menentukan keluk animasi.
Semasa menggunakan keadaan seperti kita di sini, anda boleh mengubah setiap keluk animasi secara berasingan dengan menggunakan sifat layer.states.animationOptions. Dengan hanya tiga penyesuaian kecil, animasi terasa sama sekali berbeza:
sketch.content.states.animationOptions = curve: "kemudahan", masa: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Untuk lapisan kandungan yang semakin pudar dan masuk, kami akan memilih pratetap kurva sederhana, kemudahan, dan menetapkan durasi animasi menjadi 0,3 sehingga sangat cepat.
Untuk lapisan headerMask dan topeng, gunakan lekuk spring. Untuk tujuan kami, anda hanya perlu mengetahui bahawa nilai keluk spring mengubah kelajuan dan pantulan animasi. Nilai untuk lapisan topeng akan menjadikan animasinya jauh lebih pantas daripada headerMask dan kandungan. Untuk maklumat lebih lanjut mengenai tetapan keluk pegas, rujuk dokumentasi Framer di framerjs.com/docs.
Cubalah pada peranti mudah alih yang sebenar
Melihat reka bentuk pada peranti sebenar jauh lebih berkesan daripada menggunakan emulator, dan anda akan melihat faedahnya dalam kerja anda. Framer merangkumi ciri cermin, yang merupakan pelayan terbina dalam yang menawarkan URL ke prototaip anda melalui rangkaian tempatan anda. Cukup lawati URL menggunakan peranti anda.
Anda telah mempelajari semua yang perlu anda ketahui untuk membuat prototaip reka bentuk anda sendiri di Framer. Tunggu apa lagi?
Perkataan: Jarrod Drysdale
Jarrod Drysdale adalah pengarang, perunding reka bentuk, pembuat produk digital. Artikel ini pada mulanya diterbitkan dalam edisi 270 majalah bersih.
Suka ini? Baca ini!
- Buat prototaip langsung yang boleh diklik dalam Sketsa
- Cara memulakan blog
- Penyunting foto terbaik
