Desain
29 Agu 2025
Framer loop fitur untuk membuat ikon animasi
Dengan fitur loop baru Framer, Anda dapat dengan mudah membuat ikon animasi. Fitur ini memungkinkan animasi berulang secara tak terbatas, sehingga memudahkan Anda untuk membuat ikon yang menarik.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Jika Anda menyukai animasi, Anda pasti senang mendengar tentang pembaruan fitur Loop yang baru saja dirilis oleh Framer. Dengan memanfaatkan fitur ini, Anda bisa membuat animasi yang berulang tanpa henti dengan sangat mudah. Dalam tutorial ini, kami akan memperkenalkan cara membuat 3 ikon animasi menggunakan fitur loop baru dari Framer.
Persiapan
Untuk membuat ikon animasi, Framer harus diinstal di komputer Anda. Dapat diunduh dari situs resmi, dan pemahaman dasar tentang penggunaan alat desain dan animasi Framer diperlukan.
Memulai
Setelah instalasi Framer selesai, mulailah proyek baru.
Selanjutnya, buat frame baru untuk menempatkan ikon.
Tambahkan tiga bentuk ke dalam frame dan posisikan sesuai keinginan. (Dalam tutorial ini, kami akan menggunakan lingkaran, persegi, dan segitiga sebagai contoh.)
Membuat Animasi
Setelah penempatan bentuk selesai, mari kita buat animasinya.
Pilih frame dari bentuk pertama, lalu pindah ke panel animasi di sebelah kanan.
Klik '
Effects' lalu pilih putar ulang (Loop). (Dengan cara ini, animasi akan berulang terus menerus)Atur properti animasi yang diinginkan di dalam panel. Sebagai contoh, menerapkan animasi pada properti penyesuaian ukuran (
Scale) dapat menghasilkan efek bentuk yang meloncat.
Menambahkan Interaksi
Untuk membuat ikon animasi lebih hidup, mari kita tambahkan fungsi interaksi. Pilih salah satu bentuk dan atur pemicu interaksi yang diinginkan. FramerFramer menawarkan berbagai opsi seperti klik (Press), melayang (Hover), seret (Drag), dan lainnya.
Dalam contoh ini, kami akan menggunakan interaksi klik untuk memutar dan menghentikan animasi.
Penyelesaian
Berkat fitur loop baru dari Framer, Anda sekarang bisa dengan mudah membuat ikon animasi yang menarik tanpa pengaturan yang rumit. Berdasarkan panduan ini, buatlah ikon Anda sendiri dan tambahkan interaksi untuk menciptakan ikon animasi Loop yang unik.
Lihat proyek efek dan remix
Artikel ini diadaptasi dan diterjemahkan dari ‘Creating animated icons with Framer’s loop functionality’ dari blog resmi Framer.
