Bagaimana Figma menempatkan pantulan dalam animasi musim semi
totosgp

Bagaimana Figma menempatkan pantulan dalam animasi musim semi

Kami tahu betapa pentingnya animasi untuk menghidupkan produk digital. Animasi dapat membuat pengguliran dari satu item ke item berikutnya dalam daftar menjadi mudah dan intuitif, sementara menyukai sesuatu dengan hati bisa terasa menyenangkan dan menyenangkan. Di FigJam, emote animasi dan tos adalah bagian inti dari keajaiban berada di file bersama-sama, dan kami ingin membantu pengguna kami membangun pengalaman serupa. Itulah sebabnya kami baru-baru ini meluncurkan animasi pegas, yang memungkinkan Anda merancang animasi transisi yang lebih lancar saat membuat prototipe.

Membangun animasi pegas membawa tim teknik kami kembali ke kelas—untuk membuat animasi yang alami dan akurat, kami meminjam prinsip dari fisika. Kami sangat senang untuk berbagi mekanisme di balik gerakan, dan kisah tentang bagaimana animasi musim semi memantul ke Figma.

Animasi pegas membuat desain berperilaku lebih alami karena mematuhi hukum fisika

Apa itu animasi musim semi?

Sampai kami meluncurkan animasi musim semi, animasi bezier adalah cara utama untuk membuat animasi di Figma. Animasi Bezier memungkinkan Anda untuk menentukan bagaimana suatu objek harus mulai bergerak, dan bagaimana objek itu harus berhenti. Meskipun fleksibel, animasi bezier masih bisa sedikit rumit untuk digunakan, dan jika Anda tidak berhati-hati saat menyesuaikan kurva bezier, Anda dapat dengan cepat berakhir dengan animasi kacau di mana objek mendapatkan kecepatan dari udara tipis, mengubah arah secara tidak wajar. , atau berhenti.

Animasi musim semi bekerja sedikit berbeda. Alih-alih mendefinisikan bagaimana suatu objek bergerak, Anda menentukan apa sifat fisik dari gerakan itu dan membiarkan hukum fisika muncul dengan jalur yang sebenarnya. (Piksel terlihat seperti dipaksa untuk bergerak oleh pegas yang tidak terlihat, oleh karena itu animasi “pegas”.) Dengan memulai dari sifat dasar massa, kekakuan, dan redaman, Anda mendapatkan kurva menyenangkan yang membuat gambar Anda terasa seperti memiliki bobot, pop-up yang terbuka dengan overshoot sempurna, dan transisi lintas layar yang meluncur dengan sangat pelan hingga berhenti.

Di bawah ini adalah contoh animasi pegas yang kami gunakan di Figma, yang dibuat oleh salah satu rekan tim kami, Ryan Hassan |.

Menempatkan “musim semi” di animasi musim semi

Beralih dari animasi bezier ke pegas berarti tim teknik kami perlu membuat serangkaian parameter baru yang menentukan bagaimana objek bergerak di Figma. Dan karena animasi pegas ditentukan oleh fisika, kami perlu memoles beberapa prinsip dasar.

Sama seperti orbit planet atau penerbangan frisbee, animasi pegas dapat dipecah menjadi formula khusus yang menguraikan bagaimana objek dipengaruhi oleh kekuatan eksternal. Ada tiga variabel utama untuk animasi pegas: massa, kekakuan, dan redaman. Mari kita definisikan ketiganya sebelum kita melangkah lebih jauh:

  • Massa: Tidak peduli seberapa besar atau kecil, semua benda fisik memiliki massa. Semakin besar massa (m) suatu benda, semakin berat benda tersebut, dan semakin besar gaya yang diperlukan untuk mempercepatnya. (Kedua fenomena tersebut adalah asal dari “F” dan “a” dalam persamaan di bawah ini.) Hubungan antara gaya, massa, dan percepatan didefinisikan oleh rumus Newton: F = m * a
  • Kekakuan: Kekakuan adalah properti yang unik untuk mata air. Jika Anda pernah menarik pegas sebelumnya, Anda tahu bahwa semakin jauh Anda menariknya, semakin keras ia menolak. Hukum Hooke merangkumnya dengan baik, di mana “k” adalah konstanta yang menunjukkan seberapa “kaku” pegas: F = -k * x
  • Pembasahan: Benda fisik akhirnya berhenti karena gesekan. Seperti angin di jalan raya atau tergelincir di lantai berkarpet dengan kaus kaki, semakin cepat sesuatu bergerak (“v” dalam persamaan di bawah, singkatan untuk “kecepatan”), semakin banyak hambatan yang dihadapinya. (Pikirkan kekuatan, tetapi diterapkan dalam arah yang berlawanan). Untuk menentukan seberapa cepat suatu benda berhenti, kita menggunakan konstanta b: F = -b * v
Bagaimana Figma menempatkan pantulan dalam animasi musim semi
Kekakuan, redaman, dan massa memengaruhi perilaku animasi pegas

Jadi kami memiliki variabel dan formula kami—tetapi apa gunanya bagi pengembang? Untungnya, perhitungan yang mendefinisikan animasi pegas adalah sains yang mapan, dan stabilitas itu membantu kita beralih dari perhitungan fisika abstrak ke kode bersih.

Untuk kasus penggunaan kami, kami menggunakan WebKit SpringSolver untuk memudahkan perjalanan pengembangan kami. Rumusnya memungkinkan kita memasukkan massa, kekakuan, dan redaman ke dalam fungsi pengaturan waktu pegas, dan kita mendapatkan nilai untuk x.

Namun, persamaan ini sendiri tidak membawa kita ke tempat yang kita inginkan. Ternyata mengutak-atik massa, kekakuan, dan redaman dengan tangan bisa sangat rumit. Meskipun parameter ini mewakili konstanta fisik, kami sebagai desainer UI yang bekerja dengan animasi tidak selalu berpikir dalam kerangka fisika murni. Kami ingin animasi menjadi lebih cepat atau lebih lambatmenjadi lebih goyangatau memiliki kurangi overshoot—semua istilah yang akan membuat seorang profesor fisika menangis.

Grafik tiga garis: Mengurangi Kekakuan;  Meningkatkan Redaman;  Meningkatkan Massa

Kesenjangan itu dapat dijelaskan dengan pertanyaan sederhana: Bagaimana cara memperlambat animasi? Seorang fisikawan akan memberi tahu kita bahwa kita dapat meningkatkan massa untuk melakukan itu, tetapi bagaimana dengan kekakuan dan redaman? Apakah mereka mempengaruhi animasi juga? Jawabannya adalah ya, yang berarti bahwa kita perlu membuat keputusan tentang parameter mana yang akan diedit dan berapa banyak yang harus disesuaikan. Ini adalah triangulasi yang sulit, tetapi untuk memberi desainer cara paling alami untuk mengubah animasi mereka, kami perlu membuat alat khusus yang menempatkan ketiga variabel di satu tempat. Bagaimana kami melakukannya adalah pertanyaan lain sepenuhnya. Ternyata jawabannya adalah menatap kami tepat di wajah.

Mendapatkan pegangan pada animasi musim semi

Jika Anda pernah menggunakan Figma untuk membuat animasi bezier, Anda akan tahu bahwa ada dua pegangan untuk menyesuaikan kurva. Ini memberi desainer tingkat kontrol atas apa yang mereka animasikan tanpa harus menyesuaikan input apa pun secara manual. Niko Klein, Desainer Produk kami, menyadari bahwa, meskipun menyesuaikan setiap variabel dalam animasi pegas dengan tangan dapat memberi Anda sesuatu yang mendekati realisasi yang kami inginkan, tidak masuk akal bagi desainer untuk meraba-raba dalam persamaan fisika. Kami ingin memberi pengguna tingkat kontrol yang sama atas animasi pegas seperti yang mereka miliki atas animasi bezier, jadi kami membuat UI untuk melakukan hal itu—menangani dan semuanya.

Menyesuaikan pegangan mengubah goyangan dan durasi animasi pegas

Kami tahu kami ingin pegangan memainkan peran sentral dalam UI animasi musim semi, dan gagasan itu meresap ke dalam desain dan sesi jam kami. Figma selalu fokus pada “manipulasi langsung” dalam hal membuat penyesuaian; kami lebih suka membuatnya mudah untuk mengubah fitur visual secara intuitif daripada harus mengubah banyak angka. Saat Niko mengulangi variasi yang berbeda pada Arsitektur Informasi (IA), sebuah titik kecil yang berada di kurva pegas adalah salah satu dari sedikit hal yang tetap konstan. Itu pegangan kami, kerinduan untuk dimasukkan dalam desain akhir.

Namun, kami memiliki pertanyaan yang melingkari tiga variabel massa, kekakuan, dan redaman kami. Bagaimana menggerakkan pegangan mempengaruhi rumus matematika di kurva pegas, dan sebaliknya? Berapa banyak kendala yang dimainkan? Apakah kita membutuhkan satu pegangan, dua, atau bahkan tiga? Apakah mereka bergerak secara horizontal, vertikal, atau keduanya? Apakah itu harus tetap pada kurva, atau apakah itu mungkin?

Kami memulai dengan membuat pegangan horizontal tunggal karena dapat diprediksi dari periode osilasi pegas tertentu. (Periode didasarkan pada rasio antara massa dan kekakuan.) Posisi vertikal lebih sulit. Kami mencoba versi di mana kami menjalankan optimasi numerik agar kurva pegas cocok dengan posisi pegangan, tetapi dengan cepat memberi jalan pada ketidakstabilan. Setelah bereksperimen lebih lanjut, kami menyadari bahwa posisi ini dapat dikaitkan dengan rasio antara redaman dan massa, sesuatu yang disebut “rasio redaman”. Sederhananya, semakin banyak redaman pegas relatif terhadap massanya, semakin rendah pegangannya.

Bereksperimen dengan massa, kekakuan, dan redaman

Melalui prototyping, kami mendapatkan validasi yang kami butuhkan untuk pegangan vertikal. Selain layak secara teknis, itu juga terasa sangat bagus sebagai sebuah tim untuk menemukan solusi itu. Dengan mengurangi jumlah variabel dari tiga (massa, kekakuan, dan redaman) menjadi dua (penyeretan horizontal dan vertikal), kami menciptakan model spasial yang sederhana dan intuitif bagi animator dan desainer untuk berinteraksi dengan kurva secara langsung. Kebetulan sekarang posisi vertikal pegangan mengontrol overshoot, dan posisi horizontal mengontrol kecepatan relatif animasi.

Jadi kami telah menciptakan kontrol yang baik untuk kecepatan dan overshoot, tapi bagaimana caranya panjang animasi harus tetap, yah, animasi? Pada titik ini dalam desain alat, pengguna dapat melihat secara visual seperti apa animasi pegas, tetapi mereka tidak tahu berapa lama animasi ini akan bertahan. Untuk animasi pegas seperti contoh di bawah ini, seorang desainer tidak tahu apakah itu berlangsung selama dua detik atau tujuh detik, yang merupakan rentang yang sangat besar ketika membuat prototipe. Kami memutuskan untuk menambahkan cara untuk melihat dan memperbarui durasi untuk animasi musim semi.

Untuk memberi pengguna lebih banyak kontrol, kami menyertakan pegangan durasi untuk memberi sinyal di mana animasi akan berhenti secara resmi. Itu mungkin tampak sepele, tapi karena kita menggunakan prinsip fisika untuk menggerakkan animasi pegas, “pantulan” animasi terkadang bisa bertahan terlalu lama.

Pegangan animasi musim semi

Dan satu hal lagi: Kami tahu bahwa animator tidak bekerja sendiri, jadi kami juga ingin memastikan bahwa animasi pegas intuitif untuk seluruh tim desain, termasuk pengembang. Untungnya, animasi pegas didukung oleh beberapa API, termasuk gerakan Framer dan pegas reaksi. Faktanya, kami mendapat sedikit inspirasi dari visualizer reaksi-pegas ketika kami awalnya membangun ini di Figma.

Di Figma, kami memungkinkan Anda untuk mengekspor nilai pegas dari panel inspeksi dan menggunakan nilai tersebut sesuai keinginan pengembang Anda. Bagi Anda yang menyerahkan animasi pegas ke tim Anda, kami ingin mencatat bahwa persyaratannya massa, pembasahandan kekakuan digunakan dalam gerakan Framer dan massa, gesekandan ketegangan digunakan dalam reaksi-pegas.

Semua detail ini difokuskan pada satu hal: Memberi desainer dan tim mereka pengalaman paling intuitif, sehingga mereka dapat menciptakan pengalaman intuitif bagi penggunanya.

Cobalah animasi pegas di file taman bermain ini. Jika jenis pekerjaan ini menarik minat Anda, lihat peran terbuka kami—kami merekrut di seluruh produk, desain, teknik, dan lainnya.

Karena cuma mampu bergantung kepada pihak yang sediakan data pengeluaran sdy saja yang sanggup mendapatkan data sgp lengkap. Lantas dengan sulit nya mengakses web togel singapore pools terhadap negara +62. Maka alangkah baiknya berlangganan pada halaman ini untuk mendapatkan information keluaran sgp hari ini live tercepat hanya disini.