از Pista Academy حمایت کنید
خلاصه آموزشی
مرور سریع مفاهیم اصلی پیش از تماشای کامل یا برای جمعبندی بعد از آموزش.
در جلسه 66 آموزش فلاتر، مدرس به بررسی دو روش انجام انیمیشن در فلاتر میپردازد: اکسپلیسیت و ایمپلیسیت. در اکسپلیسیت کنترل کاملی بر روی انیمیشن وجود دارد و نیاز به نوشتن کد زیادی است، در حالی که در ایمپلیسیت فلاتر به طور خودکار انیمیشن را انجام میدهد و تنها مقدار اولیه و نهایی را مشخص میکنیم. در این جلسه، به استفاده از روش ایمپلیسیت با استفاده از ویجتهایی مانند انیمیتد سویچر و ترنزیشن بیلدر پرداخته میشود و یک مثال عملی ارائه میشود.
نکات کلیدی
تفاوت بین اکسپلیسیت و ایمپلیسیت در فلاتر: در اکسپلیسیت کنترل کاملی بر روی انیمیشن وجود دارد، در حالی که در ایمپلیسیت فلاتر به طور خودکار انیمیشن را انجام میدهد.
استفاده از ویجتهایی مانند انیمیتد سویچر و ترنزیشن بیلدر برای ایمپلیسیت و ایجاد انیمیشن ساده.
روش ایمپلیسیت برای ایجاد انیمیشنهای ساده و سریع مناسب است.
مثال عملی ارائه شده نشان میدهد که چگونه میتوان با استفاده از ویجتهای ایمپلیسیت انیمیشن ایجاد کرد.
پرسشهای رایج
پاسخ کوتاه و مستقیم به پرسشهایی که معمولاً هنگام یادگیری این موضوع مطرح میشوند.
در اکسپلیسیت کنترل کاملی بر روی انیمیشن وجود دارد و نیاز به نوشتن کد زیادی است، در حالی که در ایمپلیسیت فلاتر به طور خودکار انیمیشن را انجام میدهد و تنها مقدار اولیه و نهایی را مشخص میکنیم.
ویجتهایی مانند انیمیتد سویچر و ترنزیشن بیلدر برای ایمپلیسیت استفاده میشوند.
روش ایمپلیسیت برای ایجاد انیمیشنهای ساده و سریع مناسب است، زیرا فلاتر به طور خودکار انیمیشن را انجام میدهد.
آخرین بهروزرسانی محتوای متنی:
در این دوره جامع و پروژهمحور با فلاتر و دارت از صفر تا صد آشنا میشوید و با ساخت هشت اپلیکیشن واقعی که هر کدام نکات کلیدی و پرکاربرد فلاتر را پوشش میدهد، مهارتهای خود را به سطح بعدی میبرید. آنچه در این دوره یاد میگیرید: مقدمه و نصب ابزارها: آشنایی با فلاتر، دارت و راهاندازی محیط توسعه مبانی دارت و فلاتر: یادگیری سینتکس دارت و ساخت ویجتهای پایه با اپ «تاسانداز (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 🔔 همین حالا سابسکرایب کنید تا ویدیوهای آینده را از دست ندهید و یادگیری فلاتر را با هم شروع کنیم!
انیمیشن ها
اصطلاحاً بهش میگن در حقیقت اکسپلیس
انیمیشن ما توی فلاتر
دو مدل انیمیشن میتونیم داشته باشیم یکی
اکسپلیسیت یکی ایمپلیسیت حالا فرق این د
تا چیه بریم از چجی بیتی کمک بگیریم
ببینیم فرقش چیه
میگه که تو فلاته اکسپلیسیت و ایمپلیسیت
چیزی که بچهها ما تو جلسات قبلی انجام
دادیم ایکسپلیسیت بود خب این جلسه میخوایم
بریم سراغ ایمپلیسیت میگه فرقشون کلاً تو
بحث اینه که شما چه کنترلهایی رو
انیمیشنه داشته باشید یا اینکه شما چقدر
کد نیاز بنویسید. ما توی
روش قبلی دیدیم که کد زیادی باید
مینوشتیم و کنترل زیادی هم داشتیم. خب
مثالشو حالا اینجا زدن با هم میریم
میبینیم. میگه که توی اکسپلیسیت چیزی که
ما تو جلسه قبلی داشتیم انجام میدادیم خب
میگه شما به صورت کلی میاید رفتار انیمیشن
رو با انیمیشن کنترولر چیکار میکنید؟ به
صورت دستی کنترل میکنید.
اینجا یه میگه که ایده کلیش ایده کلیدیش اینه که شما
[موسیقی]
راننده یک ماشین هستید شما تصمیم میگیرید
کی شروع بکنه کی متوقف بشه کی برگرده کی
تکرار بکنه کلاً فرمود دست شماست خلاصهشو
بخوام بگم
میگه کی استفاده میشه این روش زمانی که
شما نیاز دارید به انیمیشنهایی که پیچیده
باشن
یعنی با دیتیل زیادی باشن
میگه زمانی که شما میخواید تایمینگش کروش حالتش رو دقیقاً کنترل بکنید همه اینا رو
با همدیگه دیدیم تو مثال قبلی
حالا روش ساختشم گفته که حالا ما راجع بهش
صحبت کردیم و حالا یه بار برای مرور بکنیم
میگه شما یه انیمیشن کنترل درست میکنید
بعد یه انیمیشن کروم درست میکنید ما این
کارو کردیم
بعد
شما انیمیشن رو پاس میدید به یه ویجتی با انیمیشن مثلا بیلدر که اینم باز با هم
دیدیم حالا مثالشم اینجا زده که ما مثالشو
داریم اما ایمپلیسیت چهجوریه
میگه که شما به فلاتر میگید من در نهایت
چی میخوام
و فلاتر که میاد بین اون مقدار اولیه و
مقدار نهایی اون انیمیشن شما رو انجام
میده
عملاً مثل میگه شما سار تاکسی شدید فرمود
از شما نیست شما تصمیم نمیگید ماشین کی
واسه شما فقط بهش گفتید کجا سوارتون کنه
کجا پیادهتون بکنه
حالا میگه که ایده اصلیشم اینه که شما تنظیم میکنید و فراموش میکنید
شما ت فقط اون مشخصاتشو تغییر میدید
فلاتره که در حقیقت انیمیشن رو هندل میکنه
پشت صحنه
میگه جاهایی که شما نیاز به یک انیمیشن
ساده دارید خیلی نمیخواید درگیر کنید
خودتونو
الان مثالشو با هم میبینیم تو پروژه ما
میگه که برای اینکه بخوایم استفادهش بکنیم ما توی فلاته یه چیزی ویجتایی داریم که با
انیمیتد شروع میشه با کلمه انیمیتد مثل
انیمیتد کانتنر انیمتد اپسیتی انیمیتد الا
ما قرار یکی از اینا استفاده بکنیم یه
چیزی آماده است خب بریم تو مثال خودمون
پروژه خودمون
خب بیایم داخل کدمون میریم تو صفحه
میل دیتیل ما اینجا یه چیزی داشتیم بچهها
یادتون باشه
این میخوام یه انیمیشن رو این بدم مثلاً میخوام وقتی میزنم روش بچرخه اول بچرخه
بعد تغییر وضعیت بده خب یه همچین انیمیشنی
میخوام اضافه کنم این آیکونه کجا بود
ایناش پس من قراره که انیمیشن رو این
اعمال بکنم با روش ایمپلیسیت
بریم شروع بکنیم
همون طور که گفتم ما قراره یه سری از
انیمیشن آماده خود در حقیقت فلاتر استفاده
کنیم من اینو برش میدارم از اینجا فعلاً
یا یه کار بکنیم آیکونو نگه دارم اینو بردارم
میگم که به جای خود آیکون از این استفاده
کن یه چیزی به نام انیمیتد
سویچر یکی از اون روشهاست یکی از اون
ابزارای انیمیشن فلاتره
که الان میا ست میکنیم یه چار داره که اون آیکون رو بهش میدم
خب داره به چی گیر میده
اوکی کش تو دوریشن من میگم کاست
آبجکت دوریو میارم
میگم به هر میلی ثانیه باشه مقدارشم باشه
۳۰۰ تا خب
به نظرتون الان کار میکنه این قطعاً کار نمیکنه الان میام میگم چرا بریم با هم
ببینیم اول
البته این هیچ اتفاقی نمیفته چرا اگه خاطرتون باشه ما اینجا گفتیم توی حالت
ایمپلیسیت ما چی میگیم ما
مقدار اول و آخرو میدیم
من اینجا هیچ کاری نکردم نه مقدار اول
دادم نه مقدار آخر دادم مشخص نکردم که
اصلاً از کجا بره به کجا پس اینو باید اول
مشخص بکنید
برای این کهه بخوام اینو مشخص بکنیم
میایم یه چیزی به این یه ویژگی جدیدی بهش
اضافه میکنیم به نام ترنزیشن بیلدر خب از
اسمش مشخصه دیگه میاد یه ترنزیشنی رو
ایجاد میکنه
دقیق این انیمیتد سویچر بچهها ما باید
بهش بگیم که چیکار بکنه حالا یه سری
انیمیشن دیگه توی فلاتر هست یه کار مشخص
انجام میده حالا میریم لیستشو با همدیگه
میبینیم
ترنزیشن بیلدر
که یه چایلد میخواد
ریترن میکنه این باید یه چیزی برگردونه بچهها ریترن
روتیشن ترنزیشن من از این میخوام استفاده کنم
این چایلد بچهها همین چایلده اینه این همه این چایلدا یکین
خب این از این پس ما بهش انیمیشنم دادیم گفتیم که در حقیقت چیکار باید بکنه
حالا یه استپ دیگه مونده
من الانم اینم بچهها کار نمیکنه همچنان چرا چون ما هنوز مقدار ندادیم از کجا تا
کجا اینو باید اول مشخص بکنیم
اول بچهها ما باید به این آیکونه یه اتریبیت جدید اضافه کنیم به نام کی اینو
حتما باید انجام بدید
فورت همین که اینجاست خب دم باید مقدار بدیم اینجا من تنز میام مقدار اینجا میدم
بذار من اینو ببرمش پایین اینجوری بنویسم
بهتره
خب اینو پاک میکنم از چی استفاده میکنم
از تو این قبلاً تو اینو دیده بودیم
میا میگم که از یه جا شروع بکن بیگین از
مثلاً نیم شروع بکن
اند شو
میدم یک
دات انیمت
انیمیشن خب چرا داره خطا میده چون اینجا
بچهها باید اعداد اعشار بدید حتماً این
نگاه کنم ۹ درست میشه اگه میخواد یک بماند
باید بیاید قبل این بعد این تو اینه یه
دابل اضافه کنید
اینجوری خب این از نیم تا یک
این الان باید کار بکنه بذارید ببینیم با
همدیگه
میبینید هرچی من این نیمه رو بیشتر کنم سریعتر
میشه بچهها چون فاصله کمتره دیگه ۸دهم تا
۱دهم طبیعتاً سریعتر اتفاق میفته
این چیز سریعتر شد. خب یه چیزی قرار بود نشونتون بدم.
تو این لینکه بچهها برید خب لیست انیمیشن
رو میتونید ببینید. انیمیشن ویجتها رو
میتونید ببینید.
الاین ترنزیشن داریم انیمیتد الاین داریم
انیمیتد بیلدر داریم کانتینر داریم کراس
فید داریم
و زیاده همه اینا هست میتونید ازش
استفاده بکنید و ما از یکیش استفاده کردیم
این جلسه
ما از مثلاً روتد ترنزیشن ما استفاده
کردیم الان مثال ولی خب زیاده آپشناتون
زیاده میتونید ازش استفاده بکنید
خب اینم از این انیمیشن
خب بریم یکی دیگه از این انیمیشن رو استفاده کنم مثلاً بیایم سراغ کوشش هیرو
میخوام از اون استفاده کنم
و حالا دوزلشو میتونید اینجا ببینید من
الان فقط بهتون نشون میدم چهجوریه
میام توی ویجت میل آیتم خب من اینجا
یه دونه
عکس دارم کوک
اینا فید ایمج میخوام بین این نگاه کنید بچهها
این فید ایمجست درسته میخوام بین این و
این عکس یه انیمیشنی اتفاق بیفته خب کاری
که باید بکنیم چیه باید باید این د تا
عکسو به همدیگه وصلش بکنیم این میل آیتم
ویجته اون اسکرین میل دیتیله بعد بین این
دو تا یه کانکشن ایجاد بکنیم
چهجوری این کارو میکنیم؟ این فید ایمیجو
میام ورپ میکنم داخل یه دونه چیز ویجت
اسم ویجت هیروئه همون که دیدیم با همدیگه
خب بعد اینجا فقط کافیه که یه تگ بهش
بزنید یه تگ میزنید خیلی ساده میل. آیدی
حالا میرید داخل اسکرین
کو اسکرین میل دیتیل اون عکس رو اینجا
پیدا کنید ناش این عکسرم ورب کنید داخل
هیرو همون آیدی رو بهش بدید آیدیهاشون
باید یکی باشه باعث میشه که این دو تا به
همدیگه کانکت بشن و اون اتفاقی که
میخوایم بیفته
هیرو رو تگل.
جفتش malل.آیدی یکیه دیگه تگاشون یکی میشن الان خب بریم ببینیم نتیجه رو
اینجا رو نگاه کنید بچهها میبینید چی شد؟ از خود این میاد میره رو
این
یه حالت انیمیشن طور اتفاق افتاد بهشون.
اینم چیز جالبیه
بریم بیایم بحث انیمیشن تمام شد جلسه بعدی
بریم سراغ مبحث بعدیمون
و میخوایم راجع به گرفتن اطلاعات از
کاربرد کردن فرم و اینپوت و اینا صحبت
بکنیم و شایدم بریم سراغ یه پروژه جدید
دیگه اینو ببندیمش فعلاً خداحافظ