Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Menambah animasi berasaskan fizik ke Android Apps

by
Difficulty:BeginnerLength:MediumLanguages:

Malay (Melayu) translation by Salim bin Abdullah (you can also view the original English article)

Animasi yang berasa cair dan realistik cenderung menjadikan antara muka pengguna lebih menarik. Tidak hairanlah, Bahan Reka Bentuk memberikan penekanan kepada mereka!

Sekiranya anda pernah mencipta animasi sedemikian, anda tahu bahawa animator mudah dan interpolator yang ditawarkan oleh SDK Android sering tidak cukup baik. Itulah sebabnya semakan terkini Perpustakaan Sokongan Android datang dengan modul fizik yang dipanggil Animasi Dinamik .

Dengan Animasi dinamik, anda boleh membuat animasi berasaskan fizik yang sangat mirip dengan pergerakan objek di dunia sebenar. Anda juga boleh mendapatkannya untuk bertindak balas terhadap tindakan pengguna dalam masa nyata. Dalam tutorial ini, saya akan menunjukkan kepada anda cara membuat beberapa animasi sedemikian.

Prasyarat

Untuk mengikuti, pastikan anda mempunyai yang berikut:

1. Tambah Ketergantungan

Untuk dapat menggunakan Animasi Dinamik dalam projek anda, anda harus menambahkannya sebagai implementation ketergantungan dalam fail build.gradle modul app :

Dalam tutorial ini, kami akan menghidupkan widget ImageView . Sudah tentu, ia harus memaparkan beberapa imej, jadi Open Vector Assets Studio dan menambah ikon Material berikut untuk projek anda:

  • sentimen neutral
  • sentimen sangat berpuas hati

Berikut adalah penampilan mereka:

Two Material icons

Untuk hasil yang terbaik, saya cadangkan anda menetapkan saiz ikon 56 x 56 dp .

2. Mewujudkan Animasi Melemparkan

Apabila anda membuang objek ke dunia nyata, anda memberi mereka momentum yang hebat. Oleh kerana momentum tidak lain hanyalah produk massa dan kelajuan, objek pada mulanya akan mempunyai kelajuan tinggi. Secara beransur-ansur, bagaimanapun, terima kasih kepada gesekan, perlahan turun sehingga ia berhenti bergerak sepenuhnya. Menggunakan kelas Animasi FlingAnimation Animasi Dinamik, anda boleh mensimulasikan tingkah laku ini dalam aplikasi anda.

Untuk demonstrasi, mari kita buatkan susun atur yang mengandungi widget ImageView, paparan ikon ic_sentiment_neutral_black_56dp , dan widget pengguna Button boleh menekan untuk mencetuskan animasi melepaskan. Jika anda meletakkan kedua-dua di dalam widget RelativeLayout , fail tata letak XML anda akan kelihatan seperti ini:

Dalam kod di atas, anda dapat melihat bahawa widget Button mempunyai atribut onClick . Dengan mengklik ikon mentol merah di ikon Android di sebelahnya, anda boleh mencipta pengendali acara klik yang berkaitan dalam kelas Activity anda:

Anda kini boleh membuat contoh baru kelas FlingAnimation menggunakan FlingAnimation , yang mengharapkan View objek dan nama harta alih. Animasi dinamik menyokong pelbagai sifat animasi, seperti skala, terjemahan, putaran, dan alfa.

Kod berikut menunjukkan cara membuat contoh FlingAnimation yang boleh menghidupkan koordinat X susun atur ImageView kami:

Secara lalai, contoh FlingAnimation dikonfigurasikan untuk menggunakan 0 piksel / saat sebagai kelajuan awalnya. Ini bermakna animasi akan berhenti apabila ia bermula. Untuk mensimulasikan setStartVelocity() yang realistik, anda harus sentiasa ingat untuk memanggilnya kaedah setStartVelocity() dan memasukkan nilai yang besar untuknya.

Di samping itu, anda mesti faham bahawa tanpa geseran, animasi tidak akan berhenti. Oleh itu, anda juga perlu memanggil kaedah setFriction() dan menghasilkan jumlah yang kecil untuknya.

Kod berikut mengkonfigurasi contoh FlingAnimation seperti ImageView tidak akan dibuang sempadan skrin pengguna:

Pada ketika ini, anda boleh memanggil kaedah start() untuk memulakan animasi.

Sekiranya anda menjalankan aplikasi sekarang dan tekan butang, anda dapat melihat animasi membuang

Harus diingat bahawa anda tidak menentukan tempoh atau nilai akhir apabila membuat animasi berasaskan fizik - animasi berhenti secara automatik apabila menyedari bahawa objek sasarannya tidak menunjukkan pergerakan yang dilihat pada skrin pengguna.

3. Simulate Springs

Animasi dinamik membolehkan anda dengan mudah menambah dinamik musim bunga pada animasi anda. Dengan kata lain, ini dapat membantu anda membuat animasi yang membuat widget anda melantun, meregangkan, dan squash dengan cara yang terasa semula jadi.

Untuk memastikan perkara mudah, kini mari kita guna semula susun atur ImageView dan aplikasikan animasi berasaskan musim bunga. Agar pengguna memulakan animasi, anda mesti menambah widget Button lain pada susun atur.

Untuk membuat animasi berasaskan musim bunga, anda harus menggunakan kelas SpringAnimation . Pembina juga mengharapkan View sifat objek dan animasi. Kod berikut mencipta contoh SpringAnimation yang dikonfigurasi untuk menghidupkan koordinat x ImageView :

Untuk mengawal tingkah laku animasi berasaskan musim bunga, anda perlu musim bunga. Anda boleh mencipta satu menggunakan kelas SpringForce , yang membolehkan anda menentukan kedudukan rehat spring, nisbah redaman, dan kekakuan. Anda boleh memikirkan nisbah redaman sebagai pemalar yang, seperti geseran, menjadi bertanggungjawab untuk melambatkan animasi sehingga ia berhenti. Sebaliknya, kekukuhan menentukan berapa banyak kekuatan yang diperlukan untuk meregangkan musim bunga.

Jika semuanya berbunyi sedikit rumit, berita baiknya ialah kelas SpringForce menawarkan beberapa pemalar intuitif yang boleh anda gunakan untuk mengkonfigurasi musim bunga anda dengan cepat. Sebagai contoh, kod berikut mewujudkan spring yang sangat melenting dan sangat fleksibel:

Dalam kod di atas, anda dapat melihat bahawa kami telah menetapkan nilai titik resting terakhir dari musim semi ke koordinat awal X of ImageView . Dengan konfigurasi ini, anda boleh membayangkan ImageView dilampirkan kepada band getah yang tidak kelihatan, yang dengan cepat menarik ImageView kembali ke kedudukan asalnya apabila ia dipindahkan.

Anda kini boleh mengaitkan musim bunga dengan contoh SpringAnimation menggunakan kaedah setSpring() .

Akhirnya, sebelum memulakan animasi, anda harus memastikan bahawa anda memberikan kelajuan permulaan yang hebat dengan menggunakan kaedah setStartVelocity () .

Jika anda menjalankan aplikasi sekarang, anda harus melihat sesuatu seperti ini:

4. Mendengarkan acara Animasi

Animasi yang dibuat menggunakan pustaka Animasi Dinamik harus selalu bermula dari thread UI. Anda juga boleh mengesahkan bahawa ia akan bermula sebaik sahaja anda memanggil kaedah start() . Walau bagaimanapun, ia berjalan secara serentak. Oleh itu, jika anda ingin diberitahu apabila ia tamat tempoh, anda mesti melampirkan objek OnAnimationEndListene menggunakan kaedah addEndListener () .

Untuk melihat pendengar dalam tindakan, mari tukar ikon ImageView pada bila-bila masa animasi berasaskan musim bunga, yang telah kami buat dalam langkah sebelumnya, bermula dan berakhir. Saya cadangkan anda menggunakan ikon ic_sentiment_very_satisfied_black_56dp apabila animasi bermula, dan icon ic_sentiment_neutral_black_56dp apabila ia berakhir. Kod berikut menunjukkan cara:

Dengan kod di atas, animasi akan kelihatan seperti ini:

5. Pelbagai animasi hartanah

Pembina dari kelas FlingAnimation dan SpringAnimation hanya boleh menerima satu sifat animasi. Jika anda ingin membolehkan pelbagai ciri secara serentak, anda boleh membuat beberapa contoh kelas, yang boleh rumit, atau membuat ciri khas baru yang merangkumi semua sifat yang anda mahukan.

Untuk membuat harta animatable custom, anda mesti membuat subclass dari kelas FloatPropertyCompat , yang mempunyai dua kaedah abstrak: setValue() dan getValue() . Seperti yang anda jangkakan, anda boleh mengemas kini nilai semua sifat animatable yang anda mahu dalam kaedah setValue() . Walau bagaimanapun,dalam kaedah getValue() , anda mesti mengembalikan nilai semasa satu harta sahaja. Oleh kerana batasan-batasan ini, anda biasanya perlu memastikan nilai-nilai sifat-sifat yang terkurung tidak sepenuhnya bebas dari satu sama lain.

Contohnya, kod berikut menunjukkan bagaimana untuk membuat harta khas yang dipanggil scale , yang boleh membolehkan SCALE_X dan SCALE_Y widget:

Sekarang, harta tersuai sudah siap, anda boleh menggunakannya seperti mana-mana harta animasi yang lain. Kod berikut menunjukkan bagaimana untuk membuat objek SpringAnimation dengannya:

Apabila membuat animasi yang menggunakan sifat tersuai, ia juga merupakan idea yang baik untuk memanggil kaedah setMinimumVisibleChange () dan memasukkan nilai yang bermakna untuk memastikan animasi tidak mengambil terlalu banyak kitaran CPU. Untuk animasi kami, yang mempunyai skala widget, anda boleh menggunakan kod berikut:

Berikut adalah pandangan animasi hartanah tersuai:

Kesimpulannya

Anda kini mengetahui asas-asas kerja dengan Animasi dinamik. Dengan teknik yang anda pelajari dalam tutorial ini, anda boleh membuat animasi berasaskan fizik yang meyakinkan dalam beberapa minit, walaupun anda mempunyai sedikit pengetahuan mengenai fizik Newtonian.

Untuk mengetahui lebih lanjut mengenai Animasi Dinamik, lihat dokumentasi rasmi . Sementara itu, periksa beberapa catatan baru-baru ini kami yang merancang pembangunan aplikasi Android!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.