使用场景

  在界面载入的时候,需要根据获取到的数据,实现数字自动变化到数据的数值或动画变化为数据相关的效果(比如数字从0变化到100,电池电量从固定位置变化到一定的位置时的动画)的时候。

主要使用到的方法和属性

  JS:setInterval(定时器)、clearInterval(在数据或动画到达指定位置时停止)、innerText(配合定时器输入文本)

  CSS:transition(使用过渡效果实现动画,比较简单)、animate(使用动画效果实现动画,可以用,但没必要,对于复杂的动画时比较实用)

实现思路

  1.数字自动增长

  我目前想到的唯一方法就是在setInterva方法中使用innerText输入数值,然后当数值和数据一致的时候停止setInterval,以达到数值变化到指定数据的效果。

  实现代码

var yuanshu = 0 //数据变化前的初始数值
const re = 50 //获取到的数据
var numAdd = setInterval(numAdd,10)
function numAdd(){
    yuanshu = yuanshu + 1 //数据变化的间隔
    document.getElementById("num").innerText = yuanshu
    if(yuanshu == re){ //检验数值是否到达数据的数值
      window.numStop()
 }
}
function numStop(){ //停止计时器 window.clearInterval(numAdd) }

  2.动画根据数值自动变化

  这个其实除了使用css的过渡和动画,我最初想到使用JS的定时器不断修改元素的样式来实现动画的效果,但经过实践,效果实在比不上css,或许经过调整还是可以实现看起来比较流畅的效果,但属实有点脱裤子放屁的意思了。因此这里就不做介绍了(其实就是把上面的innerText修改成修改样式)。

  这里就主要以电池电量增加作为例子好了。(效果大概就像下面这张图)

  

  电池电量变化的动画其实算比较单一的,只需要改变绿色容器的宽度(竖直摆放的话也可以时高度),只需要通过JS访问绿色容器相关的元素并改变宽度(高度)为指定的百分比就可以(注意,这里绿色容器的父容器请务必设置固定的宽度,我怕容易出事儿)。

  实现代码(包含了数字增长的代码)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .content{
                width: 200px;
                height: 50px;
                background-color: gray;
            }
            #num{
                width: 0px;
                height: inherit;
                background-color: aquamarine;
                color: white;
                transition: width 2s;
            }
        </style>
    </head>
    <body>
    
    <div id = "content" class="content">
        <div id="num">
            
        </div>
    </div>
    <script type="text/javascript">
      var w = parseInt(window.getComputedStyle(content,null).width)
     var yuanshu = 0
     const re = 150//获取到的数据 window.onload
= function(){ //将计算后的过渡时间和宽度计算完赋给绿色容器 document.getElementById("num").style.transition = "width " +re/w+"s" document.getElementById("num").style.width = re/w*100 + "%" } var numAdd = setInterval(numAdd,re/w)//下面是数字增长的代码,可以不用看了 function numAdd(){ yuanshu = yuanshu + 1 document.getElementById("num").innerText = yuanshu if(yuanshu == re){ window.numStop() } } function numStop(){ window.clearInterval(numAdd) } </script> </body> </html>

第一次写这种东西,有看不懂的话。。。。只能说小生不才请见谅。如果可以的话请在评论区留下您的建议和问题。

内容来源于网络如有侵权请私信删除