Asas Animasi SVG dengan HTML dan CSS

Grafik web perlu tajam pada setiap skrin, tetapi imej statik selalunya kurang penglibatan yang diperlukan untuk antara muka pengguna moden. Animasi SVG menyediakan cara yang ringan dan bebas resolusi untuk menambah personaliti dan gerakan pada tapak web anda tanpa beban fail video yang berat atau pustaka yang kompleks. Kursus ini membimbing anda melalui proses mengambil ilustrasi vektor dan menganimasikannya terus dalam penyemak imbas menggunakan alatan pengekodan yang anda gunakan setiap hari. Anda akan beralih daripada memahami struktur asas kod vektor kepada mencipta laluan gerakan canggih dan elemen interaktif. Menjelang akhir kursus ini, anda akan dapat menghidupkan ikon, ilustrasi dan komponen UI menggunakan teknologi web standard. Apa yang akan anda pelajari: - Memahami struktur dalaman kod SVG dan cara memanipulasi laluan dalam HTML - Mengaplikasikan peralihan CSS dan animasi keyframe pada elemen vektor individu - Menguasai sistem koordinat dan viewbox untuk kawalan gerakan yang tepat - Mengoptimumkan prestasi SVG dengan mempermudahkan laluan dan menguruskan penggambaran semula penyemak imbas - Melaksanakan amalan terbaik kebolehcapaian untuk memastikan animasi inklusif untuk semua pengguna - Mencipta komponen UI interaktif seperti keadaan pemuatan animasi dan kesan hover Kursus ini bermula dengan penerokaan terminologi SVG dan perbezaan asas antara animasi raster dan vektor. Anda kemudian akan meneruskan melalui penjelasan bertulis dan latihan berasaskan kod yang menunjukkan cara menggayakan, mengubah dan menjadualkan animasi anda untuk impak maksimum. Kursus ini direka untuk pemula yang mempunyai pemahaman asas tentang HTML dan CSS. Tiada pengalaman terdahulu dengan SVG atau animasi diperlukan. Mula membina animasi web yang ringan dan berskala hari ini.