Isi
- Impor dari Sketch
- Buat lapisan topeng dan avatar
- Tentukan negara bagian
- Menganimasikan antar negara bagian
- Cobalah di perangkat seluler sungguhan
Alasan di balik pembuatan prototipe desain bukanlah hal baru - ini sama dengan semua desas-desus tentang mendesain di browser. Saat Anda melihat desain dalam konteks aslinya, itu sangat berbeda. Anda membuat keputusan yang lebih baik saat Anda tidak perlu membuat asumsi tentang bagaimana antarmuka akan berfungsi dan terasa. Ini mungkin terdengar seperti pekerjaan ekstra, tetapi wawasan yang bisa Anda peroleh dengan melihat desain Anda berfungsi sangat berharga.
Framer adalah alat prototipe berbasis kode baru. Anda dapat membuat mockup di Sketch (atau Photoshop) seperti biasa, dan mengimpornya ke Framer. Kemudian, tulis sedikit CoffeeScript dan Anda dapat mencapai banyak hal.
Saya akan mengajari Anda dasar-dasar pembuatan prototipe di Framer, menggunakan contoh prototipe aplikasi iOS dengan dua tampilan: tampilan profil dan tampilan gambar avatar pengguna yang diperbesar. Kami akan membuat prototipe bagaimana tampilan foto yang diperluas akan dibuka dan ditutup, dan kami juga akan menganimasikannya. Lihat demo online di sini (untuk melihat kode sumber, cukup klik ikon di pojok kiri atas). Anda juga memerlukan uji coba Framer gratis, yang bisa Anda dapatkan di framerjs.com.
Impor dari Sketch
Langkah pertama adalah mengimpor lapisan dari Sketch ke Framer. Cukup klik tombol Impor di Framer saat desain terbuka di Sketch, dan pilih file yang benar di dialog yang mengikuti. Framer akan secara otomatis mengimpor gambar dari setiap lapisan dan membuatnya dapat diakses melalui kode seperti ini:
sketch = Framer.Importer.load "import / profile"
Gunakan variabel itu untuk mengakses lapisan yang diimpor. Misalnya, untuk mereferensikan lapisan bernama 'konten' di file Sketch, Anda akan mengetik sketch.content di Framer.
Buat lapisan topeng dan avatar
Fungsi inti dari prototipe ini adalah untuk memperluas gambar avatar saat diketuk, lalu menutupnya saat diketuk lagi. Pertama, kita akan membuat dua lapisan topeng - topeng bersarang, atau topeng di dalam topeng lain. Kami akan menganimasikan kedua topeng sekaligus untuk menciptakan efek pembukaan dan penutupan yang bagus dan halus. Lapisan headerMask akan memangkas foto avatar menjadi persegi panjang saat dibentangkan, dan lapisan topeng akan memangkasnya menjadi lingkaran kecil pada tampilan profil.
Buat layer headerMask seperti ini:
headerMask = new Layer width: Screen.width, height: 800 backgroundColor: "transparent"
Baris pertama kode membuat dan memberi nama layer baru. Kemudian, menggunakan sintaks indentasi CoffeeScript, kami mengatur properti lebar, tinggi dan latar belakang. Kami akan menggunakan latar belakang transparan sehingga lapisan di bawahnya muncul saat foto avatar diluaskan.
Selanjutnya, buat lapisan topeng:
mask = new Lebar lapisan: 1000, tinggi: 1000 background Warna: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: header Skala masker: 0.2, asalY: 0
Kami membuat layer baru dan mengatur properti dengan cara yang sama. BorderRadius yang besar membuat layer ini menjadi lingkaran. Kami memposisikan lapisan topeng sehingga tumpang tindih dengan lapisan header, yang diimpor dari Sketch. Kami juga akan menurunkannya menjadi 20 persen, atau 0,2. OriginY nol menyetel titik jangkar atau registrasi gambar ke tepi atas.
Properti yang tersisa, superLayer, menyetel lapisan headerMask yang kita buat sebagai induk lapisan baru ini. Beginilah cara kerja masking di Framer. Cukup setel properti superLayer, dan lapisan induk akan menutupi anaknya.
Selanjutnya, kita perlu membuat grafik avatar dan menempatkannya di dalam topeng baru tersebut. Untuk memperbesar dan menganimasikan batas pemangkasan, kami akan membuat lapisan avatar secara manual. Salin foto ke dalam subfolder 'gambar' dari folder proyek. Kemudian buat layer menggunakan gambar itu:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Perhatikan bahwa kami menyetel superLayer dari avatar menjadi lapisan topeng. Keduanya sekarang berada di dalam headerMask. Kami juga mengatur lebar dan tinggi sehingga gambar memenuhi area bertopeng sepenuhnya.
Terakhir, kita akan membuat variabel untuk menyimpan posisi Y dari mask yang akan kita gunakan untuk animasi. Kami akan memusatkannya secara horizontal, karena lebih besar dari layar.
maskY = mask.y mask.centerX ()
Tentukan negara bagian
Langkah pertama dalam membuat animasi adalah menentukan status awal dan akhir. Dalam Framer, status seperti keyframe yang ditulis dalam kode. Sebuah negara bagian hanyalah sekumpulan properti. Setiap lapisan memiliki status default. Untuk prototipe ini, default tersebut akan berfungsi sebagai titik awal untuk animasi, jadi kita hanya perlu menyetel status kedua untuk setiap lapisan.
Sintaks untuk status sangat sederhana. Referensikan layer, gunakan metode layer.states.add (), dan kemudian daftarkan properti yang akan disertakan.
sketch.content.states.add (sembunyikan: {opacity: 0}) headerMask.states.add (pindah: {y: 120}) mask.states.add (tumbuh: {skala: 1.1, y: maskY - 420})
Status kedua untuk lapisan konten, yang diimpor dari Sketch dan berisi semua elemen layar profil lainnya, harus benar-benar transparan. Dengan cara ini, saat avatar diperluas, kita akan memiliki latar belakang hitam dan ikon serta elemen impor lainnya akan terlihat.
Baris kode kedua membuat status untuk headerMask, yang hanya akan memindahkannya ke posisi Y 120. Ini akan memungkinkan tombol judul dan tutup ditampilkan di bagian atas layar saat foto avatar diperbesar. Ini juga akan menganimasikan batas pemotongan foto avatar.
Terakhir, status baru untuk lapisan topeng akan meningkatkan dan memindahkannya, menggunakan variabel maskY yang kita buat sebelumnya. Karena asalY (atau titik jangkar) dari lapisan topeng adalah tepi atasnya, kita perlu menaikkannya sebesar 420 piksel agar bagian tengah gambar terlihat.
Menganimasikan antar negara bagian
Untuk menganimasikan antara status default dan yang baru yang baru saja kita buat, kita hanya membutuhkan empat baris kode lagi. Kami akan menyetel penangan klik pada lapisan avatar. Saat pengguna menge-tapnya di layar profil, kami akan beralih ke tampilan yang diperluas dengan status bersepeda. Saat diketuk lagi, kami akan menggilir kembali ke status default sehingga kembali ke lingkaran kecil. Baris kode yang sama menangani kedua interaksi:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Baris pertama dari blok ini menyiapkan penangan klik pada lapisan avatar. Kapan pun itu diketuk, tidak peduli bagaimana itu dipotong atau berapa ukurannya, pernyataan berikut akan berjalan.
Kemudian kita cukup mereferensikan setiap lapisan, dan menggunakan metode layer.states.next () untuk beralih status. Saat Anda menggunakan layer.states.next (), Framer akan menggunakan pengaturan animasi default internal. Ini sangat nyaman, tetapi Anda dapat membuat animasi yang lebih baik dengan menyempurnakan kurva animasi.
Saat menggunakan status seperti kita di sini, Anda dapat dengan mudah mengubah setiap kurva animasi secara terpisah dengan menggunakan properti layer.states.animationOptions. Dengan hanya tiga sedikit penyesuaian, animasinya terasa sangat berbeda:
sketch.content.states.animationOptions = kurva: "kemudahan", waktu: 0,3 headerMask.states.animationOptions = kurva: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Untuk lapisan konten yang memudar dan masuk, kami akan memilih prasetel kurva sederhana, memudahkan, dan menyetel durasi animasi ke 0,3 sehingga sangat cepat.
Untuk lapisan headerMask dan mask, gunakan kurva pegas. Untuk tujuan kami, Anda hanya perlu mengetahui bahwa nilai kurva pegas mengubah kecepatan dan pantulan animasi. Nilai untuk lapisan topeng akan membuat animasinya jauh lebih cepat daripada headerMask dan konten. Untuk detail selengkapnya tentang pengaturan kurva pegas, lihat dokumentasi Framer di framerjs.com/docs.
Cobalah di perangkat seluler sungguhan
Melihat desain pada perangkat nyata jauh lebih efektif daripada menggunakan emulator, dan Anda akan melihat manfaatnya dalam pekerjaan Anda. Framer menyertakan fitur mirror, yang merupakan server built-in yang menawarkan URL ke prototipe Anda melalui jaringan lokal Anda. Cukup kunjungi URL menggunakan perangkat Anda.
Anda telah mempelajari semua yang perlu Anda ketahui untuk membuat prototipe desain Anda sendiri di Framer. Apa yang kamu tunggu?
Kata-kata: Jarrod Drysdale
Jarrod Drysdale adalah seorang penulis, konsultan desain, pembuat produk digital. Artikel ini pertama kali tayang di majalah net terbitan 270.
Suka ini? Baca ini!
- Buat prototipe langsung yang dapat diklik di Sketch
- Bagaimana memulai sebuah blog
- Editor foto terbaik
