美文网首页
用原生实现js描点动画和改进思路以及高亮当前topbar的元素

用原生实现js描点动画和改进思路以及高亮当前topbar的元素

作者: 饥人谷_bibi | 来源:发表于2018-05-30 22:34 被阅读0次

    描点动画


    思路一

    采用setInterval制作缓动

    1. 设置次数n,一共动多少次
    2. 规定时间s(毫秒),算出多少毫秒动一次 s/n=time
    3. 获取当前距离页面顶部高度currtenTop=window.scrollY
    4. 获取目标div的高度targetTop(上一节已说明)
    5. 每一次要动多少px:(targetTop-currttop)/n
    6. 然后设置动画,当i===25时,清除掉这个时钟,每次的距离=最初的currentTop+distance*i , time是每隔多少时间循环一次
    • 动画时间固定,导致如果距离很短,动的很慢,如果距离很长,则动的很快

    思路二

    采用tween.js库

    1. tween.js提供了一系列缓动函数,详细的动画效果见http://easings.net/zh-cn
    2. 首先我们引入js库 采用cdn方式引入<script src="https://cdn.bootcss.com/tween.js/r14/Tween.js"></script>
    3. 拷贝文本代码
    4. 根据具体情况修改代码,设置缓动类型,开始距离currentTop=window.scollY(滚动条滚动的距离),目标距离targetTop=element.offsetTop(目标dom距离页面顶端的距离),element是我们获取到的目标dom,时间我们设置一个函数与运动距离成正比,time=(s/100)*300,随后设置一个最大时间,coords.y我们console出来,发现这是一个时时更新的坐标,所以我们在其中填入 window.scrollTo(0, coords.y)

    元素高亮


    1. 标记我们的目标元素

    相关文章

      网友评论

          本文标题:用原生实现js描点动画和改进思路以及高亮当前topbar的元素

          本文链接:https://www.haomeiwen.com/subject/qsffsftx.html