دوره آموزشی یادگیری انیمیشن های جاوا اسکریپت با 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
سرفصل ها
مقدمه
- چرا انیمیشنهای جاوا اسکریپت
- کتابخانه GreenSock Animation
مبانی SVG برای انیمیشن
- اشکال، مسیرها و دستورات SVG
- یک SVG را برای انیمیشن به درستی گروه بندی کنید
- یک SVG را صادر و بهینه کنید
- چالش - یک SVG را برای انیمیشن گروه بندی و صادر کنید
- راه حل - یک SVG را برای انیمیشن گروه بندی و صادر کنید
نحو GreenSock
- یک عنصر DOM را با gsap.method() توئین کنید
- از متد gsap.set() استفاده کنید
- انیمیشنهای تلو تلو خوردن با GreenSock
- چند tween را با gsap.timeline() کنترل کنید
- اضافه کردن پیشفرضها برای پاک کردن انیمیشنهای تایم لاین
- یک انیمیشن را با سهولتهای داخلی تغییر دهید
- چالش - SVG قهرمان را متحرک کنید
- راه حل - SVG قهرمان را متحرک کنید
از پلاگین ScrollTrigger استفاده کنید
- اضافه کردن پلاگینهای GreenSock به پروژه شما
- یک ماشه برای انیمیشن اسکرول انتخاب کنید
- انیمیشن خود را با پارامترهای شروع و پایان کنترل کنید
- برای رفع اشکال انیمیشن اسکرول خود، نشانگرها را اضافه کنید
- انیمیشنها را در نمای اسکراب کنید
- چالش - انیمیشن ScrollTrigger را به قسمت About اضافه کنید
- راه حل - انیمیشن ScrollTrigger را به قسمت About اضافه کنید
انیمیشنهای پیچیده با یک جدول زمانی اصلی ایجاد کنید
- ایجاد توابع قابل استفاده مجدد برای انعطاف پذیری
- یک انیمیشن خط زمانی اصلی تنظیم کنید
- قرار دادن انیمیشنها در یک جدول زمانی
نتیجه
- GreenSock چه کارهای دیگری میتواند انجام دهد