یک میلیون راز کوچک • جاش دبلیو کومو

admin6 روز پیش

0 0 خواندن این مطلب 21 دقیقه زمان میبرد

مقدمه

در چند ماه گذشته من سخت روی سال سوم آینده ام کار کرده ام، انیمیشن های عجیب و غریب

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

در نگاه اول بسیار ساده به نظر می رسد، حتی مینیمال… اما وجود دارد زیاد زیر سطح اتفاق می افتد این صفحه فرود شامل 14000+ خط کد و 200+ فایل است!

در پست وبلاگ امروز می خواهم به برخی از جزئیات جالب تر بپردازم و نحوه ایجاد آنها را به اشتراک بگذارم. این یک آموزش کامل نخواهد بود، اما هدف من این است که چند تکنیک قوی به شما ارائه دهم که بتوانید بلافاصله در کار خود از آنها استفاده کنید. ✨

اگر با کار من آشنا هستید، می‌دانید که من دوست دارم جزئیات کوچک عجیب و غریب را وارد کنم. هر هفته سوالاتی در مورد چگونگی ساخت یک انیمیشن یا تعامل خاص برای من وجود دارد.

انیمیشن Whimsical تلاش من برای آوردن تمام این دانش و تجربه در یک دوره آنلاین تعاملی کامل است. مجموعه ای از تکنیک های اساسی را که من برای طراحی و ایجاد انواع افکت های مختلف استفاده می کنم، یاد خواهید گرفت.

برخی از محبوب ترین انیمیشن ها و تعاملات این وبلاگ و پروژه های دیگر من را پوشش می دهد، اما هدف من بسیار گسترده تر از این است. من می خواهم ابزارهایی را در اختیار شما بگذارم که می توانید از آنها استفاده کنید جلوه های منحصر به فرد خودتان

شما یاد خواهید گرفت که چگونه با استفاده از فناوری های وب جهانی: CSS، JavaScript، SVG و 2D Canvas، انیمیشن و تعامل ایجاد کنید. همچنین محتوای اضافی متمرکز بر ادغام React (که باید به خوبی به سایر چارچوب‌های JS ترجمه شود) وجود خواهد داشت. بیشتر دوره بر روی پیاده سازی تمرکز دارد، اما ما فرآیند طراحی را نیز پوشش خواهیم داد.

پس از بیش از 18 ماه کار، سرانجام ثبت نام باز شد! در اینجا می توانید اطلاعات بیشتری کسب کنید و ثبت نام کنید:

اصلی‌ترین چیزی که این صفحه را جالب می‌کند «نوار ابزار آشوب» است، مجموعه‌ای از دکمه‌ها در گوشه سمت راست بالا که به کاربر اجازه می‌دهد صفحه را دستکاری کند.

برای مثال، ابزار grab به شما امکان می‌دهد آیتم‌های فردی را بگیرید و پرتاب کنید:

ابزار بمب نیز وجود دارد که دقیقاً همان کاری را انجام می دهد که انتظار دارید:

هر ابزار دارای یک نماد و هر نماد دارای انیمیشن های منحصر به فرد است. بیایید روی این نمادها زوم کنیم تا بتوانیم نگاهی دقیق تر به این انیمیشن ها بیندازیم. نگه دارید یا تمرکز کنیدلمس کنید هر نماد را در عمل مشاهده کنید:

وای

بیشتر انیمیشن‌های شناور با اعمال نوعی تبدیل در شناور کار می‌کنند transition ویژگی برای متحرک سازی این انتقال:

.some-element {
  transition: transform 200ms;

  &:hover {
    transform: rotate(10deg);
  }
}

من ترجیح می دهم رویکرد متفاوتی داشته باشم: من به طور خلاصه یک سبک لغو در شناور اعمال کنید، اما این سبک پس از یک فاصله کوتاه غیرفعال می شود، چه کاربر همچنان شناور باشد یا نه. این یک حرکت کوتاه ایجاد می کند که من آن را “بوپ” می نامم.

من همه چیز را در مورد انتقال Boop در یک پست وبلاگ قبلی نوشتم، بنابراین همه آن موارد را در اینجا تکرار نمی کنم.

بیشتر این نمادها از Lucide می آیند نمادها(در برگه جدید باز می شود)، بسته آیکون مورد علاقه من. تنها استثنا بمبی است که خودم در فیگما ساختم.

این آیکون ها همانطور که هستند خوب هستند، اما به نظر من تقریباً همین است انیمیشن ها که واقعاً آنها را زنده می کند و چیزهای زیادی را اضافه می کند شخصیت به رابط کاربری ما بیایید در مورد اینکه چگونه می توانیم این نوع انیمیشن ها را اضافه کنیم صحبت کنیم.

نمادهای Lucide به صورت SVG توزیع می شوند. اگر یکی از این بدبخت ها را در IDE خود باز کنید، چیزی شبیه به این خواهید دید:


svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
>
  path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/>
  path d="m5 11 9 9"/>
  path d="M22 21H7"/>
svg>

بر خلاف فرمت های تصویر بیت مپ مانند gif/jpg، SVG ها در قالب XML مشخص می شوند، درست مانند تگ های HTML! در واقع، ما می توانیم این کد را مستقیماً در HTML خود (یا در JSX خود) قرار دهیم. این به ما امکان می دهد دستکاری کنیم بخش های خاص روی نماد ما

توضیح کامل SVG بسیار فراتر از محدوده این پست وبلاگ است، اگرچه در این دوره به طور عمیق به آن خواهیم پرداخت. برای خلاصه کردن آنچه در اینجا اتفاق می‌افتد: نماد حذف ما از 3 مورد تشکیل شده است برچسب ها همه مجموعه ای از دستورالعمل های نقاشی است. وقتی این سه دستورالعمل را با هم لایه بندی می کنیم، نماد حذف خود را دریافت می کنیم:

مسیر A و B خود تایر هستند و مسیر C سطحی است که مالش می شود. برای اهداف ما، ما می خواهیم تایر بدون تماس با سطح به جلو و عقب حرکت کند:

ما می توانیم با قرار دادن دو مسیر اول در a به این هدف برسیم برچسب به معنی “گروه”. سپس می توانیم با کشیدن این دو، تبدیل CSS را به این گروه اعمال کنیم با هم تگ کنید

من یک ترفند مشابه را روی نماد بمب انجام می دهم. در نگاه اول آن را ظاهر می شود استاندارد بودن transform: rotate()، اما چیزی بیشتر از این در آن وجود دارد.

با این نوار لغزنده بازی کنید تا جلوه را اغراق کنید تا واضح تر شود:

برای توضیح اینکه اینجا چه خبر است: کل بمب 10 درجه می چرخد. سپس، در یک در بمب SVG، من یک را اعمال می کنم تو در تو چرخش به فیوز کوچک همچنین تحت تأثیر چرخش والد بمب قرار می گیرد و چرخش اضافی فیوز

ترفند ساخت این کار استفاده است transform-origin تا مطمئن شوید که هر دور به درستی می چرخد. چرخش اصلی به مرکز دایره بمب لنگر می‌زند، در حالی که چرخش فیوز به بالای بمب لنگر می‌زند:

تکیه گاه اصلی

نقطه محوری فیوز

انیمیشن SVG یکی از ابزارهای مهم در جعبه ابزار من است و در دوره آموزشی به آن خواهیم پرداخت. در ضمن. می توانید در مورد آن بیشتر بدانید transform-origin در پست وبلاگ من دنیای تبدیل CSS.

چهارمین ابزار در نوار ابزار Chaos، عصای جادویی، پیچیده‌ترین ابزاری است که تاکنون وجود دارد. چندین عنصر در صفحه را می توان با نتایج غیرقابل پیش بینی تغییر شکل داد. به عنوان مثال، عنوان اصلی می تواند بین سبک های مختلف جابجا شود:

هر زمان که یک آیتم تبدیل می شود، مکان نما استیک چندین ستاره ساطع می کند. این نمونه ای از افکت ذرات است و یکی از افکت های “ژانر” مورد علاقه من است.

ممکن است متوجه شوید که ذرات در a مشتعل نمی شوند به طور کامل جهت تصادفی همه آنها در یک مخروط 45 درجه می چرخند:

هر ذره دقیقاً در زیر مکان نما با استفاده از موقعیت یابی مطلق و top / left، با transform: translate() عادت داشت آنها را به سمت چپ پرتاب کند. اما چگونه به مقادیر خاص برای هر ذره برسیم؟

نکته کلیدی این است که بر اساس آن فکر کنید مختصات قطبی. استدلال در مورد این موارد با سیستم مختصات مناسب بسیار آسان تر می شود.

در وب، ما عادت کرده‌ایم که بر اساس آن فکر کنیم دکارتی مختصات: ما چیزها را بر حسب جابجایی X/Y آنها تعریف می کنیم. transform: translate(-30px, 10px) عنصر را 30 پیکسل به سمت چپ و 10 پیکسل به پایین منتقل می کند.

با قطبی مختصات، ما بر حسب X و Y فکر نمی کنیم زاویه و فاصله.

توضیح این موضوع با نمایش ساده تر خواهد بود. کلیک کنیدلمس کنید در اطراف هر نمودار برای مشاهده نحوه محاسبه مختصات. اگر از اشاره گر استفاده نمی کنید، می توانید با فوکوس کردن دسته و استفاده از کلیدهای جهت دار از صفحه کلید نیز استفاده کنید:

مختصات قطبی

110درجه

125

با مختصات دکارتی، کاملاً مشخص نیست که چگونه می توان مقادیر معتبر X/Y را برای افکت چوب من بدست آورد. اما با مختصات قطبی بسیار آسان است. من می توانم مقادیر تصادفی را در یک محدوده خاص ایجاد کنم:

import { random } from '@/utils';

function generateParticle() {
  // Generate a random angle between 200° and 240°:
  const angle = random(200, 240);
  // Same thing for distance, between 30px and 60px:
  const distance = random(30, 60);

  return { angle, distance };
}

(تصادفی یک تابع کمکی کوچک است که یک عدد تصادفی را بین دو مقدار انتخاب می کند.)

الان نمی توانیم در واقع یک تبدیل CSS با استفاده از مختصات قطبی اعمال کنید. قبل از اینکه بتوانیم از آنها استفاده کنیم، باید آنها را به مقادیر دکارتی تبدیل کنیم. این را می توان با مثلثات من ریاضی را برای شما ذخیره می کنم و فرمول را به شما می دهم:

function convertPolarToCartesian([angle, radius]) {
  const angleInRadians = convertDegreesToRadians(angle);

  const x = radius * Math.cos(angleInRadians);
  const y = radius * Math.sin(angleInRadians);

  return [x, y];
};

const convertDegreesToRadians = (angle) => (angle * Math.PI) / 180;

من قبلا تمام این منطق را در جاوا اسکریپت انجام می دادم و مقدار نهایی را در CSS اعمال می کردم، اما این روزها CSS دارای توابع مثلثاتی است! با ترکیب آنها با متغیرهای CSS، می‌توانیم یک انیمیشن فریم کلیدی مانند زیر راه‌اندازی کنیم:

@keyframes flingAway {
  to {
    transform: translate(
      calc(cos(var(--angle)) * var(--distance)),
      calc(sin(var(--angle)) * var(--distance))
    );
  }
}

.particle {
  animation: flingAway 1000ms ease-out;
}

بعد، وقتی ذرات خود را رسم می کنیم، تعریف می کنیم --angle و --distance برای هر یک در اینجا به نظر می رسد در JSX:

function Particle() {
  const angle = random(200, 240);
  const distance = random(30, 60);

  return (
    div
      className="particle"
      style={{
        '--angle': `${angle}deg`,
        '--distance': `${distance}px`,
      }}
    />
  );
}

export default React.memo(Particle);

این استراتژی اصلی است که من برای ذرات استفاده می کنم و عالی عمل می کند. یک سری چیزهای دیگر وجود دارد که می توانیم برای بهتر کردن آن انجام دهیم، مانند:

اضافه کردن یک چرخش تصادفی با transform: rotate().
یک انیمیشن فریم کلیدی دیگر را اعمال کنید تا ذره پس از قرار گرفتن در موقعیت نهایی خود محو شود.
تصادفی سازی animation-duration و animation-delay، برای ایجاد احساس کمتر رقص/رباتیک.
جمع آوری زباله برای حذف ذرات قدیمی DOM.
استفاده از منحنی تسکین مشتق از فنر با linear().

این چیزهای «مختصات قطبی» احتمالاً باعث ایجاد لرز در ستون فقرات شما نمی شود، مگر اینکه یک متخصص ریاضی باشید، اما صادقانه بگوییم مفهوم انتقادی برای انواع کارهایی که انجام می دهم، یکی از کلیدهای کوچک مخفی است که همیشه به آن تکیه می کنم.

به عنوان مثال، رنگین کمان تعاملی در این وبلاگ صفحه اصلی(در برگه جدید باز می شود) متکی بر مختصات قطبی است:

همین امر در مورد این کنترل “گوشه” که برای مولد گرادیان خود ایجاد کردم نیز صدق می کند:

و این اثر کاملا مضحک در تینکرسنت(در برگه جدید باز می شود)، اسباب بازی هنری مولد من، کاملاً متکی به حرکت است بین مختصات دکارتی و قطبی:

در اصل این کنترل قرار بود یک ضامن بولی بین دکارتی یا قطبی باشد. از روی هوس تصمیم گرفتم این دو مقدار را با هم ترکیب کنم و این نتیجه شد. 😮

اینها سه نمونه اولی هستند که به ذهن می رسند، اما این فهرست همچنان ادامه دارد. نمونه های بیشتری را در دوره خواهیم دید. 😄

صفحه فرود Whimsical Animations مملو از اشکال تصادفی است: لوله ها، هشت وجهی ها، و تخم ها، انواع چیزها.

این اشکال را خودم با استفاده از بلندر که یک نرم افزار مدل سازی سه بعدی است ساختم. پس از ایجاد 22 مورد از این شکل های کوچک، متوجه شدم که مشکل دارم. 😬

اکثر ابزارهای بهینه سازی که استفاده می کنم، مانند next/image، اطلاعات نمایه رنگ را حذف می کنند. آنها تصاویر زیبای من با گستره وسیع را در فضای رنگی sRGB مسطح می‌کنند و در این فرآیند، غنا و شادابی زیادی را از دست می‌دهند:

سه شکل انتزاعی از صفحه فرود، کمی سفید شده است

اگر این دو تصویر از نظر شما یکسان به نظر می رسند، احتمالاً به این دلیل است که از نمایشگری استفاده نمی کنید که از فضای رنگی P3 پشتیبانی می کند.

وقتی آنها را در فضای رنگی اصلی P3 ذخیره می کنم، هر تصویر بین 50 تا 150 کیلوبایت است. با 22 تصویر جداگانه ارسال خواهم کرد تقریبا دو مگابایت دارایی، که برای تصاویر تزئینی این چنینی بیش از حد به نظر می رسد!

همچنین به این معنی است که هر تصویر هر بار که بارگذاری را تمام می‌کند، بر اساس برنامه زمانی خود، به وجود می‌آید و موجی بدون قافیه یا دلیل ایجاد می‌کند.

برای حل این مشکلات از sprite استفاده کردم. ✨

اسپرایت یک تصویر منفرد است که شامل تمام اشکال منفرد در کنار هم است. در اینجا یک نسخه کاهش یافته است:

در نشانه گذاری من فردی ایجاد می کنم برچسب ها برای هر شکل با استفاده از object-position ویژگی برای حرکت در تصویر و نمایش یک شکل واحد. کد به شکل زیر است:

style>
  .decoration {
    object-fit: none;
    object-position: var(--x) var(--y);
    /*
      Support high-DPR screens by rendering at 50%
      of the image’s true size:
    */
    transform: scale(0.5);
  }
style>

img
  alt=""
  src="/images/shape-sprite.png"
  class="decoration"
  style="--x: -387px; --y: -125px; width: 120px; height: 240px"
/>
img
  alt=""
  src="/images/shape-sprite.png"
  class="decoration"
  style="--x: -42px; --y: -201px; width: 456px; height: 80px"
/>

این یک کار نسبتا خسته کننده است: با استفاده از نرم افزار ویرایش تصویر، شکل ها را یکی یکی مرور می کنم و فاصله آنها را از گوشه بالا/چپ و همچنین عرض/ارتفاع آنها را اندازه گیری می کنم. من تمام این داده ها را در یک شی بزرگ JSON کدگذاری می کنم، سپس نقشه می اندازم و نمایش می دهم برای هر کدام برچسب بزنید

برای اینکه تصاویر در نمایشگرهایی با DPR بالا مانند نمایشگرهای رتینا اپل واضح به نظر برسند، تصویر در واقع دو برابر اندازه نمایش داده شده بزرگتر است. من استفاده می کنم transform: scale(0.5) تا به اندازه مورد نظر کوچک شود. در حالت ایده آل، من باید دو یا سه نسخه مختلف از spritesheet داشته باشم و بین آنها بر اساس نسبت پیکسل صفحه نمایش مانیتور سوئیچ کنم، اما در نهایت در نمایشگرهای استاندارد خوب به نظر می رسد.

با استفاده از اسپرایت، مشکل ظاهر شدن هر تصویر پس از اتمام بارگذاری را نیز حل می کنیم. در عوض، آن را طوری تنظیم کردم که تصاویر به صورت متوالی محو شوند، از مرکز شروع و به سمت بیرون حرکت می کنند. در نیم سرعت به نظر می رسد:

این انیمیشن محو از انیمیشن فریم کلیدی استفاده می کند:

@keyframes fadeFromTransparent {
  from {
    opacity: 0;
  }
}

بعد استفاده میکنم animation-duration و animation-delay برای ایجاد یک اثر تورم آبشاری:

img
  alt=""
  src="/images/shape-sprite.png"
  class="decoration"
  style="
    --x: -42px;
    --y: -201px;
    width: 456px;
    height: 80px;
    animation-duration: 800ms;
    animation-delay: 200ms;
  "
/>

همه عنصر برای هر دو مقادیر سفارشی دریافت می کند animation-duration و animation-delay، بر اساس فاصله درک شده آنها از مرکز صفحه نمایش.

این در لوکال هاست عالی کار می کند، اما در تولید کار نمی کند: انیمیشن های فریم کلیدی شروع می شوند بلافاصله لحظه از عنصر ایجاد می شود. منتظر لود شدن تصویر نیست!

در اینجا نحوه حل این مشکل در React آمده است:

function ShapeLayer() {
  const [hasLoaded, setHasLoaded] = React.useState(false);

  React.useEffect(() => {
    const img = new Image();
    img.src = "/images/shape-sprite.png";

    img.onload = () => {
      setHasLoaded(true);
    };
  }, []);

  if (!hasLoaded) {
    return null;
  }

  // Once `hasLoaded` is true, render all of the shapes...
}

هنگامی که برای اولین بار رندر می شود، این مؤلفه هیچ رابط کاربری را مشخص نمی کند. یک تصویر ساختگی جداگانه ایجاد می کند و ثبت می کند onload یک دستکاری کننده وقتی دانلود تصویر به پایان رسید، یک متغیر حالت را تغییر می‌دهم که باعث همه می‌شود برچسب هایی که باید ایجاد شود به این ترتیب، دنباله محو شدن تنها زمانی شروع می شود که تصویر در دسترس باشد.

پیوند به این عنوانقطعات شیشه مات

دو تا از شکل های متنوع به صورت شفاف طراحی شده اند که از شیشه ساخته شده اند. فکر می‌کردم سرگرم‌کننده خواهد بود اگر هر چیزی را که پشت سرشان حرکت می‌کند محو کنند. با استفاده از بمب، می توانید فیگورهای شیشه ای را حرکت دهید تا در مقابل چیزهایی مانند زیر بنشینید:

یک تکه شیشه ای زاویه دار جلوی عنوان قرار گرفته و مانع آن می شود

این به طرز شگفت آوری پیچیده بود. Blender شفافیت را به عنوان بخشی از صادرات خود لحاظ می کند، اما اینطور بود بیش از حد روشن واقع بینانه به نظر نمی رسید. همچنین، فشرده سازی png برخی از مصنوعات عجیب و غریب اضافه کرد:

همان شکل شیشه، اما چیزهای پشت شیشه کاملاً قابل مشاهده هستند و توهم را خراب می کنند

من اخیراً در مورد ویژگی پس زمینه فیلتر نوشتم که به ما امکان می دهد یک الگوریتم محو کردن را برای هر چیزی اعمال کنیم. پشت سر عنصر، اما همه چیز کاملاً درست نشد:

همان شکل شیشه ای، به جز با یک جعبه نامرئی در اطراف آن که همه چیز را در پشت آن محو می کند، از جمله چیزهایی که در واقع توسط شیشه مسدود نشده اند.

backdrop-filter بر اساس قالب کار می کند گره DOM. این به اندازه کافی هوشمند نیست که فقط تاری را روی موارد پشت پیکسل های مات در تصویر اعمال کنید!

برای حل این مشکل استفاده کردم clip-path خاصیت ترسیم چند ضلعی به شکل صفحه شیشه‌ای، و درگیر کردن با نقاط تا زمانی که درست به نظر برسد. در اینجا شکل این چند ضلعی است:

را polygon() تابع به ما اجازه نمی دهد که شعاع گوشه ای را برای گوشه های گرد مشخص کنیم، بنابراین ناحیه برش خورده ما اینطور نیست کامل، اما به اندازه کافی نزدیک است که در این شرایط خوب کار کند. 😄

کف اتاق برش

در نسخه قبلی این صفحه فرود، من از تکه های آب نبات استفاده کردم، به جای اشکال تصادفی که اکنون می بینید:

من چند روزی را صرف ساختن تمام این دارایی ها با دست در بلندر کردم و بعد متوجه شدم که احساس خوبی ندارم. من بر این تمرکز کردم که هر نوع آب نبات واقعی به نظر برسد، مانند اضافه کردن کریستال های شکر به کرم های صمغی. با این حال، وقتی همه آنها را با هم در صفحه فرود قرار دادم، منسجمی به نظر نمی رسید. همچنین مطمئن نبودم که بخواهم از آب نبات به عنوان استعاره برای دوره استفاده کنم. بنابراین در نهایت آب نبات دور انداخته شد.

در مورد اثری که منتشر می کنم یک کمال گرا هستم، یعنی خرج می کنم زیاد زمان برای چیزهایی که هرگز نمی بینی این صفحه فرود چندین هفته کار تمام وقت، با تکرارها و بازنگری های فراوان، طول کشید. لطفاً فکر نکنید که من این موضوع را در آخر هفته ساخته‌ام یا اولین تلاش من را می‌بینید. 😅

بنابراین این کاملا غیر ضروری بود، اما من یک سینت سایزر کاملا کاربردی ایجاد کردم. 😅

یک سینت سایزر مصور با صفحه کلید و تعدادی لغزنده و دکمه. روی پلاک سمت چپ بالا نوشته شده

سینت سایزر با تبدیل فرم ثبت نام با استفاده از ابزار ‘دسته’ آشکار می شود. این منحصر به فرد برای تجربه دسکتاپ است.

سینت سایزر یا با کلیک کردن روی کلیدها با ماوس، فشار دادن کلیدهای روی صفحه کلید QWERTY یا با یک کنترلر MIDI پخش می شود. تمام صدایی که ایجاد می کند به صورت زنده در مرورگر تولید می شود. هیچ صدای از پیش ضبط شده ای استفاده نمی شود. من آن را با استفاده از Web Audio API ساختم. اکثر چیزها از ابتدا ساخته شده اند، اگرچه من استفاده کردم ماهی تن(در برگه جدید باز می شود) برای برخی از اثرات

برای اکثر زنگ‌ها و سوت‌ها در این صفحه فرود، من سعی کرده‌ام چیزها را به‌طور استراتژیک انتخاب کنم، و چیزهایی را که واقعاً یاد می‌گیرید در دوره ایجاد کنید را نشان می‌دهم. برای این یکی، هر چند، صرفاً تمرینی برای ارضای خود بود. ما در این دوره آموزشی Web Audio API را پوشش نمی دهیم.

با این حال، برخی از جزئیات رابط کاربری بسیار جالب در اینجا نیز وجود دارد. به عنوان مثال: به جز پلاک نام در گوشه سمت چپ بالا، از تصاویر پوچ استفاده می شود. رابط کاربری کاملاً با استفاده از گرادیان ها و سایه های لایه ای ایجاد شده است!

انجام این نوع «هنر CSS» می‌تواند واقعاً ترسناک به نظر برسد، اما صادقانه آن‌قدر که انتظار داشتم ترسناک نیست. در واقع کاملاً قابل توجه است که چگونه خوب وقتی شروع به لایه بندی گرادینت می کنید، همه چیز تقریباً پیش فرض به نظر می رسد!

مانند تمام تخم مرغ های عید پاک، سینت سایزر 3 عملکرد مخفی خود را دارد. من آنها را در اینجا خراب نمی کنم، اما نکاتی را به شما می دهم:

اگر در صفحه فرود جستجو کرده باشید، احتمالاً متوجه شده اید که تقریباً همه چیز دارای جلوه صوتی است.

این کمی بحث برانگیز است. مردم معمولاً انتظار ندارند وب سایت ها سر و صدا ایجاد کنند! اما دستگاه‌های ما دارای کنترل‌های میزان صدا هستند، بنابراین خاموش کردن صدا برای افراد آسان است. من فکر می کنم تا زمانی که جلوه های صوتی ما سلیقه ای باشد و زیاد بلند نباشد، می توانیم از آن دور شویم.

پیوند به این عنوانکجا صداها را پیدا کنیم

بسیاری از مردم به من گفته اند که می خواهند شروع به اضافه کردن جلوه های صوتی به پروژه های خود کنند، اما نمی دانند کجا می توانند جلوه های صوتی با کیفیت بالا را پیدا کنند.

سال ها منبع اصلی من بود freesound.org(در برگه جدید باز می شود). همانطور که از نام آن پیداست، freesound یک پایگاه داده عظیم از جلوه های صوتی رایگان است. آنها به هر دو معنی کلمه رایگان هستند: شما برای دانلود آنها هیچ هزینه ای نمی پردازید و آزاد هستید که بدون محدودیت از آنها هر طور که می خواهید استفاده کنید.

با این حال، مرور صدای آزاد اغلب شبیه یک موقعیت “سوزن در انبار کاه” است. برخی از جواهرات واقعی در آنجا وجود دارد، اما برای پیدا کردن آنها باید سنگ های زیادی را غربال کنید.

از طرف دیگر، گزینه های پولی وجود دارد. من استفاده کردم اتصال(در برگه جدید باز می شود) برای پیدا کردن این نمونه “ماشین های صنعتی” برای توپ مرمر در صفحه تایید استفاده کردم:

لطفا صدای این ویدیو را فعال کنید! ❤️

در نهایت، کاری که من بیشتر انجام می دهم این است در حال ضبط جلوه های صوتی خودم! بیشتر نمونه‌هایی که در این بخش به آن‌ها خواهیم پرداخت، توسط من با استفاده از ضبط‌کننده زوم دستی، و آزمایش اشیاء تصادفی در محیط خود، ضبط شده‌اند. این نه تنها فوق العاده سرگرم کننده است، بلکه می تواند بهترین نتایج را ایجاد کند.

بیایید در مورد برخی از ترفندهای صوتی که در این صفحه استفاده کردم صحبت کنیم.

پیوند به این عنواننمونه های متعدد

یکی از تکنیک های مورد علاقه من داشتن است نسخه های متعدد در هر صدا برای به دست آوردن تغییرات طبیعی.

توضیح این موضوع با نمایش ساده تر خواهد بود. سعی کنید نوار لغزنده را با صدا روشن بکشید. برای شنیدن تفاوت بین دو حالت سوئیچ کنید.

حالت:

را تک نمونه هر بار که مقدار لغزنده تغییر می کند دقیقاً همان صدا را پخش می کند نمونه های متعدد حالت به طور تصادفی یکی از پنج صدایی را که هر بار ضبط کرده ام انتخاب می کند. این یک تفاوت ظریف است، اما رویکرد چند نمونه برای من کمی کمتر رباتیک و کمی طبیعی تر به نظر می رسد. به خصوص زمانی که نوار لغزنده را به سرعت می لغزند.

به همین دلیل است که من طرفدار بزرگ ضبط صداهای خودم هستم. اکثر بانک‌های صوتی موجود، یک «نسخه» از یک صدا را در اختیار شما قرار می‌دهند، اما وقتی صدای خود را ضبط می‌کنیم، می‌توانیم آن را کنار هم قرار دهیم. پالت روی نمونه ها

پیوند به این عنواننمونه های روشن/خاموش

برای دکمه‌ها، وقتی دکمه فشار داده می‌شود، یک صدا پخش می‌کنم و وقتی آزاد می‌شود یک صدای جداگانه پخش می‌شود:

برای ساختن این نمونه ها، سعی کردم دسته ای از دکمه ها را روی دستگاه های مختلفی که در اطراف خانه داشتم فشار دهم. وقتی چیزی پیدا کردم که با UI مطابقت داشت، خودم را با فشار دادن چند بار ضبط کردم و بهترین نمونه ها را انتخاب کردم.

مانند مثال قبلی، من هر بار دقیقاً همان صدا را پخش نمی کنم. من در مجموع 6 نمونه (3 فشار، 3 رهاسازی) دارم.

به طور مشابه، چوب جادویی از یک نمونه پیستون استفاده می‌کند و من نمونه را به گونه‌ای تقسیم می‌کنم که وقتی ماوس را فشار می‌دهیم، نیمه اول صدا و وقتی ماوس را فشار می‌دهیم نیمه دوم صدا را پخش می‌کند:

لطفا صدای این ویدیو را فعال کنید! ❤️

پیوند به این عنواننمونه های پیشرفت

یکی از تخم مرغ های عید پاک در سینت سایزر توانایی “کشیدن” یک دکمه مخفی است:

لطفا صدای این ویدیو را فعال کنید! ❤️

برای ملموس تر کردن این حس، یک سری کلیک رو به بالا ثبت کردم. به طور خاص، من یک خودکار را در امتداد باله های پلاستیکی رطوبت سازم کشیدم که به طور طبیعی با کوتاه شدن باله های پلاستیکی به سمت بالا، بالا آمد.

پیوند به این عنوانقلاب صدای استفاده من

اگر یک توسعه دهنده React هستید و می خواهید شروع به اضافه کردن جلوه های صوتی به پروژه های خود کنید، من یک کتابخانه کوچک دارم که می تواند کمک کند! چند سال پیش قلاب کاربری را که استفاده می کنم باز کردم، استفاده از صدا(در برگه جدید باز می شود).

زیر کاپوت استفاده شده است Howler.js(در برگه جدید باز می شود)، یک کتابخانه جاوا اسکریپت قدیمی و آزمایش شده برای پخش صداها. بنابراین من تمام موارد صوتی سخت را به آنها واگذار می کنم.

برای تعیین انتظارات: این پروژه ای نیست که من فعالانه آن را حفظ کنم، به معنای سنتی. من واقعاً به مشکلات یا روابط عمومی ها نگاه نمی کنم. اما من از آن در پروژه های خودم استفاده می کنم و برای من خوب کار می کند، بنابراین فکر کردم آن را برای هر کس دیگری که می خواهد از آن استفاده کند در دسترس قرار دهم!

قبل از شروع دوره، من یک لیست انتظار داشتم که کاربران می توانستند در آن ثبت نام کنند. آنها پس از وارد کردن ایمیل خود، صفحه موفقیت زیر را مشاهده کردند:

به‌طور پیش‌فرض، این افکت بسیار رام است، اما همه چیز می‌تواند با آن بسیار وحشی شود آتش بازی در ثانیه نوار لغزنده در پایین صفحه نمایش. 😄

من این آتش بازی ها را از ابتدا با استفاده از Canvas 2D ایجاد کردم. هیچ کتابخانه اضافی استفاده نشده است. کد صادقانه خیلی ترسناک نیست. این مجموعه ای از ایده های کوچکتر است (مانند مختصات قطبی!) که برای ایجاد چیزی پیچیده به نظر می رسد.

ما این اثر را در دوره خواهیم ساخت. و در این فرآیند، تکنیک های اساسی را که می توان برای ساختن استفاده کرد، یاد خواهید گرفت هر نوع جلوه های تعطیلات

همانطور که قبلاً اشاره کردم، هدف اصلی من از این دوره این است که ابزارهایی را که برای ایجاد آن نیاز دارید به شما ارائه دهم مال خودت تعاملات و انیمیشن ها وب پر از جلوه های قالب نصب شده توسط NPM و الگوهای ایجاد شده توسط ChatGPT است و باعث شادی نمی شوند زیرا همه ما قبلاً آنها را 100 بار دیده ایم.

یک عنصر حیاتی برای هوس است تازگی یک جلوه جذاب و لذت بخش به سرعت عادی و خسته کننده می شود! بنابراین من واقعاً علاقه ای به ارائه تعداد انگشت شماری “فرمول های فانتزی” یا تکه هایی ندارم که بتوانید آنها را کپی/پیست کنید. من می‌خواهم بلوک‌های اولیه‌ای را به شما آموزش دهم که می‌توانید برای طراحی و ساخت افکت‌هایی که منحصر به شما هستند، استفاده کنید. ✨

آتش بازی بی صدا؟

شاید متوجه شده باشید که آتش بازی هیچ صدایی ایجاد نمی کند. با توجه به اینکه همه چیز چقدر سرزنده است، ممکن است غیبت عجیبی به نظر برسد!

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

من در مورد اضافه کردن یک دکمه بی صدا فکر کردم، اما برخی از کاربران ممکن است متوجه آن نشوند، به خصوص اگر حواسشان پرت شود. من اینطور فکر می کنم ایده آل راه حل یک دکمه “بی صدا” خواهد بود، بنابراین آتش بازی بی سر و صدا شروع می شود، اما همچنان می تواند صدای خود را پخش کند… اما ایجاد صداهای آتش بازی واقعی دشوار به نظر می رسد و ارزش آن را ندارد که یک ویژگی روشن شود.

پس از همه، ما نیازی به افزودن جلوه های صوتی نداریم همه چیز!

موارد بسیار بیشتری وجود دارد که می‌توانم به اشتراک بگذارم، مانند فیزیک محتوای انفجاری یا ده‌ها نفری که ترجمه‌هایی را برای شعار اصلی ارسال کرده‌اند، اما این پست وبلاگ در حال حاضر بسیار طولانی است. 😅

اگر در مورد این صفحه فرود یا دوره آینده من سؤالی دارید، در صورت تمایل به من شلیک کنید پیام(در برگه جدید باز می شود)، یا مرا بزن بلوز(در برگه جدید باز می شود).

و اگر واقعاً می خواهید یاد بگیرید که چگونه این کارها را از مفهوم تا اجرا انجام دهید، باید دوره را بپیوندید! ثبت نام اکنون باز است. در اینجا می توانید اطلاعات بیشتری کسب کنید:

با تشکر برای خواندن! ❤️