4

это для украшения

первые ссылки в google дают такие цифры (ниже): --bounce-easing: linear( ... )

Скорее всего, все анимации собраны здесь: https://fullystacked.net/posts/linear/

причем, как будто других не существует. Только эти 4 прыжка. Именно эти цифры временной функции показаны здесь

linear-bounce-example.svg

https://yadi.sk/d/UZ_AkLkitSY2HA (SVG)

% -- время, числа -- прогресс по Y. Сама анимация работает, похожа на правильную параболу. Но меня убивает принцип ее разделения по 4 точкам, которые выбраны, очевидно, случайным образом.

Для меня загадка, откуда выбраны эти временные точки. Есть 4 прыжка, разделите на 4 параболы и нет претензий

Вот появилось у меня желание увеличить число прыжков. А не получится. Здесь точки действительно рассчитаны по параболе. И любое смещение, особенно по времени, вызывает сильные отличия от реального поведения: появляются либо дергания, либо торможения.

Было бы лучше, если контрольные точки четко соответствовали прогрессу 1.

Меня интересуют контрольные точки, привязанные к 1, которые можно вставить в CSS.

Даже по картинкам в Google можно найти цифры с таймингами, чуть ли не от руки нарисованы, именно на отскоках (на 1). Можно через Excel рассчитать саму параболу.

KeyFrames for Bounce

Метод топорный , но ... В принципе , этого почти достаточно. Но спад активности будет линейный. Кто в курсе, по какой кривой здесь Максимумы ? :)

Вопрос: как заставить кота прыгать повыше и подальше ? :)

body {overflow: hidden }

:root {
   --toll: 160px;
   --bounce-easing: linear(
0,  0.004,  0.016,  0.035,  0.063,  0.098,  0.141 13.6%,
0.25,   0.391,  0.563,  0.765,  1,  0.891 40.9%,
0.848,  0.813,  0.785,  0.766,  0.754,  0.75,   0.754,  0.766,  0.785,  0.813,  0.848,  0.891 68.2%,
1  72.7%,
0.973,  0.953,  0.941,  0.938,  0.941,  0.953,  0.973,  1,  0.988,  0.984,  0.988 100%  )
  }
    
.element { animation: bounce 5s var(--bounce-easing) infinite }
    
@keyframes  bounce { 
           to { transform: translateY(calc(100vh - var(--toll))) } }

#Shape {
       position: absolute;
       left: 0px;
       top: 0px;
       width: 150px;
       height: 160px; }
<body>
<script src="https://seregasmyfavoritesites.on.drv.tw/Site/CSS-JS/jquery-3.7.0.min.js"></script>
<script src="https://seregasmyfavoritesites.on.drv.tw/Site/CSS-JS/18.3.min.js"></script>

<div id="Shape" onmouseenter="Animate('Shape', '400', '', '', '', '', 3000, '')" onmouseleave="Animate('Shape', '0', '', '', '', '', 3000, '')">
   <img class="element" src="https://seregasmyfavoritesites.on.drv.tw/Site/Tihomir/images/04046239-1920-150x160.jpg">
</div>
</body>

Благодарности: @Grundy

2

2 ответа 2

1

Поступали предложения вообще избавиться от JS.

Dovgal Dima абсолютно прав !

Но мне важно было добить именно ту функцию. Дмитрий помог и я ему благодарен.

А вот ответ для любителей CSS:

body {
  overflow: hidden;
}

:root {
  --toll: 160px;
  --wide: 150px;
  --bounce-easing: linear(0.04  ,   0.36    ,   1   5%,
0.552   ,   0.328   ,   0.3 ,   0.328   ,   0.552   ,   1   15%,
0.686   ,   0.53    ,   0.51    ,   0.53    ,   0.686   ,   1   25%,
0.78    ,   0.671   ,   0.657   ,   0.671   ,   0.78    ,   1   35%,
0.846   ,   0.77    ,   0.76    ,   0.77    ,   0.846   ,   1   45%,
0.892   ,   0.839   ,   0.832   ,   0.839   ,   0.892   ,   1   55%,
0.925   ,   0.887   ,   0.882   ,   0.887   ,   0.925   ,   1   65%,
0.947   ,   0.921   ,   0.918   ,   0.921   ,   0.947   ,   1   75%,
0.963   ,   0.945   ,   0.942   ,   0.945   ,   0.963   ,   1   85%,
0.974   ,   0.961   ,   0.96    ,   0.961   ,   0.974   ,   1   95%,
0.982   ,   0.973   ,   0.972   ,   0.973   ,   0.982   ,   1   305%
)
}

#Shape {
  position: absolute;
  left: 0px;
  top: 0px;
  width: var(--wide);
  height: var(--toll);
  transition: 5s ease
}

#Shape:hover {
  transform: translateX(calc(100vw - var(--wide))) rotate(30deg);
  opacity: 0.5;
  transition: transform 5s ease, opacity 6s;
}

.cat {
  animation: bounce 10s var(--bounce-easing) infinite;
}

@keyframes bounce {
  to {
    transform: translateY(calc(100vh - var(--toll)))
  }
}
<div id="Shape">
  <img class="cat" src="https://seregasmyfavoritesites.on.drv.tw/Site/Tihomir/images/04046239-1920-150x160.jpg">
</div>

1

// Получаем ширину доступного окна (ширину экрана)
const windowWidth = window.innerWidth;

// Получаем значение CSS-переменной --wide
const catWidthValue = getComputedStyle(document.documentElement).getPropertyValue('--wide').trim();

// Преобразуем catWidthValue в число, предполагая, что оно задано в пикселях
const catWidthInPixels = parseFloat(catWidthValue);

// Рассчитываем разницу между шириной окна и шириной "кота"
const difference = windowWidth - catWidthInPixels;

// Вызываем функцию Animate, передавая разницу как аргумент для b (горизонтального смещения)
//Animate('Shape', difference + 'px', '', '', '', '', 3000, '');
:root {
       --toll: 160px;
       --wide: 150px;
       --bounce-easing: linear(0.04 ,   0.36    ,   1   5%,
0.552   ,   0.328   ,   0.3 ,   0.328   ,   0.552   ,   1   15%,
0.686   ,   0.53    ,   0.51    ,   0.53    ,   0.686   ,   1   25%,
0.78    ,   0.671   ,   0.657   ,   0.671   ,   0.78    ,   1   35%,
0.846   ,   0.77    ,   0.76    ,   0.77    ,   0.846   ,   1   45%,
0.892   ,   0.839   ,   0.832   ,   0.839   ,   0.892   ,   1   55%,
0.925   ,   0.887   ,   0.882   ,   0.887   ,   0.925   ,   1   65%,
0.947   ,   0.921   ,   0.918   ,   0.921   ,   0.947   ,   1   75%,
0.963   ,   0.945   ,   0.942   ,   0.945   ,   0.963   ,   1   85%,
0.974   ,   0.961   ,   0.96    ,   0.961   ,   0.974   ,   1   95%,
0.982   ,   0.973   ,   0.972   ,   0.973   ,   0.982   ,   1   105%
)
      }

#Shape {
   position: absolute;
   left: 0px;
   top: 0px;
   width: var(--wide);
   height: var(--toll); }

.cat {
       animation: bounce 10s var(--bounce-easing) infinite; }

@keyframes  bounce { 
       to { transform: translateY(calc(100vh - var(--toll) ) ) } }
<script src="https://seregasmyfavoritesites.on.drv.tw/Site/CSS-JS/jquery-3.7.0.min.js"></script>
<script src="https://seregasmyfavoritesites.on.drv.tw/Site/CSS-JS/18.3.min.js"></script>


<div id="Shape"
    onmouseenter="Animate('Shape', difference, '', '', '', 70, 3000, 30+'deg');return false;" 
    onclick="Animate('Shape', 100, '', '', '', 100, 4000,  0+'deg');return false;">
    <img class="cat" src="https://seregasmyfavoritesites.on.drv.tw/Site/Tihomir/images/04046239-1920-150x160.jpg">
</div>

Excel, сделал 10 прыжков, по 10 (здесь на 7) точек по простой формуле Y=1-(1-X^2)u^n, где u - упругость, n - прыжок. Получилось на (0.5+10)*10= 105 точек. % только в крайних положениях парабол. Как и задумывалось. Если есть Excel, значит есть коэффициент упругости.

Если уж вдаваться в подробности, то проценты размещены равномерно, а в жизни и на рисунках идет замедление горизонтального перемещения. Это можно легко сделать, просто подогнав проценты у дна под картинку. Именно в таком виде, имея равномерные отскоки от поверхности, можно регулировать горизонтальное поведение, не нарушая физику. Последний процент легко переваривается значениями больше 100% -- можно немного увеличить паузу в конце (кот закончил прыгать, откатился и все). Сделано на 5, 7, 10 точек/парабола. Чтобы уменьшить коТ.

Bounce.xlsx Функция Animate()

Благодарности: Dovgal Dima

7
  • Обидно, что на мобильном события onmouseenter , onmouseover не реагируют на тап. Не придумали еще как совместить мышку с тачскрином
    – serega da
    Commented 17 сент. 2023 в 7:04
  • 1
    Для сенсорного экрана в JS есть события touchstart, touchmove, touchend Commented 29 сент. 2023 в 17:19
  • 1
    Это сценарии JS для работы с сенсорным экраном, придеться на каждый использовать addEventListener и в нем вызвать функцию которая будет выполняться по каждому событию function myFunc() {console.log("моя функция");} document.addEventListener("touchstart", function() {myFunc()}); Commented 1 окт. 2023 в 6:15
  • 1
    @DovgalDima не нужно писать отдельно события для touch и mouse, есть pointer события Я даже видео выпустил, чтобы люди перестали пользоваться mouse и touch событиями Commented 28 окт. 2023 в 15:25
  • 1
    @DovgalDima единственное, чтобы нормально всё работало, нужно CSS свойство touch-action устанавливать в none, если хотим, чтобы все события тача фиксировались, или, например, pan-y ставить, чтобы запретить скролл по y, что часто применяют для слайдеров, которые должны фиксировать события только по оси X, но если крутят по Y, то, нужно, чтобы сайт просто скроллился Commented 28 окт. 2023 в 15:38

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.