آموزش انیمیشن SVG را یاد بگیرید - با HTML، CSS و جاوا اسکریپت

Learn SVG Animation - With HTML, CSS & Javascript

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: بیاموزید که چگونه این انیمیشن های قدرتمند با استفاده از HTML، CSS و جاوا اسکریپت ایجاد می شوند. بهینه سازی فایل های SVG برای استفاده آنلاین انیمیشن های اولیه در ابزار آنلاین Codepen استفاده از جاوا اسکریپت برای محاسبه طول مسیر SVG ایجاد SVGهایی که از ماسک ها و گرادیان ها استفاده می کنند. ویرایشگر متن دانلود شده در رایانه آنها e.d Atom.io، Sublime Text اگر یک برنامه گرافیک برداری مانند Adobe illustrator دارید، می توانید آن را دنبال کنید، اما لازم نیست. تمامی فایل های svg ارائه شده است. تجربه نوشتن کد CSS و استایل با استفاده از کلاس ها را داشته باشید

به دنبال بهبود پروژه توسعه وب بعدی خود هستید؟ یا یکی از بهترین مهارت های انیمیشن سازی را بیاموزید؟

در عرض دو ساعت، شش پروژه SVG را ایجاد خواهید کرد که به تعدادی از تکنیک‌های مختلف انیمیشن نگاه می‌کنند. استفاده از انیمیشن در رابط کاربری یک وب سایت در حال حاضر یک تمرین استاندارد است. این دوره سریع و مؤثر، استفاده از روش‌های جدیدی را برای بهبود پروژه‌های مشتری‌تان معرفی می‌کند.

همه فایل‌های SVG ارائه شده‌اند، اما ما با ایجاد فایل‌های SVG در Adobe Illustrator (یا مشابه) نیز کار می‌کنیم. دروس با اسکرین‌کست‌های ویدیویی آموزش داده می‌شوند که با جزئیات توضیح داده می‌شوند، زیرا ما روی پروژه‌های واقعی ایجاد شده مستقیماً برای این دوره کار می‌کنیم.

پروژه ها شامل

می شوند

- متحرک کردن لوگوها

- متحرک کردن نمادهای اجتماعی

- متن طراحی دستی

- ویژگی های انیمیشن CSS توضیح داده شده

- استفاده از گرادیان بر روی متن و نمادها (کراس مرورگر)

- استفاده از ماسک‌ها

- با استفاده از CodePen

- مقدمه‌ای بر بهینه‌سازی آنلاین SVG

برای یک مبتدی کامل به SVG، توصیه می‌کنیم دوره دیگر خود را در این مجموعه بگذرانید.



سرفصل ها و درس ها

به دوره خوش آمدید Welcome To The Course

  • معرفی و رئوس مطالب دوره Course Introduction & Outline

تنظیم گردش کار و ابزار برای پروژه دوره Workflow setup and tools for course project

  • یک SVG ایجاد کنید و به کد دسترسی پیدا کنید Create an SVG and access the code

  • کد را با OMGSVG بهینه کنید Optimise Code with OMGSVG

  • شروع یک پروژه جدید در Codepen.io Starting a New Project on Codepen.io

پروژه SVG - متحرک کردن یک لوگو SVG Project - Animating a Logo

  • مقدمه ای بر پروژه Introduction to Project

  • ترسیم SVG Drawing The SVG

  • ایجاد انیمیشن های خطی Create Line Animations

  • محاسبه خط جاوا اسکریپت Javascript Line Calculation

  • انیمیشن های نهایی را اضافه کنید Add Final Animations

ویژگی های انیمیشن Animation Properties

  • انیمیشن میمون Monkey Animation

  • انیمیشن های CSS - FROM/TO - با استفاده از درصدها CSS Animations - FROM/TO - Using Percentages

  • مسیرهای انیمیشن خطی Line Animation Directions

پروژه انیمیشن متن ترسیم شده با دست Hand Drawn Text Animation Project

  • متن SVG ایجاد کنید Create SVG Text

  • جلوه نوشتن متن را متحرک کنید Animate Text Writing Effect

پروژه نمادهای اجتماعی Social Icons Project

  • معرفی پروژه Project Introduction

  • انیمیشن توییتر Twitter Animation

  • انیمیشن یوتیوب Youtube Animation

  • انیمیشن فیس بوک Facebook Animation

پوشش و گرادیان Masking & Gradients

  • پروژه گرادیان Gradient Project

  • استفاده از Texture's Using Texture's

  • تکنیک ماسکینگ پیشرفته Advanced Masking Technique

دوره بسته Course Close

  • تبریک و تشکر Congratulations & Thank You

نمایش نظرات

آموزش انیمیشن SVG را یاد بگیرید - با HTML، CSS و جاوا اسکریپت
جزییات دوره
1.5 hours
22
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
19,005
4.5 از 5
دارد
دارد
دارد
code withsam
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

code withsam code withsam

کدنویسی خود را ارتقا دهید