Воспроизвести Gif при наведении курсора и приостановить Gif при наведении мыши без замены изображений?

Я пытаюсь найти пример кода, который позволяет пользователю анимировать gif при наведении курсора мыши и приостанавливать его при отсутствии мыши. Я видел много руководств, говорящих об этом, но я хочу другого эффекта.

Я заметил, что большинство гифок «сбрасываются» при нажатии мыши. То есть либо гифка закрывается обычным изображением, либо анимация возвращается к началу. Чего я хотел бы добиться, так это более плавной «паузы», которая позволит вам начать с того места, где вы остановились, без использования изображения-заполнителя. Аналогично примеру на этой странице:

http://www.valhead.com/2013/03/11/animation-play-state/

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

Я не знаю, возможно ли это с gif, потому что в этом примере используются базовые формы css, но должен быть какой-то способ приостановить gif при выводе мыши и возобновить при наведении мыши, не закрывая изображение при циклической анимации? Если нет, есть ли способ использовать файл фильма, который останавливается при наведении курсора мыши и воспроизводится с того места, где он остановился, когда вы наводите на него указатель мыши?

Спасибо!

РЕДАКТИРОВАТЬ: благодаря @brbcoding и его гениальности эта проблема была решена! Подробности решения можно найти либо в сообщениях ниже, либо в его сообщении в блоге: http://codyhenshaw.com/blog/2013/12/17/faux-animated-gifs-with-css3-keyframes/


html css gif mouseover movie
person XavierTheGreat    schedule 17.12.2013    source источник
comment
Он не использует gif. Он использует CSS3   -  person Zword    schedule 18.12.2013
comment
Учебник, на который вы ссылаетесь, касается анимации CSS, а не GIF.   -  person Pavlo    schedule 18.12.2013
comment
Насколько я знаю, вы ничего не можете сделать для создания анимированных GIF-файлов в CSS. Однако вы можете использовать CSS-анимацию для эмуляции анимированных GIF-файлов и достижения такого эффекта.   -  person Zach Lysobey    schedule 18.12.2013
comment
Я бы разбил ваш gif на отдельные кадры, а затем использовал ключевые кадры для его анимации. Тогда вы можете остановиться, где хотите.   -  person brbcoding    schedule 18.12.2013
comment
Я не думаю, что OP пытался представить эту ссылку как анимированный .gif, но использовал ее как пример эффекта, которого он пытался достичь   -  person Zach Lysobey    schedule 18.12.2013
comment
Вот URL-адрес codepen, который предоставляет сайт, на который вы ссылались: /а>   -  person Zword    schedule 18.12.2013
comment
Я заметил, что большинство гифок сбрасываются при нажатии мыши. Бьюсь об заклад, это поведение зависит от браузера, потому что я не вижу, чтобы это происходило в связанной демонстрации. Редактировать: подождите! gif не сбрасываются, они просто зацикливаются независимо от указателя.   -  person Theraot    schedule 18.12.2013
comment
@Theraot Могу поспорить, что он говорит о других примерах, включая фактические .gif, поскольку я вижу такое же поведение на сайтах, которые используют этот эффект (но не могу вспомнить, какие именно). Связанная демонстрация не вовсе не является .gif и должна одинаково работать во всех современных браузерах.   -  person Zach Lysobey    schedule 18.12.2013
comment
@ZachL Я думаю, что это анимация CSS, например логотип davidwalsh.name.   -  person Theraot    schedule 18.12.2013
comment
@Theraot да, как отмечалось в нескольких комментариях выше, связанная демонстрация использует анимацию CSS, не .gifs. Я указывал, что я видел сайты, которые отображают анимированные GIF-файлы, как описывает OP, где они являются статическими изображениями, а при наведении они заменяются соответствующим gif.   -  person Zach Lysobey    schedule 18.12.2013
comment
Зак совершенно прав. Я тоже видел эти специальные гифки, которые останавливаются и возобновляются при наведении без замены изображений. Также, как сказал Зак, я использовал ссылку CSS только в качестве примера, я прекрасно понимаю, что это CSS, о чем я сказал в своем OP. Я просто использовал это в качестве примера, потому что у меня не было другого способа показать вам, ребята, что я имел в виду. Я хотел бы, чтобы у меня были лучшие ссылки для показа, и я приношу свои извинения за путаницу.   -  person XavierTheGreat    schedule 18.12.2013

Ответы (2)


arrow_upward
17
arrow_downward

Итак, я немного подумал об этом... Вы могли бы сделать что-то вроде этого:

Сначала разбейте GIF на несколько изображений, а затем анимируйте их с помощью ключевых кадров CSS.

#faux-gif {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    background-image: url(http://i.imgur.com/E2ee6fI.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    width: 300px;
    height: 300px;
    /* animation: giffy 0.5s infinite linear; */
    /* no fade between frames */
    animation: giffy 0.5s infinite steps(1);
}

#faux-gif:hover {
    animation-play-state:paused;
}

@keyframes giffy {
    0%   { background-image: url('http://i.imgur.com/E2ee6fI.gif'); } 
    15%  { background-image: url('http://i.imgur.com/JIi0uul.gif'); }
    30%  { background-image: url('http://i.imgur.com/owNGnNN.gif');}
    45%  { background-image: url('http://i.imgur.com/2Ii6XOz.gif'); }
    60%  { background-image: url('http://i.imgur.com/ZmQBrQ5.gif'); }
    75%  { background-image: url('http://i.imgur.com/iAsfHyY.gif'); }
    90%  { background-image: url('http://i.imgur.com/AJwRblj.gif'); }
    100% { background-image: url('http://i.imgur.com/fx5wUNY.gif'); }
}

ДЕМО

Версия JavaScript... Не очень тщательно тестировалось, но это будет основной идеей.

window.onload = function() {

    function FauxGif(element, frames, speed) {
        this.currentFrame = 0,
        this.domElement   = element,
        this.frames       = frames || null,
        this.speed        = speed  || 200;
        this.interval;
        this.init();
    }

    FauxGif.prototype = {
        init: function() {
            // set the first one to the first image
            console.log(this.frames[0])
            this.domElement.style.backgroundImage = "url(" + this.frames[0] + ")";
        },
        pause: function() {
            clearInterval(this.interval);
        },
        resume: function() {
            var that = this;

            that.interval = setInterval(function(){
                that.currentFrame < that.frames.length - 1 ? that.currentFrame++ : that.currentFrame = 0;
                that.domElement.style.backgroundImage = "url(" + that.frames[that.currentFrame] + ")";
            }, this.speed);
        }
    }

    var frames = [
                    'http://i.imgur.com/E2ee6fI.gif',
                    'http://i.imgur.com/JIi0uul.gif',
                    'http://i.imgur.com/owNGnNN.gif',
                    'http://i.imgur.com/2Ii6XOz.gif',
                'http://i.imgur.com/ZmQBrQ5.gif',
                'http://i.imgur.com/iAsfHyY.gif',
                'http://i.imgur.com/AJwRblj.gif',
                'http://i.imgur.com/fx5wUNY.gif'
            ]

var elem = document.querySelector('#faux-gif'),
    gif  = new FauxGif(elem, frames);


elem.addEventListener('mouseenter', function(){
    gif.resume()
});

elem.addEventListener('mouseleave', function() {
    gif.pause();
});
}

ДЕМО

person brbcoding    schedule 17.12.2013
comment
Интересный! Это что-то близкое к тому, о чем я думал. На самом деле это почти ИМЕННО то, о чем я говорил. Однако я заметил, что codepen не работает в Firefox. Может быть, есть альтернативный запасной вариант для этого? Также есть ли способ, чтобы изображение начиналось с паузы и воспроизводилось при наведении курсора мыши? Что-то противоположное тому, что достигается в ручке кода, но с сохранением этой функции паузы. Очень ценю всех вас, ребята, изучающих это! - person XavierTheGreat; 18.12.2013
comment
Хммм ... Я не знаю, знаю ли я способ заставить его работать в разных браузерах, кроме некоторых js. Возможно, вы можете просто создать какую-то функцию swapImage(), которая делает то же самое (просто устанавливает фоновое изображение). Я добавлю функцию утром, когда вернусь за компьютер. То же самое с обратными операциями. Боюсь, вам нужно будет сделать это с помощью JavaScript. - person brbcoding; 18.12.2013
comment
Javascript в порядке, если это возможно. Как я уже говорил, не парьтесь слишком сильно, если это невозможно сделать. Я даже не думал, что это возможно, так что вы, ребята, уже взорвали мне мозг, ха-ха. Пожалуйста, не торопись! - person XavierTheGreat; 18.12.2013
comment
Удивительно, удачи вам тогда, когда вы еще раз взглянете на это. P.S. - Полностью добавил ваш блог в закладки и подписался на вас в твиттере! - person XavierTheGreat; 18.12.2013
comment
Дополнительный кредит (смеется) - тоже не обязательно, но, возможно, также может быть способ, чтобы изображения менялись друг на друга без выцветания? Я видел этот старый пост по аналогичному вопросу. stackoverflow.com/ вопросов/15469036/ Если это невозможно, не беспокойтесь, просто эстетический запрос здесь! Еще раз спасибо! - person XavierTheGreat; 18.12.2013
comment
У меня все еще не было свободной минуты, чтобы посмотреть на js, но вы можете удалить исчезновение, просто изменив animation: giffy 0.5s infinite linear на animation: giffy 0.5s infinite steps(1). - person brbcoding; 19.12.2013
comment
@XavierTheGreat добавил версию js. Вы захотите проверить это, я просто написал это очень быстро. Кроме того, в ваших интересах также предварительно загрузить изображения. Вы, вероятно, увидите пустые кадры, если вы этого не сделаете. - person brbcoding; 19.12.2013
comment
Успешно справился! Большое спасибо за фальшивый запасной вариант Firefox! Это определенно станет полезным для тех, у кого ненадежные браузеры. Ты спасатель! - person XavierTheGreat; 19.12.2013
comment
Это фантастическое решение. Я просто хочу отметить, что он не только выполняет замену одного изображения, но и выполняет замену изображения для каждого кадра. Это уже не GIF-анимация. Это спрайт, полный статических изображений, меняющихся местами для каждого кадра. Это не должно умалять ответа, хотя. Как я уже писал, это фантастика. - person Scott; 21.12.2013
comment
привет @brbcoding, спасибо за код JavaScript. Это очень полезно. Однако то, что я действительно хочу сделать, это сопоставить синхронизацию изображений с музыкой, поэтому интервал варьируется от кадра к кадру. Какой самый простой способ сделать это? - person practicemakesperfect; 04.04.2016

arrow_upward
1
arrow_downward

Нет. Гифки не могут «видеть» мышь. Это просто изображения, которые отображаются. Чтобы приостановить анимированный gif, необходимо заменить похожее изображение, которое не является анимированным.

В опубликованном виде есть плагины jquery для анимации спрайтов, состоящих из статических изображений. Эти подключаемые модули позволят останавливать спрайты при наведении курсора мыши.

person Scott    schedule 17.12.2013
comment
В поисках альтернативы я обнаружил GreenSock [бесплатно и с открытым исходным кодом (хотя и не бесплатно)] может стоит посмотреть. - person Theraot; 18.12.2013
comment
Ах спасибо за этот ответ. Я буду больше изучать метод jquery. Я не видел никаких плагинов для этого, так что это тоже помогает. Я посмотрю на это и посмотрю, принесет ли это пользу. - person XavierTheGreat; 18.12.2013