CSS-крива плавності в стилі відскоку
Створіть власну функцію плавності CSS cubic-bezier(), перетягуючи дві контрольні точки, переглядайте результат поруч із лінійним рухом, а тоді копіюйте готове значення.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
На цій сторінці генератор відкривається з уже завантаженими значеннями x1=0.68, y1=-0.55, x2=0.265, y2=1.55 — кривою з виходом за межі, яку деякі бібліотеки плавності називають easeOutBack. Від'ємне значення y1 та y2 понад 1 — саме те, чому в попередньому перегляді анімації нижче кулька відходить назад за початкову точку й виходить за кінцеву, перш ніж стабілізуватися; перетягніть будь-який маркер або відредагуйте числа, щоб підсилити чи пом'якшити ефект.
Якщо відверто: одна крива cubic-bezier() має лише дві контрольні точки, тож вона здатна зімітувати лише один рух із виходом за межі та стабілізацією, а не справжній фізичний багаторазовий відскок із кількома затухаючими стрибками. Для буквального ефекту м'ячика, що стрибає, знадобиться кілька ключових кадрів або з'єднаних сегментів steps() — ця крива є найближчим, що можна отримати за допомогою однієї transition-timing-function в одному рядку.
Такого одного виходу за межі часто цілком достатньо для більшості «пружних» інтерфейсів: кнопка, яка злегка вилітає за свій звичайний розмір, модальне вікно, що виходить за межі й лише тоді стабілізується, картка, яка «вистрибує» на місце. Копіюйте значення як є для цього енергійного відчуття або зсуньте y1 ближче до 0, а y2 ближче до 1, щоб зменшити вихід за межі.