Как правильно рассчитать остановки и возобновить расчет анимации в моем проекте - PullRequest
0 голосов
/ 18 ноября 2018

У меня проблема с приостановкой истории .

ниже приведены некоторые пункты:

  1. не нажимая на следующую историю pause работает отлично

  2. когда next story равно clicked история перейдет к следующей story сэто код window.location.href = '#'+storyId;

  3. после next story clicked возникает проблема с паузой

  4. пауза может быть с space bar или right click (contextmenu)

для паузы эти функции вызываются следующим образом:

  1. toggleAnimation()

  2. pauseAnimation(); в этой функции этот код editor.postMessage( {'request':command.pause}, getDomain() ); вызывает listener();

  3. listener() с командой command.pause это входит в этот блок переключателей

    case command.pause : requestAnimationFrame(localPauseAnimation); play=false; syncPrompters(); break;

  4. localPauseAnimation();

ниже кодответственный за анимацию (внутри animation()):

 styleSheet.insertRule('\
            .prompt.move {\
                transform: translateY('+destination+'px) scale('+(flipH?-1:1)+','+(flipV?-1:1)+') !important;\
                transition: transform '+time+'ms '+curve+';\
        }', 0);

Я работаю с этим проектом с открытым исходным кодом https://imaginarysense.github.io/Teleprompter-Core/ этомне очень трудно взломать этот код

шагов для воспроизведения:

  1. извлечь скачанную папку (https://www.dropbox.com/s/e7c2d4fynwl1d6a/Teleprompter-Core-master.tar.gz?dl=0) найтиindex.html запустить в браузере

  2. нажать Prompt It в правом верхнем углу

  3. (подождите 10 секунд) истории придут слайды вв окне нажмите space bar, он остановится правильно

  4. при нажатии кнопки next stores (красный цвет), затем нажмите space bar для пауза истории будут прыгать сейчаспри последующем нажатии space bar

  5. весь код для анимации можно найти в js/teleprompter.js

весь код для анимацииможно найти в js/teleprompter.js

Вопрос: пауза и воспроизведение должны работать как обычно, без скачков

ссылка на проект: https://www.dropbox.com/s/e7c2d4fynwl1d6a/Teleprompter-Core-master.tar.gz?dl=0

1 Ответ

0 голосов
/ 22 ноября 2018

Анимация воспроизведения и паузы зависит от положения курсора.Текущее значение зелья курсора вычисляется по верхней позиции div с именем класса «move move».Я думаю, что проблема со значением верхней позиции подсказки div.Верхнее значение приглашения div изменяется при вызове window.location.href = '#' + storyId; .Таким образом, текущая позиция курсора будет изменена.Следующая функция отвечает за вычисление позиции курсора.

function getCurrPos(obj) {
    // There's more than a way to calculate the current position.
    // This is the original method, slower and more reliable. Used only for Intergalactic Style, where the other method fails.
    if (promptStyleOption===4) {
        if (!obj)
            obj=prompt;
        var computedStyle = window.getComputedStyle(obj, null),
            theMatrix = computedStyle.getPropertyValue("transform"),
        // Reading data from matrix.
            mat = theMatrix.match(/^matrix3d\((.+)\)$/);
        if (mat) return parseFloat(mat[1].split(', ')[13]);
            mat = theMatrix.match(/^matrix\((.+)\)$/);
        return mat ? parseFloat(mat[1].split(', ')[5]) : 0;
    }
    // This method is faster, and it's prefered because it generates less lag. Unfortunatelly it fails to calculate in 3D space.
    else
        return prompt.getBoundingClientRect().top;
}

Эта проблема будет решена, если мы изменим функцию getCurrPos следующим образом.

function getCurrPos(obj) {
        // There's more than a way to calculate the current position.
        // This is the original method, slower and more reliable. Used only for Intergalactic Style, where the other method fails.
            if (!obj)
                obj=prompt;
            var computedStyle = window.getComputedStyle(obj, null),
                theMatrix = computedStyle.getPropertyValue("transform"),
            // Reading data from matrix.
                mat = theMatrix.match(/^matrix3d\((.+)\)$/);
            if (mat) return parseFloat(mat[1].split(', ')[13]);
                mat = theMatrix.match(/^matrix\((.+)\)$/);
            return mat ? parseFloat(mat[1].split(', ')[5]) : 0;
    }

N: B Эта проблема будетне появляется по умолчанию, когда мы запрашиваем его, устанавливая стиль подсказки на доске.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...