دوره آموزشی یادگیری انیمیشن های جاوا اسکریپت با GreenSock
⏱️ 1 ساعت 46 دقیقه📈 مبتدی📅 2021-10-14
مدرسین
Christina Gorton
Web Development Instructor and Front-End Developer
جزئیات دوره
اگر در حال ایجاد انیمیشن برای وب هستید، احتمالاً خوب است که حداقل کمی با GreenSock آشنا باشید. کتابخانه متحرک گرینسوک جاوا اسکریپت ابزارها و کنترل های متنوعی را برای ایجاد انیمیشن در وب ارائه می دهد. در حالی که انیمیشن های CSS به شما امکان می دهند تغییرات ساده ای انجام دهید و وضعیت عناصر رابط کاربری را در یک برنامه تغییر دهید، با جاوا اسکریپت می توانید انیمیشن های پیچیده و جلوه های پیشرفته ایجاد کنید، زمان انیمیشن ها را کنترل کنید و زمان بروز انیمیشن ها را کنترل کنید. در این دوره، کریستینا گورتون کار انیمیشن های جاوا اسکریپت را آغاز می کند، نحوه کار با SVG ها، تحریک آنها با GreenSock و ایجاد یک صفحه نمونه کارها با انیمیشن های جاوا اسکریپت را در اسکرول به شما نشان می دهد.
مهارت ها
GreensockSVGW3CWeb GraphicsJavaScriptWeb DesignOracleLearningProgramming LanguagesOpen SourceSoftware Development
سرفصل ها
0. مقدمه
- 01 - چرا انیمیشنهای جاوا اسکریپت
- 02 - کتابخانه GreenSock Animation
1. مبانی SVG برای انیمیشن
- 03 - اشکال، مسیرها و دستورات SVG
- 04 - یک SVG را برای انیمیشن به درستی گروه بندی کنید
- 05 - یک SVG را صادر و بهینه کنید
- 06 - چالش - یک SVG را برای انیمیشن گروه بندی و صادر کنید
- 07 - راه حل - یک SVG را برای انیمیشن گروه بندی و صادر کنید
2. نحو GreenSock
- 08 - یک عنصر DOM را با gsap.method() توئین کنید
- 09 - از متد gsap.set() استفاده کنید
- 10 - انیمیشنهای تلو تلو خوردن با GreenSock
- 11 - چند tween را با gsap.timeline() کنترل کنید
- 12 - اضافه کردن پیشفرضها برای پاک کردن انیمیشنهای تایم لاین
- 13 - یک انیمیشن را با سهولتهای داخلی تغییر دهید
- 14 - چالش - SVG قهرمان را متحرک کنید
- 15 - راه حل - SVG قهرمان را متحرک کنید
3. از پلاگین ScrollTrigger استفاده کنید
- 16 - اضافه کردن پلاگینهای GreenSock به پروژه شما
- 17 - یک ماشه برای انیمیشن اسکرول انتخاب کنید
- 18 - انیمیشن خود را با پارامترهای شروع و پایان کنترل کنید
- 19 - برای رفع اشکال انیمیشن اسکرول خود، نشانگرها را اضافه کنید
- 20 - انیمیشنها را در نمای اسکراب کنید
- 21 - چالش - انیمیشن ScrollTrigger را به قسمت About اضافه کنید
- 22 - راه حل - انیمیشن ScrollTrigger را به قسمت About اضافه کنید
4. انیمیشنهای پیچیده با یک جدول زمانی اصلی ایجاد کنید
- 23 - ایجاد توابع قابل استفاده مجدد برای انعطاف پذیری
- 24 - یک انیمیشن خط زمانی اصلی تنظیم کنید
- 25 - قرار دادن انیمیشنها در یک جدول زمانی
نتیجه
- 26 - GreenSock چه کارهای دیگری میتواند انجام دهد
مشاهده دوره کامل
رفتن به دوره