1

http://proudly.ru/febotelecom/#bl-services Есть блок с геометрическими фигурами, они вращаются. Задача сделать ускорение вращения при скроллинге вверх или вниз. В целом, в примере это уже работает, но ощущается "тяжесть" анимации + глюки на apple устройствах.

  1. Сейчас вращение реализовано через setInterval и модификацию свойства transform rotate, соответственно при скролле это значение также меняется.
    jQuery.fn.rotate = function(degrees) {
        $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                     '-moz-transform' : 'rotate('+ degrees +'deg)',
                     '-ms-transform' : 'rotate('+ degrees +'deg)',
                     '-o-transform': 'rotate(' + degrees + 'deg)',
                     'transform' : 'rotate('+ degrees +'deg)',
                     'zoom' : 1});
        return $(this);
    };
    
    var rotation = 0;
    var rotationLock = false;
    var rotationTid;
    setInterval(function() {
        if (!rotationLock || !__isMobile) {
            rotation += 0.5;
            $('#figure1').rotate(rotation);
            $('#figure2').rotate(rotation);
            $('#figure3').rotate(rotation);
        }
    }, 50);
    scrollCallbacks.push(function() {
        rotation += 1;
        $('#figure1').rotate(rotation);
        $('#figure2').rotate(rotation);
        $('#figure3').rotate(rotation);
        rotationLock = true;
        clearTimeout(rotationTid);
        rotationTid = setTimeout(function() {
            rotationLock = false;
        }, 100);
    });
  1. Также была попытка реализовать это через css анимацию, а затем при скролле менять animation-duration, но эта попытка вышла более глючной.
    animation-name: rotation180;
    animation-duration: $speed;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
    @keyframes rotation180 { to { transform: rotate(180deg); }}

Подскажите, есть ли у кого-то реальный опыт в таких интерактивных анимациях? Очень хочется всё оптимизировать до ощущения невероятности)

1 ответ 1

0

Попробуйте requestAnimationFrame, там fps адаптируется под устройство.

И не прибавлять константу, а опираться на текущее время (от какого-то события): rot = f(t)

12
  • Сергей, спасибо. С requestAnimationFrame понял, спасибо) По поводу константы, вы могли бы чуть подробнее дать пояснение? 19 авг 2020 в 21:10
  • requestAnimationFrame будет вызываться адаптивно, а не по жескому графику. Соответственно вещи типа += 0.5 будут работать по-разному: то, что происходит с колесом будет зависить от того, как часто его рисуют. Может оно и так покатит. Но, чтоб было более натурально, можно взять формулу с физики "равноускоренное вращение", зависимость угла поворота от времени, как-то так: dt=(t-t0); rot=rot0+a_half*dt*dt -- пришел кадр, смотрим сколько время, рисуем по формуле; t0,rot0 -- событие начала вращения. 20 авг 2020 в 8:57
  • 1
    Сергей, физика – это однозначно круто!) Если я правильно помню курс физики, что равноускоренное — означает, что существует постоянное ускорение движения, в нашем случае вращения. Если я тут прав - ок. Далее сама формула: gyazo.com/b8d3c5f9ede6f25926cdff8ddb51a66b Верно ли я ее идентифицировал?) Если да: В вашем примере получается, что a_half — это ускорение деленное на 2? t0 - это какой-то таймстэмп, который мы запомнили при инициализации скрипта и начале движения? rot0 - в нашем случае 0 (так как начинаем вращение с самого начала, далее присваивая элементу transform)? 20 авг 2020 в 13:16
  • да), но rot0 может быть не 0, если это не первое движение: вращение уже было, или есть, затем происходит событие, которое можно считать локальным "0", например начинают скролить в другую сторону. 20 авг 2020 в 13:31
  • успел спрограммировать равноускоренное вращение, после чего осознал, что это не совсем то, что нужно) Задача ведь изначально в следующем: фигуры вращаются без ускорения в одном и том же направлении, только в случае скролла (причем не важно в какую сторону) они в каждый такой момент скролла должны приобретать небольшое ускорение в ту же сторону вращения. Как бы это правильнее реализовать? :| 20 авг 2020 в 23:32

Ваш ответ

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

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