Отмеченная наградами мобильная платформа H5 с бесшовной анимацией прокрутки

HTML
Отмеченная наградами мобильная платформа H5 с бесшовной анимацией прокрутки

анализ спроса

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

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

HTML-скелет

Это на самом деле очень просто, самый внешний<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>
    </ul>
</div>

базовый стиль css

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

*{
    margin:0;
    padding:0;
}
.roll{
    margin: 100px auto;
    width: 200px;
    height: 40px;
    overflow:hidden;
    border: 1px solid aquamarine;
}
.roll ul{
    list-style: none;
}
.roll li{
    line-height:20px;
    font-size:14px;
    text-align:center;
}

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

Реализовать идеи

1. Анимируйте анимацию с помощью jquery

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

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

параметр:styles:必需参数，需要产生动画的css样式(使用驼峰式命名)
speed: 规定动画的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:动画速度（swing,linear）
callback:函数执行完之后的回调函数

    $(document).ready(function(){
            setInterval(function(){  // 添加定时器，每1.5s进行转换
                $("#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);
                });
            },1500)
        });

Оцените эффект:finish.gif

Во-вторых, используйте анимацию анимации css3.

Через ключевой кадр в 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>
  1. Затем подсчитайте, сколько раз вам нужно прокрутить, сколько секунд за раз, пример - две прокрутки, это занимает 5 с, поэтому css3animationВремя 5с. Так@keyframeНа сколько частей нужно разделить? Поскольку это пауза, для каждого броска требуется две копии, а последний должен прыгнуть, так что есть только одна копия, поэтому необходимо5 * 2 - 1 = 9份, посмотрите на код, чтобы знать:
/*这里不做兼容性处理*/
.roll ul{
    list-style: none;
    animation: ani 5s  linear infinite;  /*动画ani，5s，循环匀速播放*/
}
@keyframes ani{  
    0%{
        margin-top: 0;
    }
    12.5%{
        margin-top: 0;
    }
    25%{
        margin-top: -40px;
    }
    37.5%{
        margin-top: -40px;
    }
    50%{
        margin-top: -80px;
    }
    62.5%{
        margin-top: -80px;
    }
    75%{
        margin-top: -120px;
    }
    87.5%{
        margin-top: -120px;
    }
    100%{
        margin-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对象
             length = $("#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;
                       }`;
       }
       keyframes+='}';
       var liFirst = $("#roll li:first"),   //获取第一个元素
           liSec = liFirst.next();    //获取第二个元素
       ulObj.append(liFirst.clone()).append(liSec.clone());   //将两个元素插入到ul里面
       $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));    //创建style标签把关键帧插入到头部
       ulObj.css("animation","ani 5s linear infinite");  //给ul添加css3动画
   }
   addKeyFrame();

Три, реализация zepto+transition

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

var timer,top;
function roll(){
    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)){  //获取现在的高度如果没有到最后就上移
            top -= 40;
            ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
        }else{  //如果到了最后就迅速到零
            top = 0;
            ulObj.css({"-webkit-transition":"none","transition":"none","margin-top":top});
            setTimeout(function(){  //这里加一个延时器，也是要放在队列最后去执行，为了避免两个动画合并
                top -= 40;
                ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
            },0)
        }
    },2000);
}

roll();

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

@version1.0——2018.6.21—— Создание отмеченной наградами реализации плавной анимации прокрутки мобильного терминала H5 ©burning_rhyme семь семь

Категории