Animasi dan Visual Effect di iOS – FoodPin Apps

Di iOS, untuk membuat animasi yang canggih tidaklah membutuhkan code yang kompleks. Semua yang kita butuhkan ada di satu methodyang ada di class UIView, yaitu:

Animasi dan Visual Effect di iOS

UIView.animateWithDuration(1.0, animations)

Ini merupakan beberapa variasi dari method yang bertanggung jawab untuk mengatur fitur animasi.

Ok, sebelum kita memulainya ada lebih baik kita tahu apa yand dimaksud dengan animasi? Bagimana animasi dibuat?

Animasi merupakan simulasi dari gerakan dan perubahan bentuk object yang ditampilkan dengan cepat dalam sekelompok gambar statis atau frame. Contohnya adalah animasi lingkaran yang membesar yang dibuat berdasarkan tampilan gambar yang di atur per framenya. Dimulai dari sebuah titik hingga bentuknya besar dan terus membesar seperti yang terlihat pada gambar dibawah ini.

Rangkaian frames untuk membuat animasi
Rangkaian frames untuk membuat animasi

Untuk membuat sebuah animasi yang halus, kita harus menyediakan banyak frame gambar. Nah sekarang kita telah mengetahui ide dasar pembuatan animasi, sekarang bagimana membuat animasi di iOS?

Berdasarkan contoh lingkaran yang membesar, kita telah mengetahui animasi tersebut di mulai dari sebuah titik dan di akhirnya dengan lingkaran merah yang besar. Tantangannya adalah untuk membuat rentetan frame, kita mungkin berpikir hal ini akan membutuhkan sebuah algoritma atau seribu baris code untuk membuat rentetan frame. Animasi UIView membantu kita untuk menyelesaikan masalah ini dengan mengkomputasikan frame awal sampai akhir frame. Untuk mengimplementasikanya kita spesifikasi start awal dan memberitahukan UIView akhirnya dengan memanggil method UIView.animateWithDuration.

Nah itulah gambarannya, selanjutnya kita akan mempraktekkannya pada aplikasi FoodPin yang telah kita buat sebelumnya.


 

Menambahkan Toolbar

Sebelum membuat animasi, pertama kali kita tambahkan toolbar pada detail view controller. Di toolbar terdapat dua tombol, dimana satu untuk sharing ke social media dan tombol yang kedua untuk me-review restaurant, dimana ketika kita menekan tombol ini kita akan dibawa ke halaman modal view asking untuk mereview restaurant. Kita akan membahas modal view nanti.

Coba buka storyboard dan pindahkan object Toolbar dari Object Library ke Detail View Controller. Tentu akan mudah memindahkan object ke Document Outline dan meletakkan toolbar disebalah kanan bawah dari table view seperti yang terlihat pada gambar dibawah ini.

Menambahkan toolbar untuk detai view controller
Menambahkan toolbar untuk detai view controller

Selanjutnya kita akan memindahkan toolbar ke bagian bawah dari layar. Di Size Inspector, ganti niai Y menjadi 524, dan seharunya layar akan terlihat seperti gambar dibawah ini.

Memindahkan tollbar ke bagian bawah view
Memindahkan tollbar ke bagian bawah view
Mengganti item toolbar ke Action
Mengganti item toolbar ke Action

Sekarang pilih Item yang ada di toolbar. Di Attributes Inspector, biarkan judulnya kosong dan ganti Indetifiernya menjadi Action

Indah tombol bar lainnya dari Object Library ke toolbar. Biarkan judulnya kosong dan ganti identifiernya menjadi Compose. Kemudian pindahkan tombol flexible space bar ke toolbar dan letakkan di bagian kiri dari tombol Action. Tambahkan 2 lagi tombol flexible space bar ke toolbar hingga hasil akhirnya terlihat seperti gambar dibawah ini.

Toolbar untuk aplikasi Food Pin

Sekarang semua item yang dibutuhkan telah kita tambahkan ke toolbar, selanjutkan kita akan memodifikasi warna dari tombol bar tersebut. Pada file AppDelegate.swift, tambahkan code dibawah ini pada method application(_:didFinishLaunchingWithOptions:):

UIBarButtonItem.appearance().tintColor = UIColor(red: 235.0/255.0, green: 73.0/255.0, blue: 27.0/255.0, alpha: 1.0)
UIToolbar.appearance().barTintColor = UIColor(red: 237.0/255.0, green: 240.0/255.0, blue: 243.0/255.0, alpha: 0.5)

TintColor mengindikasikan warna dari tombol bar, dan barTintColor mengindikasikan warna untuk background toolbar. Ok, mari kita coba untuk testing aplikasi, compile dan jalan aplikasi. Seharunya sekarang aplikasi telah memiliki toolbar di halaman detail view.


 

Membuat View Controller untuk Review Restaurant

Detail View dengan toolbar
Detail View dengan toolbar

Ketika user menekan tombol compose, kita ingin mengarahkan user ke halaman modal view agar user bisa memberikan rating terhadap restaurant yang dipilih. Di Interface Builder, tambahkan View Controller baru ke storyboard. Tambahkan image view ke tampilan dan kondisikan image menjadi cafeloisl, dimana nantinya gambar yang dipilih tersebut menjadi gambar background dari tampilan halaman. Kita juga nantinya akan menjadikannya gambar yang blur.

Di atas tampilan gambar, tambahkan oject view lainnya yang bertujuan untuk menampilkan dialog view. Di Size Inspecor, isi nilai X dengan 45 dan Y 102 dan isi lebarnya dengan 231 dengan tinggi 242. Untuk membuatnya tranparant, ganti background yang awalnya putih menjadi default.

Pindahkan label ke dialog view yang telah kita buat sebelumnya. Ganti judulnya dengan “You’ve dined here. What did you thing?” atau apapun pesan yang kita inginkan.

Selanjutnya download kumpulan icon dari sini: https://www.dropbox.com/s/zsvs8etoshuuodl/chapter13-images.zip?dl=0. Buka file dan tambahkan gambar tersebut ke images.xcassets. Pindahkan 3 tombol tersebut ke dialog view.

  • Isi judul tombol pertama dengan kosong dan gambarnya bad
  • Isi judul tombol kedua dengan kosong dan gambarnya good
  • Isi judul ketika dengan kosong dan gambarnya great.

Terakhir tambahkan tombol lainnya ke view dan letakkan di dekata sebelah kanan atas dari view. Isi judulnya dengna kosong dan gambarnya close. Hasilnya akan terlihat seperti gambar dibawah ini.

Review View Controller
Review View Controller

 

Membuat Segue untuk Modal View

Untuk membuat tampilan review seperti Modal View, kita harus membuat sebuah segue untuk menghungkan tombol compose dengan tampilan review. Tahan tombol control dan pindahkan dari tombol compose ke tampilan review. Lepaskan tombol dan pilih Modal sebagai tipe seguenya. Setelah segue dibuat, pilih itu dan isi identifier dari segue dengan showReview dibawah Attribute Inspector, seperti gambar dibawah ini.

Menghubungkan tombol ubah dengan tampilan review controller menggunakan modal segue
Menghubungkan tombol ubah dengan tampilan review controller menggunakan modal segue

Nah sekarang mari kita lakuka resting, jalankan aplikasi dan buka halaman detail view. Tekan tombol compose dan seharusnya membawa kita ke tampilan review. Disitu terdapat isu yang harus kita selesaikan, antara lain:

  • Tombolnya terlihat tidak bagus dan mungkin akan terlihat bagus jika bentuknya bulat.
  • Tidak ada tombol keluar dari view, karena tombol keluar belum di implementasikan.
  • Backgrounya masih belum blur.

Membuat Tombol Bulat di Interface Builder

Membuat round button menggunakan User Defined Runtime Attributes
Membuat round button menggunakan User Defined Runtime Attributes

Di awal pembahasan, kita telah melihat salah satu cara membuat tombol bualat dengan memodifikasi tampilan cornerRadius dari code CALayer. Selain itu ada cara termudah untuk membuatnya menggunakan User Defined Runtime Attributes di Interface Builder. Fitur runtime attributes tersembunyi di Interface Builder, dimana ini memperboleh developer untuk mengatur properties dari tampilan selama runtime. Untuk menambahkan property layer.cornerRadius, pilih salah satu tombol dan ke Identity inspector. Klik tombol + di User Defined Runtime Attributes.

Klik dua kali Tombol Path, isi menjadi layer.cornerRadius. Gantu tipenya menjadi Number dengan nilai 30.

Ulanga prosedur yang sama untuk kedua tombol, well that’s it. Jika kita testing aplikasi kembali, sekarang tombolnya telah berbentuk bulat.

 

Membuat Fungsi close pada tombol close untuk View Controller

Di tampilan review kita belum memiliki tombol close yang berfungsi, untuk membuatnya kita harus membuat sebuah definisi yang di panggil unwind segue. Unwind segue ini bisa digunakan untuk memindahkan kembali ke awal modal atau segue. Dalam contoh project kita, kita bisa menggunakannya untuk menghilangkan modal view. Untuk menggunakan unwind segua, terdapat dua cara. Pertama, deklarasikan sebuah method di view controller. Untuk kasusk ini di DetaiViewController. Tambahkan method dibawah ini pada file DetailViewController.swift:

@IBAction func close(segue:UIStoryboardSegue) {

}

Kembalian dari method ini adalah IBActin dan mengembalikannya diUIStoryboardSegue. Method ini memberitahu Xcode untuk menutupnya. Optional, kita bisa mengimplementasikan logika tambahan di method ini, tapi method yang kosong sudah cukup untuk project kita.

Kembali ke Interface Builder, tekan dan tahan tombol control lalu pindah dari tombol close ke icon Exit dari dock view controller seperti yang terlihat pada gambar dibawah ini.

Menambahkan unwind segue untuk tombol tutup
Menambahkan unwind segue untuk tombol tutup

Membuat Efek Blur pada Gambar Background

Langkah selanjutnya adalah membuat gambar background menjadi blur. Di iOS 8, Apple memperkenalkan cass baru yang dinamakan dengan UIVisualEffectView yang memperbolehkan developer untuk mengaplikasikan visual effect pada tampilan. Dengan mengkombinasikanya dengan class UIBlueEffect, kita dengan mudah mengaplikasikan efek blue pada gambar.

Pertama kita buat class baru untuk tampilan review di view controller. Pada project navigation, klik kanan folder FoodPin dan pilih “New File ..”. Namakan class tersebut dengan ReviewViewController dan isi subclassnya denan UIViewController. Save file tersebut di folder FoodPin.

Pilih file ReviewViewController.swift yang telah kita buat, dan tambahkan variabel outlet untuk tampilan gambar background.

@IBOutlet weak var backgroundImageView:UIImageView!

Pada method viewDidLoad, tambahkan code berikut:

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
var blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
backgroundImageView.addSubview(blurEffectView)

Pertama kite membuat object UIBlurEffect, dimana UIBlueEffect ini memiliki 3 style berbeda yaitu Dark, Light dan ExtraLight. Nah disini saya akan menggunakan Dark style, tapi terserah Anda jika menginginkan style lainnya. Selanjutnya kita membuat UIVisualEffectView dengan efek blur, dan juga telah menambahkan visual effect pada gambar background.

Selanjutnya buka Interface Builder dan pilih tampilan controller review. Di Identity Inspector isi custom class menjadi ReviewViewController. Nah sekarang buat koneksi antara gambar bacgkround dengan outlet backgroundImageView seperti gambar dibawah ini.

Membuat koneksi antara variabel outlet dengna image view
Membuat koneksi antara variabel outlet dengna image view

Sekarang kita telah siap untuk melakukan testing, dan seharsunya aplikasi akan menampilkan tampilan review seperti yang ada pada gambar dibawah ini.

Review Screen
Review Screen

 

Membuat Animasi Dialog menggunakan UIView Animation

Nah untuk membuat animasi untuk dialog view dengan memanfaatkan fitur dari UIView Animation. Seperti penjelasan sebelumnya ketika titik membesar menjadi sebuag lingkaran bulat besar dalam bentuk animasi, nah itu juga yang akan kita implementasikan pada aplikasi kita ini, seperti yang terlihat pada gambar dibawah ini.

Alur Animasi
Alur Animasi

Seperti yang telah dijelaskan sebelumnya, kita membutuhkan dua kondisi untuk membuat animasi, yaitu keadaan awal dan keadaan akhir dari animasi. Selanjutna UIViewlah yang akan membuat animasi untuk kita. Mari kita definisikan secara lebih rinci lagi:

  • Kondisi awal – dialog view ditampilkan dalam ukuran nol atau
  • Kondisi akhir – dialog view ditampikan dalam ukuran yang aslinya

Mungkin pertanyaan bagaimana kita bisa mengukur ukuran tampilannya. Nah iOS memiliki fungsi yang bertanggung jawab untuk mentransform ukuran, rotasi, dan perpindah tampilan. Untuk mengatur ukuran tampilan, buat CGAffineTransformMakeScale dan isi property transformnya dengan UIView.

CGAffineTransformMakeScale(0.0, 0.0)

Pada file ReviewViewController.swift, tambahkan variabel outlet lainnya untuk tampilan dialog seperti code dibawah:

@IBOutlet weak var dialogView:UIView!

Pergi ke Interface Builder dan buat koneksi antara dialog view dengan variabel outlet.

Membuat koneksi antara dialog view dengan variabel outlet
Membuat koneksi antara dialog view dengan variabel outlet

Pada method viewDidLoad dari class ReviewViewController, tambahkan code dibawah ini:

dialogView.transform = CGAffineTransformMakeScale(0.0, 0.0)

Proses pengukuran ini pada di dialog view di mulai ketika pertama kali perintah di panggil. Untuk membuat effect membesar pada dialgo view kita tambahkan method UIView.animationWithDuration:

override func viewDidAppear(animated: Bool) {
UIView.animateWithDuration(0.7, delay: 0.0, options: nil, animations: {
self.dialogView.transform = CGAffineTransformMakeScale(1, 1)
}, completion: nil)
}

Yups, akhirnya proses pembuatan animasi membesar telah selesai dibuat. Selanjutnya untuk mengujinya kita perlu mengcompile dan menjalankan aplikasi. Nah selain animasi membesar di atas, ada banyak variasi animasi yang disediakan oleh class UIView, salah satunya adalah:

Spring Animation

Spring Animation sangat familiar pada iOS 7. Salah satu contohnya adalah ketika kita menjalankan aplikasi pertama kali pada umumnya. Nah kita juga bisa mengimplementasikannya pada aplikasi dengan memanggil satu method yaitu:

UIView.animateWithDuration(0.7, delay: 0.0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: nil, animations: {
self.dialogView.transform = CGAffineTransformMakeScale(1, 1)
}, completion: nil)


 

Latihan

Nah kita belum mengimplementasikan animasi untuk tombol share pada aplikasi kita. Latihan yang perlu kita coba adalah membuatnya dengan mengikuti cara yang sama pada tombol review diatas. Nah nantinya tampilan harusnya seperti pada gambar dibawah ini.

Share View Controller dengan efek sliding
Share View Controller dengan efek sliding

Well mungkin cukup sekian pembahasan kali ini, oya untuk contoh code pada pembahasan kali in bisa didownload disini: https://www.dropbox.com/s/j6u8c29xauchn85/FoodPinAnimation.zip?dl=0

Semoga bermanfaat Guys, See Yaa .. 😉

Iklan

3 pemikiran pada “Animasi dan Visual Effect di iOS – FoodPin Apps

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s