تنظیم ارتفاع موج در انیمیشن مایع با CSS

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

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

دومین نکته مهم، کار با cubic-bezier است که شما را قادر می‌سازد به جای یک خط صاف، یک حرکتی، نرم و روان ایجاد کنید. این مسئله باعث می‌شود حرکت موج به طور طبیعی‌تر به نظر برسد و از ایجاد هر نوع خط ثابت در طول موج جلوگیری می‌شود.

همچنین، افزایش duration (طول زمان) انیمیشن می‌تواند به شما در به دست آوردن نتیجه مطلوب کمک کند. یک زمان کوتاه ممکن است انیمیشن شما را مصنوعی و نا‌منظم نشان دهد، در حالی که یک زمان طولانی‌تر می‌تواند انتقالات را نرم‌تر کند.

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

<style>
  .wave {
    position: relative;
    width: 100%;
    height: 150px;
    background: lightblue;
    overflow: hidden;
  }
  .wave::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 200%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1.3);
    animation: waveMove 3s infinite cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  @keyframes waveMove {
    0% {transform: translate(-50%, -50%) scale(1.3);}
    50% {transform: translate(-45%, -55%) scale(1.35);}
    100% {transform: translate(-50%, -50%) scale(1.3);}
  }
</style>
<div class="wave"></div>

کد بالا چگونگی ایجاد یک انیمیشن موج را نمایش می‌دهد: