آموزش انیمیشن های بومی Master React

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

معرفی Introduction

• معرفی Introduction

• چرا باید متحرک سازی کنید Why You Should Animate

• چرا باید متحرک سازی کنید Why You Should Animate

• LayoutAnimation در مقابل انیمیشن LayoutAnimation vs Animated

• LayoutAnimation در مقابل انیمیشن LayoutAnimation vs Animated

معرفی Introduction

• معرفی Introduction

ویژگی های متحرک سازی Animating Properties

• مقدمه Intro

• متحرک پایه و متحرک.تایمینگ Basic Animated and Animated.timing

• متحرک پایه و متحرک.تایمینگ Basic Animated and Animated.timing

• کدورت Opacity

• کدورت Opacity

• توضیح کدورت Opacity Explanation

• توضیح کدورت Opacity Explanation

• موقعیت ترجمه Translate Position

• موقعیت ترجمه Translate Position

• توضیح موقعیت ترجمه Translate Position Explanation

• توضیح موقعیت ترجمه Translate Position Explanation

• مقیاس Scale

• مقیاس Scale

• توضیح مقیاس Scale Explanation

• توضیح مقیاس Scale Explanation

• مقادیر عرض/ارتفاع Width/Height Values

• مقادیر عرض/ارتفاع Width/Height Values

• توضیح مقادیر عرض/ارتفاع Width/Height Values Explanation

• موقعیت مطلق Absolute Position

• توضیح موضع مطلق Absolute Position Explanation

• درون یابی Interpolation

• درون یابی Interpolation

• رنگ/رنگ پس زمینه Color/Background Color

• توضیح رنگ/پس زمینه رنگ Color/Background Color Explanation

• چرخش Rotation

• توضیح چرخش Rotation Explanation

• درصد عرض/ارتفاع Width/Height Percentage

• عرض/ارتفاع توضیح درصد Width/Height Percentage Explanation

• عرض/ارتفاع توضیح درصد Width/Height Percentage Explanation

ویژگی های متحرک سازی Animating Properties

• مقدمه Intro

• توضیح مقادیر عرض/ارتفاع Width/Height Values Explanation

• موقعیت مطلق Absolute Position

• توضیح موضع مطلق Absolute Position Explanation

• رنگ/رنگ پس زمینه Color/Background Color

• توضیح رنگ/پس زمینه رنگ Color/Background Color Explanation

• توضیح چرخش Rotation Explanation

• درصد عرض/ارتفاع Width/Height Percentage

توابع متحرک. ارزش Animated.Value Functions

• توضیح Explanation

• توضیح Explanation

• تسهیل Easing

• تسهیل Easing

• توضیح تسهیل کننده Easing Explanation

• توضیح تسهیل کننده Easing Explanation

توابع متحرک. ارزش Animated.Value Functions

• توضیح Explanation

توابع متحرک Animated Functions

• زمان سنجی Timing

• زمان سنجی Timing

• بهار Spring

• بهار Spring

• توضیح بهار Spring Explanation

• توضیح بهار Spring Explanation

• حلقه Loop

• رویداد Event

• توضیح رویداد Event Explanation

• پوسیدگی Decay

• پوسیدگی Decay

• توضیح پوسیدگی Decay Explanation

• توضیح پوسیدگی Decay Explanation

• ریاضی Math

• ریاضی Math

• اضافه کردن Add

• توضیح اضافه کنید Add Explanation

• تقسیم کنید Divide

• تقسیم توضیح Divide Explanation

• تکثیر کردن Multiply

• ضرب توضیح Multiply Explanation

• ضرب توضیح Multiply Explanation

• ماژول Modulo

• توضیح ماژول Modulo Explanation

• فرمول ها Formulas

توابع متحرک Animated Functions

• حلقه Loop

• رویداد Event

• توضیح رویداد Event Explanation

• اضافه کردن Add

• توضیح اضافه کنید Add Explanation

• تقسیم کنید Divide

• تقسیم توضیح Divide Explanation

• تکثیر کردن Multiply

• ماژول Modulo

• توضیح ماژول Modulo Explanation

• فرمول ها Formulas

ترکیب انیمیشن ها Combining Animations

• مقدمه Intro

• موازی Parallel

• موازی Parallel

• توضیح موازی Parallel Explanation

• توضیح موازی Parallel Explanation

• توالی Sequence

• توضیح توالی Sequence Explanation

• تلو تلو خوردن Stagger

• توضیح استگر Stagger Explanation

• تاخیر انداختن Delay

• تاخیر انداختن Delay

• توضیح تاخیر Delay Explanation

• توضیح تاخیر Delay Explanation

• ترکیب چند انیمیشن ترکیبی Combining Multiple Combined Animations

ترکیب انیمیشن ها Combining Animations

• مقدمه Intro

• توالی Sequence

• توضیح توالی Sequence Explanation

• تلو تلو خوردن Stagger

• توضیح استگر Stagger Explanation

• ترکیب چند انیمیشن ترکیبی Combining Multiple Combined Animations

درون یابی Interpolation

• اعداد و میان یابی ها در میان یابی ها Numbers And Interpolates on Interpolates

• Numbers And Interpolates on Interpolates توضیح Numbers And Interpolates on Interpolates Explanation

• Numbers And Interpolates on Interpolates توضیح Numbers And Interpolates on Interpolates Explanation

• رنگ/رنگ پس زمینه Color/Background Color

• رنگ/رنگ پس زمینه Color/Background Color

• توضیح درون‌یابی رنگ/پس‌زمینه Color/Background Interpolate Explanation

• چرخش Rotation

• چرخش Rotation

• توضیح چرخش Rotation Explanation

• برون یابی کنید Extrapolate

• توضیح برون یابی Extrapolate Explanation

• توضیح برون یابی Extrapolate Explanation

درون یابی Interpolation

• اعداد و میان یابی ها در میان یابی ها Numbers And Interpolates on Interpolates

• توضیح درون‌یابی رنگ/پس‌زمینه Color/Background Interpolate Explanation

• چرخش Rotation

• توضیح چرخش Rotation Explanation

• برون یابی کنید Extrapolate

انیمیشن های بومی Native Animations

• ویدئو Video

• ویدئو Video

• توضیح Explanation

• توضیح Explanation

انیمیشن های بومی Native Animations

• توضیح Explanation

ژست ها و انیمیشن ها Gestures and Animations

• موارد قابل لمس را با PanResponder والدین در React Native نگهداری کنید Maintain Touchable Items with a Parent PanResponder in React Native

ژست ها و انیمیشن ها Gestures and Animations

• موارد قابل لمس را با PanResponder والدین در React Native نگهداری کنید Maintain Touchable Items with a Parent PanResponder in React Native

درک نحوه عملکرد انیمیشن Understanding How Animated Works

• انیمیشن های داخلی Animated Internals

• انیمیشن های داخلی Animated Internals

• createAnimatedComponent createAnimatedComponent

• توضیح ایجاد AnimatedComponent createAnimatedComponent Explanation

• توضیح ایجاد AnimatedComponent createAnimatedComponent Explanation

• استفاده و درک setNativeProps Using and Understanding setNativeProps

• استفاده و درک توضیح setNativeProps Using and Understanding setNativeProps Explanation

• استفاده و درک توضیح setNativeProps Using and Understanding setNativeProps Explanation

• استفاده از d3-interpolate با Animated Using d3-interpolate with Animated

• استفاده از d3-interpolate با توضیح متحرک Using d3-interpolate with Animated Explanation

• استفاده از d3-interpolate با توضیح متحرک Using d3-interpolate with Animated Explanation

• استفاده از d3-interpolate-path و Animated برای متحرک سازی مسیرهای SVG ساده Using d3-interpolate-path and Animated to Animate Simple SVG Paths

• استفاده از d3-interpolate-path و Animated برای متحرک سازی مسیرهای ساده SVG توضیح Using d3-interpolate-path and Animated to Animate Simple SVG Paths Explanation

• استفاده از d3-interpolate-path و Animated برای متحرک سازی مسیرهای ساده SVG توضیح Using d3-interpolate-path and Animated to Animate Simple SVG Paths Explanation

• با استفاده از Art، Morph.Tween و Animated برای متحرک سازی مسیرهای پیچیده SVG Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths

• توضیح استفاده از Art، Morph.Tween و Animated برای متحرک سازی مسیرهای پیچیده SVG Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths Explanation

• استفاده از Flubber و Animated برای شکل‌گیری بهتر مسیر SVG Using Flubber and Animated for Better SVG Path Morphing

• استفاده از Flubber و Animated برای شکل‌گیری بهتر مسیر SVG Using Flubber and Animated for Better SVG Path Morphing

• استفاده از Flubber و Animated برای شکل‌گیری بهتر مسیر SVG Using Flubber and Animated for Better SVG Path Morphing

درک نحوه عملکرد انیمیشن Understanding How Animated Works

• createAnimatedComponent createAnimatedComponent

• استفاده و درک setNativeProps Using and Understanding setNativeProps

• استفاده از d3-interpolate با Animated Using d3-interpolate with Animated

• استفاده از d3-interpolate-path و Animated برای متحرک سازی مسیرهای SVG ساده Using d3-interpolate-path and Animated to Animate Simple SVG Paths

• با استفاده از Art، Morph.Tween و Animated برای متحرک سازی مسیرهای پیچیده SVG Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths

• توضیح استفاده از Art، Morph.Tween و Animated برای متحرک سازی مسیرهای پیچیده SVG Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths Explanation

• استفاده از Flubber و Animated برای شکل‌گیری بهتر مسیر SVG Using Flubber and Animated for Better SVG Path Morphing

تکنیک های متحرک Animated Techniques

• مقدمه Intro

• .99 صخره .99 cliff

• .99 توضیح کلیف .99 Cliff Explanation

• .99 توضیح کلیف .99 Cliff Explanation

• متحرک سازی پنهان Animate Hidden

• توضیح پنهان متحرک Animate Hidden Explanation

• انیمیشن قطع شده Interrupted Animation

• انیمیشن قطع شده Interrupted Animation

• رویدادهای اشاره گر Pointer Events

• رویدادهای اشاره گر Pointer Events

• توضیح رویدادهای اشاره گر Pointer Events Explanation

تکنیک های متحرک Animated Techniques

• مقدمه Intro

• .99 صخره .99 cliff

• متحرک سازی پنهان Animate Hidden

• توضیح پنهان متحرک Animate Hidden Explanation

• توضیح رویدادهای اشاره گر Pointer Events Explanation

دنیای واقعی اولیه Basic Real World

• 4 گوشه شکست 4 Corners Breakdown

• 4 گوشه 4 Corners

• 4 گوشه 4 Corners

• 4 گوشه توضیح 4 Corners Explanation

• 4 گوشه توضیح 4 Corners Explanation

• خرابی سرهای مبهم Staggered Heads Breakdown

• خرابی سرهای مبهم Staggered Heads Breakdown

• سرهای مبهم Staggered Heads

• سرهای مبهم Staggered Heads

• توضیح سرهای مبهم Staggered Heads Explanation

• کارت های بچه گربه تجزیه Kitten Cards Breakdown

• کارت بچه گربه Kitten Cards

• توضیح کارت بچه گربه Kitten Cards Explanation

• توضیح کارت بچه گربه Kitten Cards Explanation

• مشاهده آیتم های فرم Stagger در Mount Breakdown Stagger Form Items Visibility on Mount Breakdown

• مشاهده آیتم های فرم Stagger در Mount Breakdown Stagger Form Items Visibility on Mount Breakdown

• مشاهده آیتم های فرم Stagger در کوه Stagger Form Items Visibility on Mount

• مشاهده آیتم های فرم Stagger در کوه Stagger Form Items Visibility on Mount

• مشاهده آیتم های فرم Stagger در توضیح کوه Stagger Form Items Visibility on Mount Explanation

• مشاهده آیتم های فرم Stagger در توضیح کوه Stagger Form Items Visibility on Mount Explanation

• خرابی دکمه نوار پیشرفت متحرک Animated Progress Bar Button Breakdown

• دکمه نوار پیشرفت متحرک Animated Progress Bar Button

• توضیح نوار پیشرفت متحرک Animated Progress Bar Explanation

• اعلان های پویا متحرک Dynamic Animated Notifications

• پرسشنامه متحرک با شکست نوار پیشرفت Animated Questionnaire with Progress Bar Breakdown

• پرسشنامه متحرک با شکست نوار پیشرفت Animated Questionnaire with Progress Bar Breakdown

• پرسشنامه متحرک با نوار پیشرفت Animated Questionnaire with Progress Bar

• توضیح پرسشنامه متحرک Animated Questionnaire Explanation

• توضیح پرسشنامه متحرک Animated Questionnaire Explanation

دنیای واقعی اولیه Basic Real World

• 4 گوشه شکست 4 Corners Breakdown

• توضیح سرهای مبهم Staggered Heads Explanation

• کارت های بچه گربه تجزیه Kitten Cards Breakdown

• کارت بچه گربه Kitten Cards

• خرابی دکمه نوار پیشرفت متحرک Animated Progress Bar Button Breakdown

• دکمه نوار پیشرفت متحرک Animated Progress Bar Button

• توضیح نوار پیشرفت متحرک Animated Progress Bar Explanation

• اعلان های پویا متحرک Dynamic Animated Notifications

• پرسشنامه متحرک با نوار پیشرفت Animated Questionnaire with Progress Bar

دنیای واقعی پیشرفته Advanced Real World

• تجزیه عنصر مشترک شبکه عکس Photo Grid Shared Element Breakdown

• عنصر اشتراک گذاری شبکه عکس Photo Grid Shared Element

• توضیح عنصر مشترک شبکه عکس Photo Grid Shared Element Explanation

• خرابی انتخابگر رنگ متحرک Animated Color Picker Breakdown

• خرابی انتخابگر رنگ متحرک Animated Color Picker Breakdown

• انتخابگر رنگ متحرک Animated Color Picker

• انتخابگر رنگ متحرک Animated Color Picker

• توضیح انتخابگر رنگ متحرک Animated Color Picker Explanation

• توضیح انتخابگر رنگ متحرک Animated Color Picker Explanation

• دکمه اکشن شناور با تفکیک منو Floating Action Button with Menu Breakdown

• دکمه اکشن شناور با تفکیک منو Floating Action Button with Menu Breakdown

• دکمه اکشن شناور با منو Floating Action Button with Menu

• دکمه اکشن شناور با منو Floating Action Button with Menu

• دکمه اکشن شناور با توضیح منو Floating Action Button with Menu Explanation

• دکمه اکشن شناور با توضیح منو Floating Action Button with Menu Explanation

• تفکیک صفحه نمایش معرفی برنامه Application Intro Screen Breakdown

• صفحه معرفی برنامه Application Intro Screen

• توضیح صفحه معرفی برنامه Application Intro Screen Explanation

• توضیح صفحه معرفی برنامه Application Intro Screen Explanation

• در حال تحول دکمه نوشتن Evolving Write Button Breakdown

• در حال تحول دکمه نوشتن Evolving Write Button Breakdown

• دکمه نوشتن در حال تکامل Evolving Write Button

• دکمه نوشتن در حال تکامل Evolving Write Button

• توضیح دکمه نوشتن در حال تحول Evolving Write Button Explanation

• یک مدال نظر اجتماعی با Swipe Away متحرک ایجاد کنید Create a Social Comment Modal with Animated Swipe Away

• یک مدال نظر اجتماعی با Swipe Away متحرک ایجاد کنید Create a Social Comment Modal with Animated Swipe Away

• یک ScrollView پارالکس افقی ایجاد کنید Create a Horizontal Parallax ScrollView

• برای نمایش قلب های شناور عشق ضربه بزنید Tap to Show Love Floating Hearts

• برای نمایش قلب های شناور عشق ضربه بزنید Tap to Show Love Floating Hearts

• با فشار دادن دکمه مانند قلب جهنده Bouncing Heart Shaped Like Button on Press

• با فشار دادن دکمه مانند قلب جهنده Bouncing Heart Shaped Like Button on Press

• انفجار دکمه قلب Exploding Heart Button

• انفجار دکمه قلب Exploding Heart Button

• گسترش ورودی Notify با پیام موفقیت Expanding Notify Input with Success Message

دنیای واقعی پیشرفته Advanced Real World

• تجزیه عنصر مشترک شبکه عکس Photo Grid Shared Element Breakdown

• عنصر اشتراک گذاری شبکه عکس Photo Grid Shared Element

• توضیح عنصر مشترک شبکه عکس Photo Grid Shared Element Explanation

• تفکیک صفحه نمایش معرفی برنامه Application Intro Screen Breakdown

• صفحه معرفی برنامه Application Intro Screen

• توضیح دکمه نوشتن در حال تحول Evolving Write Button Explanation

• یک ScrollView پارالکس افقی ایجاد کنید Create a Horizontal Parallax ScrollView

• گسترش ورودی Notify با پیام موفقیت Expanding Notify Input with Success Message

پایان یافتن Ending

• پایان End

پایان یافتن Ending

• پایان End