آموزش یادگیری انیمیشن های جاوا اسکریپت با GreenSock

معرفی Introduction

• چرا انیمیشن های جاوا اسکریپت؟ Why JavaScript animations?

• کتابخانه GreenSock Animation The GreenSock Animation library

1. مبانی SVG برای انیمیشن 1. SVG Basics for Animation

• اشکال ، مسیرها و دستورات SVG SVG shapes, paths, and commands

• به درستی گروه SVG برای انیمیشن Properly group an SVG for animation

• SVG را صادر و بهینه سازی کنید Export and Optimize an SVG

• چالش: SVG را برای انیمیشن گروه بندی و صادر کنید Challenge: Group and export an SVG for animation

• راه حل: SVG را برای انیمیشن گروه بندی و صادر کنید Solution: Group and export an SVG for animation

2. نحو GreenSock 2. GreenSock Syntax

• بین عنصر DOM با gsap.method () Tween a DOM element with the gsap.method()

• از متد gsap.set () استفاده کنید Use the gsap.set() method

• انیمیشن ها را با Greensock بکشید Stagger animations with GreenSock

• کنترل چندین تویین با gsap.timeline () Control multiple tweens with gsap.timeline()

• افزودن پیش فرض برای پاکسازی انیمیشن های جدول زمانی Adding defaults to clean up timeline animations

• تغییر انیمیشن با سهولت داخلی Change an animation with built-in eases

• چالش: تحریک قهرمان SVG Challenge: Animate the Hero SVG

• راه حل: Animate the Hero SVG Solution: Animate the Hero SVG

3. از افزونه ScrollTrigger استفاده کنید 3. Use the ScrollTrigger Plugin

• افزودن افزونه های GreenSock به پروژه شما Adding GreenSock plugins to your project

• ماشه ای برای انیمیشن پیمایش انتخاب کنید Select a trigger for a scroll animation

• انیمیشن خود را با پارامترهای شروع و پایان کنترل کنید Control your animation with the start and end parameters

• نشانگرها را برای اشکال زدایی انیمیشن پیمایش خود اضافه کنید Add markers to debug your scroll animation

• انیمیشن ها را در نمای اسکراب کنید Scrub animations in view

• چالش: انیمیشن ScrollTrigger را به قسمت About اضافه کنید Challenge: Add ScrollTrigger animation to the About section

• راه حل: انیمیشن ScrollTrigger را به قسمت About اضافه کنید Solution: Add ScrollTrigger animation to the About section

4. ایجاد انیمیشن های پیچیده با یک جدول زمانی اصلی 4. Create Complex Animations with a Main Timeline

• برای انعطاف پذیری توابع قابل استفاده مجدد ایجاد کنید Create reusable functions for flexibility

• تنظیم یک انیمیشن جدول زمانی اصلی Set up a main timeline animation

• موقعیت یابی انیمیشن ها در یک جدول زمانی Positioning animations in a timeline

نتیجه Conclusion

• GreenSock چه کار دیگری می تواند انجام دهد؟ What else can GreenSock do?