از Pista Academy حمایت کنید
خلاصه آموزشی
مرور سریع مفاهیم اصلی پیش از تماشای کامل یا برای جمعبندی بعد از آموزش.
در جلسه 65 آموزش فلاتر، مدرس به بررسی انیمیشن در این فریمورک میپردازد. به جای استفاده از پدینگ برای ایجاد تغییرات، از اسلاید ترنزیشن استفاده میشود که به وسیلهٔ انیمیت، حرکت ویجت را به صورت نرم و راحت انجام میدهد. همچنین، نحوه استفاده از انیمیشن کنترولر و اتصال آن به خطکش برای ایجاد حرکت مورد توجه قرار میگیرد.
نکات کلیدی
اسلايد ترنزیشن به جای پدینگ برای ایجاد انیمیشن استفاده میشود.
انیمیت به حرکت ویجت نرم و راحت کمک میکند و به کنترولر انیمیشن متصل است.
انیمیشن کنترولر با خطکش اتصال داده میشود تا حرکت مورد نظر ایجاد شود.
پرسشهای رایج
پاسخ کوتاه و مستقیم به پرسشهایی که معمولاً هنگام یادگیری این موضوع مطرح میشوند.
اسلايد ترنزیشن به جای پدینگ برای ایجاد انیمیشن استفاده میشود و به حرکت ویجت نرم و راحت کمک میکند.
انیمیت به حرکت ویجت نرم و راحت کمک میکند و به کنترولر انیمیشن متصل است.
انیمیشن کنترولر با خطکش اتصال داده میشود تا حرکت مورد نظر ایجاد شود.
آخرین بهروزرسانی محتوای متنی:
در این دوره جامع و پروژهمحور با فلاتر و دارت از صفر تا صد آشنا میشوید و با ساخت هشت اپلیکیشن واقعی که هر کدام نکات کلیدی و پرکاربرد فلاتر را پوشش میدهد، مهارتهای خود را به سطح بعدی میبرید. آنچه در این دوره یاد میگیرید: مقدمه و نصب ابزارها: آشنایی با فلاتر، دارت و راهاندازی محیط توسعه مبانی دارت و فلاتر: یادگیری سینتکس دارت و ساخت ویجتهای پایه با اپ «تاسانداز (Roll Dice)» غوطهوری در فلاتر: پیادهسازی اپ «کوئیز (Quiz)» برای مسلط شدن بر ساختار و چرخه حیات ویجتها دیباگ و رفع اشکال: تکنیکهای عیبیابی و ابزارهای Flutter DevTools واکنشگرایی و تمینگ: ساخت «Expense Tracker» برای یادگیری ویجتهای تعاملی، موضوعبندی (Theming) و طراحی ریسپانسیو مدیریت وضعیت (State Management): از Provider تا روشهای داخلی دارت با اپ «TODO» و «Meals» مسیریابی بین صفحات: ناوبری پیشرفته با «Meals App» و انتقال داده بین صفحات انیمیشنها و جلوههای بصری: افزودن حرکات پویا و تراکیب انیمیشنی در «Meals App» فرمها و ورودی کاربر: دریافت و اعتبارسنجی اطلاعات با «Shopping List» ارتباط با سرور: ارسال و دریافت HTTP، کار با JSON و REST API در «Shopping List» دسترسی به امکانات بومی دستگاه: استفاده از دوربین و ذخیرهسازی در «Favorite Places» فراخوانی پوش نوتیفیکیشن و چت زنده: ترکیب فلاتر با Firebase برای ساخت اپ چت با اعلان لحظهای بهروزرسانیها و چشمانداز آینده: نکات پایانی، منابع پیشرفته و مسیر یادگیری ادامهدار چرا این دوره؟ پروژهمحور و گامبهگام، مناسب برای تازهکارها و افراد با تجربه متوسط پوشش تمام جنبههای کلیدی: از طراحی رابط کاربری و انیمیشن تا اتصال به سرور و مدیریت وضعیت پیادهسازی چندین اپلیکیشن واقعی که میتوانید به سادگی برای نمونهکار شخصی یا پروژههای شغلی استفاده کنید لینک گیت هاب دوره جهت دسترسی به کد پروژه های هر فصل https://github.com/pistaacademy/flutter 🔔 همین حالا سابسکرایب کنید تا ویدیوهای آینده را از دست ندهید و یادگیری فلاتر را با هم شروع کنیم!
انیمیشن رو بچهها یه ذره بهترش بکنیم. خب
اما چهجوری این کارو بکنیم؟
من اینجا اومدم چیکار کردم برای انیمیشن؟
اومدم روی پدینگ این کارو کردم. الان میام
اینو برش میدارم.
من اول کدشو مینویسم بعد یه توضیحی روی
کدو بهتون میدم. فک کنم اینجوری بهتر باشه
که ببینید اول چیو میخوایم تغییر بدیم و
بعد بریم راجع بهش صحبت بکنیم.
خب
من میخوام به جای پدینگ از یک چیزی
استفاده کنم به نام اسلاید
ترنزیشن.
احتمالاً من یه پرانتزی چیزی رو پاک کردم حالا اشکال نداره ما میریم جلو
ولی اینا درستم هست حالا اس ترنزیشن چیه بذار اول راجع به این صحبت کنیم بعدش بریم
جلو
اسلاید انز انیم اسلاید ترنزیشن ما ترنزیشن بچهها زیاد داریم توی فلاتر ر
حالا یکیش اسلایده کاری که میکنی اینه که
اون چایلدی که ما بهش پاس میدیم رو که
اینجا این چایلد ما اینه که میشه همین
گرید ویو اینی که بهش پاس میدیم میاد از
یک نقطه به یک نقطه دیگه اینو اسلایدش
میکنه جابهجاش میکنه خب کارش اینه
بعد
در حقیقت بچهها اصلاح ترنزیشن کاری که برا شما انجام میده اینه که شما بهش یه
ویجتی رو میدید مثلا اینجا برای ما گرید
ویآه بعد یه انیمیشنم بهش میدید اون بر
مبنای این ویجت و این انیمیشن میاد اینو
جابهجا میکنه ولی خیلی نرم و راحت این
کارو میکنن خیلی طرح تمیز این کارو
میکنه پس عملاً یه جورای کارش اینه که
طرح تمیز بیاد این ویجت شما رو جابهجا
بکنه
خب خب
بریم که من اینو بنویسم براتون یه پارامتری داره اسلاید ترنزیشن به نام
پوزیشن
که ما قبلاً یه چیزی داشتیم به نام انیمیشن
کنترولر یادتون باشه اون بالا بود
اینا آ۶ش که گفته بودیم ۳۰۰ میلیثانیه باشه صف و یک داده بودیم خب
تو این که میام نقطه شروع و پایانو مشخص میکنیم این خودشم پیشنهاد میده شروعش رو
میذارم روی کانست از آفست استفاده میکنم
و اندم باشه روی
آفست صفر و صفر پس نقطه صفرم میشه این نقطه یکم میشه این
صفر و یکم اینه که بین اینا ۳۰۰ میلیثانیه
زمان میبره جابهجا بشه
یه چایلدی هم باید بهش بدیم ما که بگیم چی رو جابهجا بکنیم
همون چارلی که اومده همون گرید وی اومد
خیلی خب بریم خروجیشو با همدیگه تا اینجا ببینیم چهجوری شد
یه کوچولو بهتر از اون قبلیست اون حرکتش یه ذره بهتر از اون قبلیست خب
حالا خود همین اسلاید ترنزیشن بچهها یه
چیزی داره به نام انیمیت
انیمیت
بذارید اینجوری بهتون بگم بچهها ما یه انیمیشن کنترولر داشتیم اینجا خب که یه
جورایی بچهها شما فرض کنید مثلاً یه
ساعته خب یه ساعت تصور کنید که میگه که
توی ۳۰۰ میلیثانیه باید از صفر تا ۱ بره
یه تو این داریم اینجا تو این میاد میگه
که اون صفر یکه کجاست اینه یه خطکش عمل
میکنه که اینجا داره میگه از آفست سه دهم
تا آفست صفره.
خب پس ما یه دونه ساعت داریم یه دونه خطکش
داریم حالا یه چیزی اینجا اسلاید ترنزیشن
داره به نام انیمیت. انیمیت میاد این
ساعته رو وصلش میکنه به این خطکشه
و در حقیقت میاد
حرکت رو اندازهگیری میکنه. یعنی میاد
میگه که تو هر لحظه مثلاً باید این
انیمیشن کجا باشه. کار انیمیت اینه یه ذره
بهینه میکنه اصطلاحاً اون انیمیشنی که
داره اتفاق میفته رو و حتی میتونید بهش
بگید که چهجوری این اتفاق بیفته یعنی حتی
نحوه این جابهجایی مونید بهش مشخص بکنید
الان نشونتون میدم خب برای اینکه این
انیمیتور اینو اضافه کنم میام چیکار میکنم
اینجا
بعد از این
اندم
اینجا یه انیمیت اضافه میکنم.
میگم که از چیز استفاده میکنم. کرود انیمیشن گفتم نحوشم میشه مشخص کرد. پرنتش
میشه همون انیمیشن کنترولر
انیمیشن
این ساجستنش یه مشکلی خورده به نظر کروش
میگم کرو
دا
از
این
اوت از این اوتو بچهها ما تو سی اس اس هم
داریم حالا دوستانی که با سی اس اس داشتن
اونجا ما تو انیمیشنش اینو داریم تو
ترنزیشنش
یه پرانتزو من اشتباه گذاشتم اینجوری شده بذارید ببینم چیه
آها من یه چیزی یادم رفت اصلاً دیگه اینو
نیاز ندارید درایوو نمیخواید این به خاطر
این متخطا خب الان درست شد
چون داریم دیگه از این استفاده میکنیم
دیگه داریم میبریم خودمون تو انیمیت حالا
ببینم اینجا چی رو اشتباه نوشتم آها این
خط آندرلاینه
کلاً میشه اشتباست
حالا شد خب ایزین اوت این مشکلش چیه
آها یه اس اینجا افتاده کرت چالشم که همونه بریم ببینیم چهجوری
یه کوچولو خیلی سخته دیت کردنش ولی حالا چیزی که داکومنتش میگه میگه اینجوری بهتره
خب بریم بیایم جلسه بعدی ما میخوایم راجع
به یه تیپ دیگهای از انیمیشنو صحبت بکنیم
منظور از تیپ اینه که ما تا الان برای
اینکه بخوایم یه انیمیشنی رو درست بکنیم
کلی کد مینوشتیم
یعنی میومدیم این اینجا این کدا رو
مینوشتیم بعد این بالا کنترولر مشخص
میکردیم و اینا اما راه آسونترم هست
بریم بیایم جلسه بعدی راجع بهش صحبت
میکنیم فعلاً خداحافظ