Пример реализации анимации плавной прокрутки мобильного терминала Html5

В этой статье представлен пример реализации отмеченной наградами анимации плавной прокрутки на мобильном терминале Html5, а подробности приведены ниже:

анализ потребностей

Ха-ха, это действительно ясно сразу после загрузки динамической картинки.

Это катится, катится, так как же это сделать? Подведем итоги:

На самом деле это очень просто. Самый внешний <div> используется как фиксированное окно, внутренний <ul> управляет движением, а внутренний <li> отображает анимацию.

 <div class=roll id=roll> <ul> <li>Первая структура</li> <li>Вторая структура</li> <li>Третья структура</li> <li>Четвертая структура</li> <li>Третья структура</li> <li>Четвертая структура</ li> <li>Пятая структура</li> <li>Шестая структура</li> <li>Седьмая структура</li> <li>Восьмая структура</li> </ul></div>

Сначала реализуйте базовый стиль CSS

 * { поля: 0; прокладка: 0;}.roll { поле: 100 пикселей авто; высота: 40 пикселей; переполнение: скрыто; граница: 1 пиксель, сплошной аквамарин;}.roll ul {стиль списка: нет;}. рулон ли {строка-высота: 20 пикселей; размер шрифта: 14 пикселей; выравнивание текста: центр;}

Вы можете взглянуть на общий стиль:

метод анимации()

$(selector).animate(styles,speed,easing,callback)

параметр:

стили: обязательный параметр, стиль CSS, который необходимо анимировать (используйте имена в верблюжьем регистре)

скорость: определяет скорость анимации.

@номер:1000(мс)

@string:медленно, нормально, быстро

easing: скорость анимации (качание, линейная)

обратный вызов: функция обратного вызова после выполнения функции

 $(document).ready(function(){ setInterval(function(){ // Добавляем таймер для преобразования каждые 1,5 секунды $(#roll).find(ul:first).animate({ MarginTop:-40px // расстояние каждого движения},500,function(){ //Время движения анимации//$(this) относится к объекту ul, //После сброса ul вставьте первый и второй элементы //в позицию последнего элемента ul $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(this).find(li:first).appendTo(this });

Взгляните на эффект:

Через ключевые кадры в css3 можно получить эффект пропуска шагов. Давайте сначала кратко рассмотрим эту идею.

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

 <div class=roll id=roll> <ul> <li>Первая структура</li> <li>Вторая структура</li> <li>Третья структура</li> <li>Четвертая структура</ li> <li>Пятая структура</li> <li>Шестая структура</li> <li>Седьмая структура</li> <li>Восьмая структура</li> <li>Первая структура</li > <li>Вторая структура</li> </ul></div>

2. Затем подсчитайте, сколько раз нужно прокрутить и сколько секунд за раз. Пример — две прокрутки, что занимает 5 с, поэтому время анимации CSS3 составляет 5 с. Итак, на сколько частей нужно разделить @keyframe? Поскольку это пауза, для каждого свитка требуется две копии, а последняя должна перепрыгнуть, поэтому копия остается только одна, поэтому необходимо 5 * 2 - 1 = 9 копий. Вы узнаете это, посмотрев код:

 /*Здесь не выполняется обработка совместимости*/.roll ul{ list-style: none; анимация: ani 5s линейное бесконечное; /*Анимация ani, 5s, воспроизводится с постоянной скоростью в цикле*/@keyframes ani{ 0 %{margin-top: 0; } 12,5%{margin-top: 0} 25%{margin-top: -40px; 37,5%{margin-top: -40px; } 50%{ маржа-верх: -80 пикселей } 62,5% { маржа-топ: -80 пикселей } 75% { маржа-топ: -120 пикселей } 87,5% { маржа-топ: -120 пикселей } 100% { маржа- top: -160px; /*Последний может прерывать анимацию*/ }}

Если число неопределенно, вам нужно вычислить его динамически и использовать js для динамического добавления @keyframes. В то время, пока вы можете рассчитать интервал и расстояние перемещения, все будет в порядке.

1. Сначала получите длину <li>

2. Затем рассчитайте процент интервала. Поскольку есть пауза, не забудьте использовать количество секунд × 2.

3. Затем используйте строку для написания @keyframes, 0~длина, включая длину, поскольку есть еще одна, четные и нечетные числа разделяются.

4. Клонируйте первое и второе слова в <ul> в конец <ul>.

5. Создайте тег <style> и добавьте его в <head>.

6. Добавьте атрибуты анимации в <ul>

Без лишних слов, давайте поговорим о коде:

 function addKeyFrame(){ var ulObj = $(#roll ul), //Получаем длину объекта ul = $(#roll li).length, //Получаем длину массива li per = 100 / (length / 2 * 2 ) ; / /Рассчитать процент промежуточных интервалов//Объединить строки var keyframes = `/ @keyframes ani{` for(var i = 0; i<=length; i++){ keyframes+=`${i * per}%{margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px }`; } ключевые кадры+='}'; li:first), //Получаем первый элемент liSec = liFirst.next(); //Получаем второй элемент ulObj.append(liFirst.clone()).append(liSec.clone()); //Вставляем два элемента в ul $(<style>).attr(type,text/ css). html(keyframes).appendTo($(head)); //Создаем тег стиля для вставки ключевых кадров в заголовок ulObj.css(animation,ani 5s Linear Infinite); //Добавляем анимацию css3 в ul} addKeyFrame();

Zepto на мобильной стороне не имеет функции анимации. Если вы не используете атрибуты CSS3, как вы можете написать это на JS?

 var timer,top;functionroll(){ var ulObj = $(#roll).find(ul), length = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //Добавляем первое и второе в тег <ul> ClearInterval(timer); timer = setInterval(function(){ //Устанавливаем таймер var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ //Получаем текущую высоту. Если она не в конце, перемещаемся вверх вверх -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //Если он достигнет конца, он быстро достигнет нуля top = 0; {-webkit-transition: none,transition: none,margin-top:top}); //Добавьте здесь задержку, и она должна выполняться в конце очереди, чтобы избежать слияния двух анимаций. top -= ulObj.css({-webkit-transition:all 1s,transition:all 1s, маржа-топ :top}); },0) } },2000);}roll();

Если есть другой способ, в следующий раз я буду обновлять его время от времени. Но для мобильных устройств этого должно быть достаточно.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.