نمایش انیمیشن ها در جی کوئری

نمایش انیمیشن ها در جی کوئری

زمان خاصی است که یک توسعه دهنده برای اولین بار .animate () جی کوئری را کشف می کند. یادم می آید
سعی کنید هر قسمت از صفحه را که به محتوای اصلی پیچ نشده است متحرک کنید. من ایجاد کردم
آکاردئون ها، منوهای پرواز، جلوه های شناور، انتقال اسکرول، آشکارهای جادویی، و اختلاف منظر
لغزنده ها تبدیل وب‌سایت‌هایم از اسناد سرد و ثابت به تجربیات متحرک و بصری
احساس می کردم به عنوان یک طراح وب در حال رسیدن به سطح دیگری هستم. اما فقط زنگ و سوت بود. من
اکنون متوجه شوید که با تمام انیمیشن هایی که اضافه کردم، در واقع کاربر را بهبود نداده بودم
تجربه وب سایت های من
با این حال، هیجان انگیز بود. پس چه چیزی انیمیشن را تا این حد هیجان انگیز می کند؟
آپارتمان من به مرکز شهر بروکلین می نگرد. مردم را می بینم که در خیابان راه می روند.
ستون های دودکش ها بلند می شوند. کبوترها برای نشستن روی طاقچه بال می زنند. یک ساخت و ساز
جرثقیل بخشی از ساختمان را بالا می برد. یک بالون منفرد به شکل قلب به سمت بالا شناور می شود
آسمان بروکلین (من می دانم، اما من به معنای واقعی کلمه دو بار این اتفاق را دیدم). ماشین ها بر فراز
پل ویلیامزبورگ ابرها از بالای سر می گذرند.

جهان در حرکت است.

اینگونه انتظار دارید که کیهان کار کند. چیزها حرکت می کنند. مثل حرکات بیرون
پنجره من، هر کدام داستانی تک جمله ای است. آنها با هم داستان بزرگتر آنچه هست را بیان می کنند
اتفاق می افتد.
با این حال رابط های دیجیتال اینگونه کار نمی کنند. آن داستان های کوچک گم شده اند. وقتی چیزها
تغییر، شما باید داستان را برای خود پر کنید. وقتی دکمه Next را در یک فشار می دهید
ATM، صفحه نمایش ناگهان تغییر می کند. آیا با موفقیت پیش رفت؟ آیا خطایی وجود داشت؟
برای تفسیر نتایج عمل خود باید صفحه را دوباره بخوانید. استفاده از حرکت
این جهش درک بین تعاملات را از بین می برد. حرکت ذاتاً ارتباط برقرار می کند
چه چیزی تغییر کرده است مثل نوشتن داستان های کوچک بین ایالت هاست.

وقتی یک انتقال اسلاید شما را به صفحه بعدی می برد، انیمیشن بهتر به شما کمک می کند
درک کن چه اتفاقی افتاده استفاده از این قدرت چیزی است که انیمیشن را بسیار هیجان انگیز می کند.
مانند چیدمان، رنگ و تایپوگرافی، انیمیشن به شما کمک می کند تا کاربر را شکل دهید و هدایت کنید
تجربه. انیمیشن چیزی بیش از حرکت دادن چیزهاست. بیشتر طراحی میکنه
به طور موثر، و آن را با تفکر انجام دهید.
متأسفانه، در تاریخ انیمیشن های وب، تفکر همیشه اینطور نبوده است
بالاترین اولویت. به‌عنوان توسعه‌دهنده، ما از Flash، تصاویر متحرک GIF، اپلت‌های جاوا و مارکی استفاده کرده‌ایم
برچسب‌ها و اخیراً CSS، جاوا اسکریپت و SVG برای ایجاد انیمیشنی که در
بهترین، سطحی از جلا دادن یا، در بدترین حالت، یک حقه. ایده ایجاد انیمیشن که هر دو است
عملکرد بالا و کاربر پسند نسبتا جدید است.
پس خیلی خوب است که این کتاب را پیش روی خود دارید. جولیان شاپیرو یکی از
کارشناسان اصلی انیمیشن در وب او در ایجاد و پشتیبانی از Velocity.js دارد
از تمام ویژگی‌ها و مزایای استفاده از حرکت بر روی آن دانش عمیقی ایجاد کرد
وب سایت ها انیمیشن سازی وب با استفاده از جاوا اسکریپت نه تنها دانش فنی را در اختیار شما قرار می دهد
برای پیاده سازی انیمیشن در وب سایت شما مورد نیاز است، اما مهمتر از آن، بینش
شما باید از انیمیشن به طور موثر استفاده کنید و تجربیات کاربر قانع کننده ای ایجاد کنید.

کتابخانه‌های انیمیشن و فناوری‌ها طراحی حرکتی را در دسترس‌تر از آن قرار داده‌اند
همیشه. اما هر توسعه دهنده ای از بهترین شیوه ها پیروی نمی کند. یکی دو سال گذشته دیده شده است
چندین ضد الگوی مد روز می آیند و می روند. رفتار اسکرول ربوده شده است. سیار
ناوبری به منوها منتقل شده است که فقط از طریق حرکات قابل دسترسی است. در حین اضافه کردن
انیمیشن در دسترس هر کسی است که با .animate() برخورد کند و از آن استفاده کند
بهبود تجربه کاربری یکی از ویژگی های یک توسعه دهنده اختصاصی است. این کتاب
به شما کمک می کند یکی از آنها شوید.
دیوید دساندرو
فوریه 2015
بروکلین، نیویورک
دیوید دساندرو بنیانگذار Metafizzy است
و نویسنده / توسعه دهنده سنگ تراشی و ایزوتوپ