{"id":8070,"date":"2019-03-05T13:20:46","date_gmt":"2019-03-05T06:20:46","guid":{"rendered":"http:\/\/crocodic.com\/?p=8070"},"modified":"2022-03-24T13:27:22","modified_gmt":"2022-03-24T06:27:22","slug":"percantik-mobile-appsmu-dengan-animasi-dan-lottie","status":"publish","type":"post","link":"http:\/\/crocodic.com\/id\/percantik-mobile-appsmu-dengan-animasi-dan-lottie\/","title":{"rendered":"Percantik Mobile Appsmu dengan animasi dan Lottie"},"content":{"rendered":"<p>Animasi merupakan salah satu fitur <a href=\"http:\/\/crocodic.com\/id\/5-kesalahan-yang-sering-dilakukan-developer-mobile-apps\/\">aplikasi<\/a> Andorid yang bisa memberikan pengalaman berbeda. Tanpa animasi apapun asal memliki fungsi yang berjalan dengan baik, aplikasi kita sudah cukup diterima pengguna. Meski begitu sentuhan manis berupa animasi yang menarik dapat memberikan kesan yang berbeda dibandingkan aplikasi lain di mata pengguna.<\/p>\n\n\n\n<p><strong>Lottie <\/strong>adalah library yang dikembangkan oleh <a href=\"https:\/\/airbnb.io\/\">Airbnb<\/a> untuk mem-parsing animasi dari Adobe After Effect. Adobe After Effect dapat mengekspor animasi dalam bentuk JSON menggunakan Bodymovin, Lottie dipakai untuk membaca isi file JSON ini sehingga dapat me-render animasinya dengan baik di perangkat mobile.<\/p>\n\n\n\n<p><strong>Lottie <\/strong>dinamai sutradara film Jerman dan pelopor animasi siluet terkemuka. Film-filmnya yang paling terkenal adalah The Adventures of Prince Achmed (1926) &#8211; film animasi panjang fitur tertua yang bertahan, mendahului panjang fitur Walt Disney Snow White dan Seven Dwarfs (1937) oleh lebih dari sepuluh tahun.<\/p>\n\n\n\n<p>Berikut adalah beberapa contoh penggunaan Lottie di aplikasi:<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img fetchpriority=\"high\" decoding=\"async\" width=\"900\" height=\"507\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/Introduction_02_sm.gif\" alt=\"\" data-id=\"8072\" data-link=\"http:\/\/crocodic.com\/?attachment_id=8072\" class=\"wp-image-8072\"\/><\/figure><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"900\" height=\"507\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/Introduction_03_sm-1.gif\" alt=\"\" class=\"wp-image-8074\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bagaimana cara menggunakan Lottie?<\/h3>\n\n\n\n<p><a href=\"http:\/\/lottiefiles.com\/\">LottieFiles.com<\/a> memiliki ribuan animasi gratis yang dapat gunakan dalam  <br>project Anda. Anda bahkan dapat mengedit warna animasi dengan Editor Bodymovin bawaan di webnya.<\/p>\n\n\n\n<p>Mulai project baru dengan Empty Activity. Untuk memulai, kita perlu menambahkan library Lottie ke file build.gradle. Dapatkan versi perpustakaan terbaru dari <a href=\"https:\/\/github.com\/airbnb\/lottie-android#download\">dokumentasi Lottie<\/a> dan tambahkan ke dependensi gradle Anda.<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"900\" height=\"647\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-3.png\" alt=\"\" data-id=\"8081\" class=\"wp-image-8081\" srcset=\"https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-3.png 900w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-3-300x216.png 300w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-3-768x552.png 768w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-3-620x446.png 620w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption><em>untuk nama aplikasi tidak harus sama<\/em><\/figcaption><\/figure><\/li><\/ul>\n\n\n\n<p>Pada saat penulisan artikel ini, versi Lottie saat ini adalah 2.7.0.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"903\" height=\"215\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-4.png\" alt=\"\" class=\"wp-image-8083\" srcset=\"https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-4.png 903w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-4-300x71.png 300w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-4-768x183.png 768w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-4-620x148.png 620w\" sizes=\"(max-width: 903px) 100vw, 903px\" \/><figcaption><em>build:gradle module:app<\/em><\/figcaption><\/figure>\n\n\n\n<p>Selanjutnya, kita akan membuat folder &#8220;assets&#8221; di project kita dan menambahkan dua animasi kita ke sana. Siapkan animasi dari <a href=\"http:\/\/lottiefiles.com\">LottieFiles.com<\/a> yang anda sukai. Klik kanan pada folder aplikasi Anda dan pilih &#8216;Buka di Finder&#8217; (di mac). Dari sana, navigasikan ke src \/ main. Di folder &#8220;main&#8221;, buat folder baru yang disebut &#8220;assets&#8221;. Tempatkan animasi anda di folder &#8220;assets&#8221;.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"339\" height=\"367\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-1.png\" alt=\"\" class=\"wp-image-8076\" srcset=\"https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-1.png 339w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-1-277x300.png 277w\" sizes=\"(max-width: 339px) 100vw, 339px\" \/><figcaption><em>tampilan project files<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p>kemudian di activity_main.xml, tambahkan LottieAnimationView.<br>Untuk melampirkan animasi Anda ke tampilan, tambahkan attribut <a href=\"http:\/\/crocodic.com\/id\/cristiano-ronaldo-luncurkan-app-all-in-one-wellness-erakulis\/\">app<\/a>:lottie_fileName, ke nama animasi di folder &#8220;assets&#8221; Anda.<\/p>\n\n\n\n<p>Set atribut app:lottie_autoPlay dan app:lottie_loop menjadi &#8220;true&#8221;. app:lottie_autoPlay akan memulai animasi secara otomatis, dan app:lottie_loop memungkinkan animasi Anda untuk terus berulang, maka kodenya akan terlihat seperti ini:<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"347\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-2.png\" alt=\"\" data-id=\"8077\" class=\"wp-image-8077\" srcset=\"https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-2.png 660w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-2-300x158.png 300w, https:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/image-2-620x326.png 620w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><figcaption><em>activity_main.xml<\/em><\/figcaption><\/figure><\/li><\/ul>\n\n\n\n<p>dan hasilnya akan jadi seperti ini<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"800\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2019\/01\/untitled.gif\" alt=\"\" data-id=\"8078\" data-link=\"http:\/\/crocodic.com\/?attachment_id=8078\" class=\"wp-image-8078\"\/><\/figure><\/li><\/ul>\n\n\n\n<p>sumber: <a href=\"http:\/\/airbnb.io\/lottie\/\">lottie<\/a>, <a href=\"https:\/\/medium.com\/@eijaz\/animations-in-android-using-lottie-kotlin-679364ed3f26\">medium<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Animasi merupakan salah satu fitur aplikasi Andorid yang bisa memberikan pengalaman berbeda. Tanpa animasi apapun asal memliki fungsi yang berjalan dengan baik, aplikasi kita sudah cukup diterima pengguna. Meski begitu sentuhan manis berupa animasi yang menarik dapat memberikan kesan yang berbeda dibandingkan aplikasi lain di mata pengguna. Lottie adalah library yang dikembangkan oleh Airbnb untuk [&hellip;]<\/p>\n","protected":false},"author":26,"featured_media":8079,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[82],"tags":[88,364,238,227,359],"class_list":["post-8070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aplikasi-mobile-android-ios","tag-android","tag-android-apps-development","tag-aplikasi-android","tag-development","tag-mobile-apps-development"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/8070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/comments?post=8070"}],"version-history":[{"count":5,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/8070\/revisions"}],"predecessor-version":[{"id":8460,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/8070\/revisions\/8460"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media\/8079"}],"wp:attachment":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media?parent=8070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/categories?post=8070"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/tags?post=8070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}