Implémentation d'une animation de défilement transparente primée sur un terminal mobile HTML5

Cet article présente principalement l'exemple d'implémentation de l'animation de défilement fluide primée sur le terminal mobile Html5. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Cet article présente l'exemple de mise en œuvre de l'animation de défilement fluide primée sur le terminal mobile Html5. J'aimerais le partager avec vous. Les détails sont les suivants :

Analyse des exigences<.>

Haha, l'image dynamique ci-dessus est vraiment géniale. Cela devient clair.

Ça roule, ça roule, alors quelle est la façon de faire ça ? Résumons : le

squelette HTML

est en fait très simple. Le e388a4556c0f65e1904146cc1a846bee 25edfb22a4f469ecb59f1190150159c6 Inside est une animation d'affichage

<p class="roll" id="roll">
    <ul>
         <li>第一个结构</li>
         <li>第二个结构</li>
         <li>第三个结构</li>
         <li>第四个结构</li>
         <li>第五个结构</li>
         <li>第六个结构</li>
         <li>第七个结构</li>
         <li>第八个结构</li>
    </ul>
</p>

Style CSS de base

Implémentez d'abord le style CSS de base

*{
    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;
}

Prenez un regardez le style général :

Idées d'implémentation

Utilisation de l'animation animate de jquery.

Méthode animate()

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

Paramètres :

styles : paramètres requis, style CSS qui doit générer une animation (utiliser la dénomination de cas de chameau )
speed : Spécifie la vitesse d'animation
@number:1000(ms)
@string:"slow","normal","fast"
easing : vitesse d'animation (swing, linéaire)
callback : La fonction de rappel après l'exécution de la fonction

    $(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)
        });

Regardez l'effet :

2. Animation d'animation utilisant css3

Grâce aux images clés en CSS3, vous pouvez obtenir l'effet de sauter des étapes. Jetons d’abord un bref aperçu de l’idée.

Préliminaire

1. S'il s'agit d'une récompense écrite en dur, vous devez alors copier la précédente à l'arrière. S'il défile un par un, puis copiez le premier. Un, s'il y a deux parchemins, copiez le premier et le deuxième.

<p 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>
</p>

2. Calculez ensuite combien de fois vous devez faire défiler et combien de secondes à chaque fois. L'exemple est deux défilements, ce qui prend 5 s, donc le temps d'animation de CSS3 est de 5 s. Alors, en combien de parties @keyframe doit-il être divisé ? Parce qu'il s'agit d'une pause, chaque parchemin nécessite deux copies, et le dernier doit sauter pour qu'il n'y ait qu'une seule copie, donc 5 * 2 - 1 = 9 copies sont nécessaires. Vous le saurez en regardant le code :

.

/*这里不做兼容性处理*/
.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; /*最后是一个，这样可以打断动画*/
    }
}

Avancé

Si le nombre est incertain, un calcul dynamique est nécessaire pour ajouter dynamiquement des @keyframes. car vous pouvez calculer clairement l'intervalle et le mouvement, juste la distance.

1. Obtenez d'abord la durée de 25edfb22a4f469ecb59f1190150159c6 length

2. Puis calculez le pourcentage d'intervalle, n'oubliez pas d'utiliser le nombre de secondes × 2
3. épelez @keyframes avec une chaîne, 0~length, y compris la longueur, car il y en a un de plus, les nombres pairs et les nombres impairs sont séparés.
4. Clonez le premier et le deuxième dans ff6d136ddc5fdfeffaf53ff6ee95f185 à la fin de ff6d136ddc5fdfeffaf53ff6ee95f185 5. Créez une balise c9ccee2e6ea535a969eb3f532ad9fe89 attributs à ff6d136ddc5fdfeffaf53ff6ee95f185

Sans plus tarder, parlons du code :

3 Zepto+transition implémente le mouvement

   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+=&#39;}&#39;;
       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 sur le client n'a pas de fonction d'animation Si vous n'utilisez pas d'attributs CSS3, comment pouvez-vous l'écrire en JS ?

S'il existe un autre moyen, je le mettrai à jour de temps en temps la prochaine fois. Mais pour les mobiles, cela devrait suffire.

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();

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utiliser HTML5 Canvas pour implémenter des jeux de masturbation

HTML5 Canvas pour implémenter le dessin d'une fine largeur de pixel line

Comment utiliser Canvas pour implémenter une mosaïque d'images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!