Gunakan alat timeline baru Spline untuk menganimasikan adegan 3D – Beragampengetahuan

Spline adalah alat hebat untuk membuat adegan 3D interaktif dan mudah diintegrasikan ke dalam Web. Untuk membangun interaksi yang mengesankan di sini, Anda tidak perlu mengetahui 3D atau coding, yang merupakan keunggulan utama Spline.

Di Spline, Anda sudah dapat membuat animasi menggunakan peristiwa dan status, namun alat baru baru-baru ini ditambahkan: garis waktu. Ini membantu Anda meningkatkan kualitas animasi Anda ke level berikutnya.

Dalam tutorial ini, kita akan menggunakan contoh sederhana untuk menjelajahi apa itu alat timeline, cara kerjanya (dan perbedaannya dari negara bagian), dan cara mengekspor dan mengintegrasikan animasi akhir di web.

apa itu garis waktu

Timeline adalah alat yang sudah ada hampir sepanjang animasi itu sendiri. Ini digunakan dalam berbagai desain gerak dan program grafis 3D.

Alasannya adalah garis waktu adalah cara yang sangat serbaguna untuk menganimasikan. Hal ini didasarkan hanya pada dua bagian utama:

1. sebuah objek (atau lebih tepatnya, propertinya)
2. bingkai utama

Dengan keyframe, kita melampirkan nilai-nilai tertentu dari properti suatu objek (seperti posisi) pada momen tertentu.

Contoh paling sederhana adalah benda bergerak. Misalkan kita ingin benda bergerak dari kiri ke kanan dalam waktu 1 sekon. Kita tempatkan keyframe pertama di awal dengan objek di sebelah kiri. Kemudian kita atur keyframe kedua pada detik pertama dan pindahkan objek ke titik B. Jadi, untuk keyframe kedua, kita katakan: “Pada saat ini, milik Seharusnya ada ini nilai.“

Itu saja. Bingkai utama ditempatkan pada saat hasil seharusnya muncul. Segala sesuatu yang terjadi di antara keyframe adalah animasi itu sendiri.

Penting: Untuk menganimasikan objek menggunakan timeline, Anda memerlukan setidaknya dua bingkai utama Nilai berbeda dengan properti yang sama.

Garis Waktu dan Status

Bagi Anda yang memiliki objek animasi di Spline pasti tahu bahwa animasi biasanya dilakukan dengan menggunakan negara (dan berbeda Aktivitas sebagai pemicu). Pada pandangan pertama, ini mungkin terlihat serupa: untuk “status” Anda menetapkan properti yang berbeda untuk objek (seperti posisi) dan kemudian menentukan interval waktu antara status tersebut.

Namun perbedaan terbesar antara garis waktu dan status adalah: ketika animasi terjadi antar status, Semua properti berubah secara bersamaan. Jadi jika bola Anda perlu bergerak, mengubah ukuran, dan mengubah warna, ia akan melakukan semuanya sekaligus. Tidak ada cara untuk membuat bola mulai bergerak terlebih dahulu, lalu mengubah ukurannya di tengah animasi, dan akhirnya berubah warna.

Di sinilah garis waktu berperan – karena dengan garis waktu, semua properti ini dapat berubah secara independen dan dengan kecepatan berbeda, dibandingkan bergantung satu sama lain.

Keuntungan besar kedua dari garis waktu adalah lebih nyaman ketika Anda perlu menganimasikan banyak objek dalam sebuah adegan.

Sumbu waktu dalam splines

Sekarang, mari buat animasi sederhana di Spline menggunakan Timeline dan lihat cara kerjanya. Kami akan membuat animasi klasik yang sering digunakan untuk mempelajari dasar-dasar animasi – bola yang memantul.

Pada akhirnya, Anda akan mendapatkan animasi seperti ini:

Jika Anda perhatikan lebih dekat, Anda akan melihat bahwa itu bukan hanya bola yang memantul—tetapi juga berubah bentuk setiap kali menyentuh lantai. Membuat animasi stateful seperti itu dapat menimbulkan masalah dan kurang fleksibel.

Untuk menghemat waktu, saya menyiapkan file spline yang berisi objek awal. Cukup klik tautan ini dan salin adegan ini: Tautan ke adegan spline

Langkah 1: Aktifkan garis waktu

Aktifkan mode garis waktu. Untuk melakukan ini, aktifkan tombol di toolbar atas. Setelah Anda mengaktifkan timeline, Anda akan melihat panel besar muncul di bagian bawah.

Penting untuk dipahami bahwa garis waktu adalah mode khusus. Saat aktif, sebagian besar perubahan yang Anda buat akan tetap berada dalam mode ini. Jadi saran saya adalah: jika ingin melakukan perubahan pada objek atau adegan yang tidak boleh dianimasikan, matikan timeline. Misalnya mengedit material suatu objek.

Pada saat yang sama, salah satu hal hebat tentang garis waktu adalah Anda dapat melihat animasi langsung di area pandang dan membuat perubahan saat diputar.

Langkah 2: Terapkan animasi

Pilih kami bola objek, lalu cari tombol di panel Timeline di bagian bawah +animasi
Saat Anda ingin menganimasikan objek menggunakan Timeline, pilih objek terlebih dahulu lalu pilih properti yang akan dianimasikan dari daftar. Hampir semua objek memiliki kumpulan properti yang sama – posisi, rotasi, skala, material, dll. Ada beberapa opsi tambahan untuk jalur 3D, kamera, dan kloner.

Dalam kasus kita, kita ingin membuat objek “memantul ke atas dan ke bawah”, jadi kita akan memilih untuk menganimasikan posisinya.

Langkah 3: Pengaturan

Mari kita lihat lebih dekat jendela Timeline dan komponennya.

Di sebelah kiri kita melihat daftar garis waktu 1 – Di sini Anda dapat membuat beberapa versi animasi menggunakan adegan yang sama. Garis waktu dapat dibuat, dihapus, dan diganti namanya.

Jendela lainnya adalah garis waktu sebenarnya. Ini memiliki:

• ini skala waktu ²
• ini playhead ³ (Jelajahi timeline Anda dengan cepat)
• ini Pelacakan properti ⁴ (dalam kasus kami, lokasi)
• ini Daftar properti ⁵ (Ini bisa berupa beberapa properti dari satu objek, atau beberapa objek sekaligus)
• dan beberapa kontrol:
  • Bermain ⁶ (Pratinjau animasi, tidak sama dengan tombol “Mainkan” di toolbar atas)
  • S ⁷ – Panjang garis waktu (defaultnya adalah 5 detik)
  • ini cincin Switch⁸ (memutar animasi terus menerus)
  • ini editor grafis Toggle⁹ (kita akan membicarakannya nanti)

Selain itu, Anda dapat mengatur ukuran jendela garis waktu, menjadikannya lebih kecil atau lebih besar.

Saat kita menambahkan animasi posisi pada bola, kita mendapatkan “bilah” biru. Di awal dan akhir kolom ini ada bingkai utama. Tujuan kami sekarang adalah menguasai bola di tiga posisi: bawah (di lantai), atas, dan lagi di bawah.

Artinya kita membutuhkan 3 keyframe.

Pilih keyframe pertama dan pastikan semua nilai di bidang Posisi diatur ke 0.

Pindahkan playhead ke tengah bilah (0,5 detik pada penggaris). Pada titik ini, bola harus berada di atas. Jadi kita perlu memberitahu Spline di mana seharusnya. Anda dapat menggerakkan bola secara manual atau cukup memasukkan nilainya 0, 150, 0 di bidang lokasi. Setelah properti diubah, bingkai utama baru akan muncul.

Kemudian, pilih keyframe terakhir dan pastikan semua nilai disetel ke 0.

Klik pada ketiga bingkai utama untuk memastikan semua nilai disetel dengan benar; terkadang Anda mungkin melewatkan menekan Enter.

Ingat, ketiga kolom input ini Lokasi Sifat-sifatnya adalah koordinat X, Y, dan Z benda tersebut. Nilai tersebut cocok dengan nilai yang Anda lihat di panel properti di sebelah kanan. Sekarang kita pindahkan objeknya ke atas (sesuai sumbu Y).

Jika Anda mengatur durasi timeline menjadi 1 detik dan menyalakan Loop, lalu menekan Play (atau hanya spasi), bola akan memantul tanpa henti.

Langkah 4: Editor Bagan

Bola yang hanya bergerak ke atas dan ke bawah tidak terlihat memantul. Kita perlu menambahkan realisme, dan realisme ini berasal dari fakta bahwa ketika bola memantul, ia bergerak dengan kecepatan berbeda pada momen berbeda. Untuk mengontrol kecepatan ini kita perlu editor grafis.

Alihkan garis waktu ke mode editor grafik dan Anda akan melihat grafik.

Jika area grafis tampak terlalu kecil untuk dikerjakan, Anda dapat memperbesar area tersebut. Jika Anda menggunakan laptop, coba gerakan mencubit, atau gunakan cmd (Ctrl) + gulir ke atas/bawah dengan mouse Anda.

Tidak ada yang rumit di sini. Yang kita lihat hanyalah grafik bagaimana nilai properti berubah seiring waktu. Dalam contoh kita, posisi Y (kurva hijau) bergerak mulus dari awal ke tengah dan dari tengah ke akhir. Artinya bola kita naik dengan mulus, lalu perlahan berhenti di atas, lalu dengan mulus berakselerasi ke bawah, dan akhirnya berhenti perlahan di bawah.

Namun dalam kehidupan nyata, saat bola menyentuh tanah, tiba-tiba bola melambat akibat benturan dan kemudian dengan cepat berakselerasi ke atas. Kita perlu menunjukkan hal ini pada grafik dengan menyesuaikan pegangan kurva (mirip dengan menggunakan Pen Tool untuk menggambar kurva).

Setiap titik dalam diagram ini mewakili bingkai utama, jadi secara teknis Anda dapat menyempurnakan animasi secara lebih akurat dengan menggerakkan titik dan menyesuaikan kurva.

Pada akhirnya, kurvanya akan terlihat serupa dengan yang terlihat di video.

Langkah Lima: Sentuhan Terakhir

Bola kita sekarang memantul lebih realistis, namun untuk hasil yang sempurna bola juga harus berubah bentuk saat terkena benturan (terjepit). Untuk ini kita perlu menambahkan properti animasi lain ke timeline – skala.

Jika Anda masih dalam mode ini, tutup editor grafis. Pastikan bola dipilih. menurut animasi dan pilih skala.

Anda akan segera melihat trek baru untuk nilai skala. Pada keyframe pertama, nilai-nilai ini adalah 1, 1, 1. Namun karena animasi kita sebenarnya dimulai pada saat bola sudah memantul dari tanah, maka animasi tersebut harus dihentikan pada saat ini. Jadi kami menetapkan nilainya menjadi 1, 0.7, 1.

Kini bolanya terlihat tergencet. Kami juga ingin memastikan bahwa ketika animasi berakhir, animasinya kembali ke bentuk normal. Jadi pada keyframe kedua, atur kembali nilai skalanya 1, 1, 1.
Lalu, pindahkan keframe ini ke 0,5 detik.

Itu saja, sekarang bola akan memantul dan berubah bentuk saat menyentuh tanah. Cobalah bereksperimen dengan properti Skala pada bagan – mengubahnya akan menunjukkan kepada Anda perbedaan tampilan animasi.

Keuntungan lain dari timeline adalah kecepatan animasi secara keseluruhan. Misalnya, jika kita tidak suka bola memantul terlalu cepat dan ingin menampilkannya dalam gerakan lambat, kita cukup meregangkan bilah animasi utama untuk menambah (atau mengurangi) durasinya. Dengan cara ini, semua bingkai utama berskala merata di sepanjang garis waktu.

Pratinjau dan ekspor

Selain tombol Putar di timeline, ada juga tombol Putar di toolbar atas untuk melihat pratinjau keseluruhan adegan. Namun jika Anda mengekliknya pada awalnya, tidak akan terjadi apa-apa – itu karena Anda perlu membuat peristiwa Ini akan memicu animasi timeline.

Misalnya, saat memilih objek bola, buatlah a awal acara dan pilih dalam daftar tindakan animasi garis waktu. Jangan lupa untuk mengaturnya cincin Parameternya adalah tak terbatas Jika Anda ingin animasi diputar tanpa gangguan.

Ada juga berbagai cara untuk mengekspor animasi ini.

Jika Anda ingin mengintegrasikan animasi ke dalam situs web Anda, pertama-tama putuskan bagaimana animasi tersebut akan dimulai: secara otomatis, saat mengarahkan kursor ke atas bola, atau saat diklik. Pastikan untuk mengaturnya peristiwa Ini akan memicu timeline. Dalam kasus kami ini disetel ke “Mulai”. Setelah itu, buka saja jendela ekspor dan pilih metode integrasi yang paling sesuai untuk Anda. Setelah Anda selesai melakukan beberapa pengeditan, jangan lupa untuk menekan tombol “Perbarui…”.

☝️ Ingatlah bahwa platform yang berbeda (seperti Framer, Wix, Webflow, dll.) mungkin memerlukan versi kode semat yang berbeda. Anda dapat mengetahui apa yang berlaku pada dokumentasi spline.

Jika Anda ingin menyimpannya sebagai video saya sarankan menggunakan video tab di jendela ekspor. Anda dapat memilih linimasa Anda di sini, dan durasi video Anda akan sesuai dengan durasi linimasa Anda (walaupun Anda dapat memperpanjangnya jika diinginkan). Ini sangat berguna jika Anda ingin membuat loop yang mulus.

Coba tambahkan lebih banyak properti ke timeline – coba animasi rotasi, atau bahkan tambahkan kamera dan animasikan posisinya. Bereksperimenlah dengan berbagai gaya dan warna dan Anda mungkin menemukan sesuatu yang tidak terduga.

Alternatifnya, Anda dapat melihat proyek akhir saya dan menjelajahi objek dan properti lain yang saya animasikan menggunakan timeline

Saya ingin melihat pendapat Anda – jadi silakan bagikan hasil Anda sendiri! Ingat: semakin banyak Anda berlatih, garis waktu Anda (dan animasi secara umum) akan semakin terasa alami.

Jika Anda menyukai tutorial ini dan ingin mempelajari lebih lanjut tentang dasar-dasar Spline dan Web3D, Anda dapat melihat tutorial saya Kursus Desain Spline. Sebagai bonus kecil Anda dapat menggunakan kode promo “codrop” Dapatkan diskon 50%.