MIT School Muslimah : Membuat Animasi Sederhana

MIT School Muslimah : Membuat Animasi Sederhana
Kasus kali ini adalah tentang bagaimana membuat cara animasi sederhana yang bisa berubah bentuk, cornerradius, warna, dan berubah posisi. hmm sepertinya sulit sepertinya juga mudah wkwka
Buka xcode yang perlu disiapkan adalah :
  • elemen image untuk background
  • element view
  • dan element button
Tata dengan rapi posisikan view ditengah scene, dan drag semua element ke file brain. Buat var yang berisi integer contoh var i = 0 ini digunakan saat if dijalankan, karena akan membuat beberapa tahap perubahan maka saya menggunakan if
Sebelum mengotak atik bagaimana cara merubah bentuk dan sebagainya, panggil var i kedalam func button (IBAction) ubah isinya menjadi var i += 1 (jika dipencet akan bertambah 1 nilainya sampai jumlah ifnya habis) dan masukkan kode berikut kedalam func buttonnya
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
 }, completion: {
                (value: Bool) in
        })
Kenapa harus memasukkan memasukkan itu ? itu untuk mengatur agar effect animasinya berjalan, kalian bisa mengatur jeda / delay dan durasinya sesukamu.
Saatnya merombak view
Ubah posisi view dengan mengubah koordinat X dan Y, bentuk view dengan cornerradius, border dengan borderWith, alpha, warna view, background dan lainnya, kalian bisa melihat contoh pada gambar dibawah ini. Dan untuk if jika kalian sudah membuat 1 perubahan dan akan membuat yang lainnya jangan lupa pakai else.
screen-shot-2016-09-26-at-7-42-07-pm
bisa kalian kembangkan sendiri akan membuat berapa view dalam setiap perubahan.
saya membuat 7 perubahan maka ifnya 7.
if i = 1 {
//menjalankan peruahan view pertama
}else if i = 2 {
//menjalankan perubahan view kedua
}
dan seterusnya. jika sudah selesai dibagian else di isi
screen-shot-2016-09-26-at-7-56-25-pm
if nya cuma 7 jadi waktu dia jalan menuju if ke 8 maka dia akan kembali ke pertama lagi
 berikut jadinya

 screen-shot-2016-10-08-at-1-02-56-pm     screen-shot-2016-10-08-at-1-03-15-pm     screen-shot-2016-10-08-at-1-03-32-pm     screen-shot-2016-10-08-at-1-03-45-pm

screen-shot-2016-10-08-at-1-04-00-pm     screen-shot-2016-10-08-at-1-04-19-pm     screen-shot-2016-10-08-at-1-04-33-pm

Madani IT School Muslimah
Astri Novia Putri

Related posts:

Loading Facebook Comments ...