Untuk referensi, saya berbicara tentang ruang abu-abu gelap di kiri atas Halaman Masuk Discord, ini dia tangkapan layar:

enter image description here

Saya tahu bahwa efek gumpalan atau "tepi goyah" ini (di sudut kiri atas) dapat dibuat menggunakan elemen kanvas dan kurva bezier kuadrat animasi.

Di aplikasi nextjs saya, saya menggunakan gerakan framer untuk semua animasi saya. Ini hebat, cepat dan mudah digunakan. Jadi bisakah saya menggunakan juga gerakan framer untuk membuat efek gumpalan ini seperti pada halaman login discord atau dapatkah saya membuat animasi seperti itu hanya pada elemen kanvas?

0
Niklas 27 Mei 2021, 17:01

1 menjawab

Jawaban Terbaik

Anda pasti dapat menggunakan gerakan framer untuk ini. Anda ingin menggunakannya untuk menganimasikan SVG untuk menciptakan efek ini, kecuali jika Anda menginginkan beberapa bentuk interaktivitas, maka saya mungkin akan menggunakan kanvas.

Untuk benar-benar menghasilkan blob svg seperti ini untuk dianimasikan, lihat beberapa sumber yang dapat ditemukan di sini: https://css-tricks.com/blobs/

Seperti: https://www.blobmaker.app/

Atau, Anda dapat membuat SVG sendiri dalam sesuatu seperti Illustrator, Affinity Designer, atau sebagian besar aplikasi menggambar vektor lainnya.

0
William Park 27 Mei 2021, 14:35