Tombol tindakan sering kali mewakili tindakan utama layar saat ini. Terkadang berisi beberapa tindakan di dalamnya.
LANGKAH 1: BUAT TIGA TOMBOL BERBENTUK LINGKARAN
Untuk memulai, buat satu tombol utama berbentuk lingkaran dengan ikon di dalamnya dan dua tombol kecil ditempatkan di bawah tombol utama. Jangan lupa untuk menandai semua lapisan ini sebagai interaktif dalam mode desain (dengan indikator target).
LANGKAH 2: RANCANG DUA STATUS UNTUK SEMUA LAPISAN
Buat dua keadaan berbeda untuk layer. Gunakan kode di bawah ini untuk membuat tombol yang lebih kecil berpindah ke atas tombol utama dan untuk memutar ikon 45°:
button_1.states.a =
y: 427
x: 246
width: 64
height: 64
button_2.states.a =
y: 330
x: 246
width: 64
height: 64
icon.states.a =
rotation: 45
LANGKAH 3: TAMBAHKAN EVENT
Untuk membuat prototipe ini dianimasikan, kita harus menambahkan sebuah event. Setelah mengetuk tombol tindakan, ubah status semua lapisan:
button.onTap ->
button_1.stateCycle()
button_2.stateCycle()
icon.stateCycle()
LANGKAH 4: SPRING ANIMATION
Pada titik ini, animasinya terlihat sangat mekanis. Untuk menambahkan sentuhan manusia, kami akan menambahkan animasi pegas untuk semua lapisan:
button_1.animationOptions =
curve: Spring(tension: 170, friction: 12)
button_2.animationOptions =
delay: 0.05
curve: Spring(tension: 170, friction: 12)
icon.animationOptions =
curve: Spring(tension: 250, friction: 5)
Tombol aksi siap digunakan!
