آموزش انیمیشن‌های SwiftUI در iOS 18 - تبدیل کد به حرکت و جانی تازه - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• شروع کار Getting Started

مفاهیم پایه Basics

• انیمیشن‌ها با استفاده از withAnimation و اصلاح‌کننده Animation Animations using withAnimation and the Animation Modifier

• متحرک‌سازی همه چیز: تنظیم View Animate Everything - Setting up the View

• متحرک‌سازی همه چیز: افزودن انیمیشن‌ها Animating Everything - Adding the Animations

• مرور انواع انیمیشن Overview of Animation Types

• انیمیشن‌های پیش‌فرض بیشتر More Default Animations

• انیمیشن‌های Cubic Bezier با استفاده از منحنی‌های زمان‌بندی Cubic Bezier Animations using Timing Curves

• انیمیشن‌های سفارشی Ease Custom Ease Animations

• انیمیشن‌های فنری (Spring) و فنری درون‌یاب Spring and Interpolating Spring Animations

• نمایش ConcentricCirclesEffectView ConcentricCirclesEffectView

• نمایش AnimatedBackgroundView AnimatedBackgroundView

• گل چرخان: نمایش دایره گرادینت Rotating Flower - Gradient Circle View

• گل چرخان: جفت دایره‌ها Rotating Flower - Circle Pair

• نمایش گل چرخان Rotating Flower View

تمرین انتخاب‌کننده شخص Person Picker Exercise

• شروع تمرین انتخاب‌کننده شخص متحرک Getting Started with the Animated Person Picker Exercise

• دانلود تصاویر از Flaticons Download the Images from Flaticons

• نمایش شخص ماسک‌شده Masked Person View

• پیاده‌سازی View انتخاب‌کننده شخص Implementation of Person Picker View

کاوش در فایل‌های SVG و انیمیشن‌ها An Excursion into SVG Files and Animations

• تبدیل SVG به Path SVG to Path

• نمایش Generic Draw Path Generic Draw Path View

چالش مثلث‌های بنفش چرخان Rotating Purple Triangles Challenge

• مقدمه‌ای بر چالش Introduction to Challenge

• ایجاد مثلث‌ها Creating the Triangles

• بازنویسی (Refactoring) مثلث‌ها Refactoring the Triangles

• نمایش مثلث سه‌گانه Triple Triangle View

• پیاده‌سازی انیمیشن‌ها Implementing the Animations

دینامیک‌های Mesh Gradient و ترکیب بافت Mesh Gradient Dynamics and Texture Blending

• ایجاد یک Mesh Gradient متحرک Creating an Animated Mesh Gradient

• ترکیب بافت (Texture Blending) Blending in a Texture

انیمیشن‌های Completion Callback Completion Callback Animations

• آیکون همبرگری: مستطیل Offset Hamburger Icon - Offset Rectangle

• آیکون همبرگری با استفاده از انیمیشن‌های Completion Hamburger Icon using Animation Completions

• نمایش تکمیل گرادینت شعاعی - بخش اول Radial Gradient Completion Demo - Part 1

• نمایش تکمیل گرادینت شعاعی - بخش دوم (انیمیشن‌ها) Radial Gradient Completion Demo - Part 2 - Animations

چالش تکمیل انیمیشن صفحه Splash Screen Splash Screen Animation Completion Challenge

• مقدمه‌ای بر چالش Splash Screen Introduction to the Splash Screen Challenge

• تنظیم پروژه و پارامترهای View Setting up the Project and View Parameters

• لوگو The Logo

• متن The Text

• ایجاد انیمیشن‌ها Creating the Animations

• تنظیمات دقیق انیمیشن‌ها Tweaking the Animations

• سفارشی‌سازی رنگ‌ها Customizing the Colors

مسیرها و انیمیشن‌ها Paths and Animations

• نمایش Pacman Pacman View

• ستاره‌های زمستانی: درخشش و تنظیم پس‌زمینه Winter Stars - The Glow and Setting up the Background

• ستاره‌های زمستانی: تنظیم y Offset ستاره Winter Stars - Setting the Star y-Offset

• ستاره‌های زمستانی: چرخش و تولید ستاره‌ها Winter Stars - Rotate and Spawn Stars

• ستاره‌های زمستانی: حذف ستاره‌ها Winter Stars - Removing Stars

• ستاره‌های زمستانی: ایجاد شکل ستاره Winter Stars - Creating the Star Shape

• بیایید یک حباب گفتار بسازیم! Let's Create a Speech Bubble!

• پیاده‌سازی حباب گفتار Implementing the Speech Bubble

بررسی انتقال‌ها (Transitions) در SwiftUI با AnyTransition Exploring Transitions in SwiftUI with AnyTransition

• مقدمه‌ای بر انتقال‌ها (Transitions) Introduction to Transitions

• گروه افشای کشویی سفارشی Custom Sliding Disclosure Group

چالش‌های انیمیشن Animation Challenges

• چالش انیمیشن "اشتباه بزرگ" "Big Mistake" Animation Challenge

• اشتباه بزرگ: انتخاب رویکرد Big Mistake - Choosing an Approach

• اشتباه بزرگ: تکمیل راه حل Big Mistake - Completing the Solution

جان بخشیدن به ماسک‌ها با استفاده از تایمرها Bringing Masks to Life with Timers

• مقدمه Introduction

• ایجاد متن رنگی Creating the Colorful Text

• ایجاد متن ماسک‌شده Creating the Masked Text

• ماسک و فازهای ماسک The Mask and Mask Phases

• افزودن تایمر و انیمیشن‌ها Adding the Timer and Animations

• متحرک‌سازی رنگ پس‌زمینه Animating the Background Color

• سفارشی‌سازی نمایش ماسک‌گذاری Customizing the Masking Demo

فاز انیماتورها (Phase Animators) Phase Animators

• شروع کار با Phase Animators: مربع قرمز و آبی Getting Started with Phase Animators: The Red and Blue Square

• توالی‌های CGPoints و فاز انیماتورها Sequences of CGPoints and Phase Animators

• انیمیشن‌های فازی پیچیده Complex Phase Animations

• شکل خط سمت چپ Left Line Shape

• اصلاح‌کننده متن سفارشی Custom Text Modifier

• انیمیشن فازی پیچیده: متحرک‌سازی همه چیز Complex Phase Animation - Animating Everything

• انیمیشن فازی پیچیده: OffsetX Complex Phase Animation - OffsetX

• انیمیشن فازی پیچیده: تکمیل انیمیشن Complex Phase Animation - Completing the Animation

• انیمیشن‌های فریم کلیدی (Key Frame) Key Frame Animations

شکل Blob The Blob

• مقدمه‌ای بر Splash Screen با حالت Blob Introduction to Blob Splash Screen

• ایجاد Blob Creating the Blob

• نمایش SplashScreenView SplashScreenView

• ایجاد انیمیشن‌ها با استفاده از Phase Animator Creating Animations using Phase Animator

• ایجاد View اصلی Creating the Main View

پیاده‌سازی طراحی انیمیشن لوگوی Splash Screen با استفاده از Phase Animators Implementing a Splash Screen Logo Animation Design using Phase Animators

• ارائه چالش Presenting the Challenge

• ایجاد مدل فازی لوگو Creating the Logo Phase Model

• دانلود و تست آیکون برگ Downloading and Testing the Leaf Icon

• نمایش فازهای لوگو - بخش اول Logo Phases View - Part 1

• نمایش فازهای لوگو - بخش دوم Logo Phases View - Part 2

• نمایش متن درصد The Percentage Text View

• تعریف Enum مدل فازهای لوگو Defining the Enum Logo Model Phases

• نمایش MainLogoView با استفاده از Phase Animator The MainLogoView using Phase Animator

• پیاده‌سازی انیمیشن‌های فازی Implementing the Phase Animations

انیمیشن‌ها با استفاده از SpriteKit و Particle Emitters Animations using SpriteKit and Particle Emitters

• مقدمه‌ای بر کاوش انیمیشن‌ها با SpriteKit و Particle Emitters Introduction to Exploring Animations with SpriteKit and Particle Emitters

• متن با شکل پس‌زمینه Text with Background Shape

• ایجاد Particle Emitter Creating the Particle Emitter

• نمایش متن اسپرایت متحرک Animated Sprite Text View

• اسپرایت‌های چپ و راست Left and Right Sprites

• ایجاد انیمیشن‌ها Creating the Animations

انیمیشن‌های Metal Metal Animations

• امضای شیدر (Shader Signature) و قطعه کدهای مفید Shader Signature and Useful Snippets

• پارامترهای سفارشی Custom Parameters

• استفاده از Timeline و یافتن مرکز Using the Timeline and Finding One's Center

• شیدر شگفت‌انگیز Amazing Shader

• تنظیم پارامترهای شیدر Setting up the Shader Parameters

• پیاده‌سازی شیدر الهام‌بخش Implementing the Inspirational Shader