آموزش متحرک سازی با JavaScript Web Animations API
Animating with the JavaScript Web Animations API
این کلاس به شما می آموزد که چگونه در وب با استفاده از JavaScript Web Animations API متحرک سازی کنید.
می‌آموزید که چگونه کارهایی را که قبلاً می‌دانید در CSS انجام دهید، به جاوا اسکریپت منتقل کنید و سپس قابلیت‌های اضافی مانند مکث و پخش انیمیشن‌ها را اضافه کنید، و یک انیمیشن را در نیمه راه دیگری شروع کنید. ترکیب انیمیشن های مختلف با هم و همگام سازی تعدادی از انیمیشن ها. همه کارهایی که در حال حاضر نمی توانید به تنهایی با CSS انجام دهید.
ما با ساخت مجدد برخی از انیمیشن‌های CSS اولیه با JavaScript Web Animations API شروع می‌کنیم، سپس هنگامی که اصول اولیه را پشت سر گذاشتیم، پروژه خود را با هم شروع می‌کنیم — مجموعه‌ای تعاملی از انیمیشن‌های متوالی.
در پایان دوره، باید درک کاملی از نحوه متحرک سازی در وب با JavaScript Web Animations API داشته باشید.
این کلاس برای چه کسانی است؟
برای استفاده از این API لازم نیست متخصص جاوا اسکریپت باشید — من نیستم!
با این حال، اگر در توسعه وب کاملاً تازه کار هستید، احتمالاً این کلاس برای شما مناسب نیست. من از شما انتظار دارم که بدانید چگونه HTML و CSS بنویسید و درک اولیه ای از جاوا اسکریپت داشته باشید. اگر می‌دانید یک تابع چگونه به نظر می‌رسد، و چگونه با «addEventListener» یک کنترل‌کننده کلیک بنویسید، فکر می‌کنم خوب خواهید بود!
آنچه را که خواهیم ساخت
ما از ابتدا، قطعه‌ای از تعامل چند صحنه‌ای را فقط با HTML، CSS و جاوا اسکریپت و بدون کتابخانه‌های خارجی خواهیم ساخت. به جای CSS، از JavaScript Web Animations API برای مدیریت انیمیشن‌های خود استفاده می‌کنیم و در مورد همه قابلیت‌های اضافی که تنها از طریق CSS ارائه می‌کند، آشنا می‌شویم.
در طول راه، نحوه راه‌اندازی یک سرور محلی بسیار ساده را نیز بررسی خواهیم کرد که همزمان با کار، تغییرات را در کد ما بارگذاری مجدد کند.
کد برای دانلود در GitHub رایگان است و برای هر ویدیو به پوشه‌هایی تقسیم می‌شود. هر کدام کد را همانطور که در انتهای هر ویدیو باقی مانده است ارائه می دهند.
آنچه شما نیاز دارید
تنها چیزی که برای شروع کار با این کلاس نیاز دارید، یک ویرایشگر متن مانند Sublime Text یا VS Code، یک مرورگر وب مدرن و تحمل جوک های متوسط است.
درباره نویسنده
سلام! من بن فراین هستم، یک توسعه دهنده وب و نویسنده از بریتانیا. من نویسنده پرفروش‌ترین‌ها هستم و از اواسط دهه 90 روی وب می‌نویسم و کار می‌کنم (— منظورت این است که نشان می‌دهد؟؟؟؟!!!!)
در روزی که به عنوان مدیر فنی طراحی UI/UX کار می‌کنم، ویژگی‌های محصول جدید را با فناوری‌های وب نمونه‌سازی می‌کنم.
خارج از کار روزانه، دوست دارم بنویسم و از لذت‌های ساده مانند بازی 5-a لذت ببرم. فوتبال جانبی (فوتبال) و گذراندن وقت با خانواده‌ام.
می‌توانید وبلاگ من را در @benfrain
درس ها Lessons
-
توضيح دهنده اساسي تماس ها و قول ها Callbacks and Promises Basic Explainer
-
اضافه کردن انیمیشن ها با هم Adding Animations Together
-
WAAPI 13 WAAPI 13
-
متعهد شدن استایل ها به DOM Committing Styles into the DOM
-
راه اندازی اولیه Basic Setup
-
نمای کلی فایل انیمیشن Animation File Overview
-
ایجاد مرحله و کنترل Creating the Stage and Controls
-
یک نمونه API انیمیشن وب ساده A Simple Web Animation API Example
-
مقدمه Introduction
-
همان انیمیشن ساخته شده با CSS و JS The Same Animation made with CSS and JS
-
به روز رسانی پروژه Project Refresh
-
دیگر ماتریس وجود ندارد No More Matrix
-
ساخت پروژه The Project Build
-
چرا فقط از CSS استفاده نمی کنید؟ Why not just use CSS?
-
نظریه انیمیشن وب: فریم های کلیدی Web Animation theory: Keyframes
-
گزینه های زمان بندی Timing Options
-
حتی یک API چیست؟ What even is an API?
-
نوشتن انیمیشن ها Writing the Animations
-
مکث و راه اندازی مجدد انیمیشن ها Pausing and Restarting Animations
-
توالی انیمیشن ها Sequencing Animations
-
بازسازی کد ما Refactoring Our Code
-
انیمیشن های جدید در اواسط تبدیل New Animations mid-transform
-
نتیجه Conclusion
نمایش نظرات
نظری ارسال نشده است.
https://donyad.com/d/3042
آموزش پروانه های آبرنگ
Watercolor Butterflies
"معمولاً با دیدن یک پروانه چه کار می کنید؟ در مورد من، من نمی توانم از آنجا رد شوم و قطعاً عکس یا فیلم می گیرم. تابستان گذشته کلکسیونی از پروانه داشتم. ...."
آموزش بهره وری برای طراحان: 11 نکته برای اصلاح گردش کار خود با DKNG
Productivity for Designers: 11 Tips to Revamp Your Workflow with DKNG
"با دوتایی طراحی قدرتمند DKNG به پشت صحنه بروید تا نکات و ترفندهای مورد علاقه آنها را برای سرعت بخشیدن به گردش کار طراحی خود کشف کنید! ایجاد مراقبت خلاقانه. ..."
آموزش نحوه: رنگ کردن قارچ با آبرنگ و جوهر
How To: Paint Mushrooms with Watercolors and Ink
یک کلاس سرگرم کننده مناسب برای آن روزهای سرد پاییزی که می خواهید در خانه به آرامش برسید و کاری رنگارنگ انجام دهید. این کلاس به شما نشان می دهد که چگونه به راحتی نقاشی کنید. ..
ایجاد دوره، یوتیوب، آموزش، زوم و موارد دیگر با OBS Studio
Course Creation, YouTube, Tutorials, Zoom, and More with OBS Studio
"این دوره با فرمول مخفی نرم افزاری که من برای ایجاد دوره های آموزشی خود از آن استفاده می کنم، یک نمای منحصر به فرد و پشت صحنه را به شما ارائه می دهد. در این دوره خواهیم کرد. .."
Ben Frain
نویسنده، توسعه دهنده، معلم
سلام، من بن فراین هستم. من نویسنده کتاب های توسعه وب از جمله پرفروش ترین کتاب های ""، "Sass and Compass for Designers" و "Enduring CSS" هستم.
در کار روزانه خود در بزرگترین شرکت قمار آنلاین جهان، bet365.com به عنوان مدیر فنی طراحی UI-UX کار می کنم.
قبل از وب، من به عنوان یک بازیگر تلویزیونی کم ارزش (و متواضع) و روزنامه نگار فناوری کار می کردم، که از دانشگاه سالفورد در رشته رسانه و اجرا فارغ التحصیل شده بودم (کاربرد بسیار زیاد بود!).
من چهار فیلمنامه به همان اندازه دست کم گرفته شده نوشته ام (البته به نظر من) و هنوز هم نیمی از تصور محو شده است که ممکن است یکی را بفروشم.
خارج از محل کار، من از لذت‌های ساده لذت می‌برم: بازی کردن فوتبال داخل سالن در حالی که بدنم (و همسرم) هنوز اجازه می‌دهد و کشتی گرفتن با دو پسرم.
من را در وب به آدرس @benfrain در Twitter پیدا کنید.
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.