美文网首页
用原生实现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的元素

    描点动画 思路一 采用setInterval制作缓动 设置次数n,一共动多少次 规定时间s(毫秒),算出多少毫秒动...

  • 高仿QQ录音功能模块

    先上一个效果图: 抓几个点说一下:录音的振幅动画效果的实现思路:用固定含有10个元素的数组,来表示当前需要显示的振...

  • Android5.0使用共享元素实现转场动画

    1.整体效果首先看下android5.0以上的转场动画用共享元素实现以及配合补间动画和圆形缩放动画实现的activ...

  • insertAfter实现

    用原生JS实现在一个dom元素后插入新的节点? 在js的dom api中有insertBefore()方法 在已知...

  • 原生js实现在表格用鼠标框选并有反选功能

    今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能。要我用原生js写,由于没什么经验...

  • svg动画类库Snap.svg简介

    SVG元素是一种特殊的DOM元素,可以使用CSS以及一般的JS类库来实现动画控制。但是这些方法都没提供SVG动画样...

  • Vue实践与总结——动画

    原生动画 改变元素的选择器的同时,增加transition属性,可实现动画 Vue动画 css层面,与原生基本一致...

  • 各种排序算法代码实现

    目的 各个排序算法实现思路以及代码 选择排序 思路每次选择当前序列的最小值,将其与当前序列的第一个元素交换位置。 ...

  • 18day-轮播图

    操作元素 克隆元素 创建ol 和li 此时ol li元素即小圆点创建完毕 我们接着用js做动画 动画部分包括: 这...

  • js拖拽html元素工具类

    复制就能用的拖拽js方法 原生js实现拖拽元素方法 使用(注意拖拽目标元素需绝对定位 position: 'abs...

网友评论

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

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