添加js动画2

TWEEN.js

引入地址更新网站
动画速率效果图
示例：

function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
  }
  requestAnimationFrame(animate);

 var coords = { x:0,y: 0 };//开始坐标
      var tween = new TWEEN.Tween(coords)
        .to({ x:200,y: 200 }, 1000)//一秒内移动到目标坐标
        .easing(TWEEN.Easing.Quadratic.InOut)//动画类型
        .onUpdate(function () {
          
        })
        .start();

新API

1.let id = setInterval(()=>{
},time)
if(xxx){
window.clearInterval(id)}
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

2.父亲节点：parentNode/parentElement
父节点的所有子元素：parentNode.children 是一个哈希

3.data-* 添加标记，可以直接使元素也能编辑

4.setTimeout(function(){},1000) 1s后执行这个操作

新增的代码

window.onscroll = function () {//页面滚动时
    if (window.scrollY > 0) {
      topNavBar.classList.add('sticky')
    } else {
      topNavBar.classList.remove('sticky')
    }
    let markTags = document.querySelectorAll('[data-x]')//找到所有被标记的标签
    let minIndex = 0//假设这个是最小的
    for (let i = 1; i < markTags.length; i++) {//如果i比minIndex还小
      if (Math.abs(markTags[i].offsetTop - window.scrollY) < Math.abs(markTags[minIndex].offsetTop - window.scrollY)) {//对比差值的绝对值，找最近的
        minIndex = i
      }
    }
    for (let i = 0;i 

添加缓动代码

function animate(time) {//TWENN.js效果开头。抄就完了，记就完了
    requestAnimationFrame(animate);
    TWEEN.update(time);
  }
  requestAnimationFrame(animate);

  for (let i = 0; i < aTags.length; i++) {
    aTags[i].onclick = function (x) {
      x.preventDefault()//阻止点击a标签时候的动作
      let a = x.currentTarget
      let href = a.getAttribute('href')
      let element = document.querySelector(href)
      let top = element.offsetTop

      let currentTop = window.scrollY
      let targretTop = top - 70
      var coords = { y: currentTop };//当前高度
      var tween = new TWEEN.Tween(coords)
        .to({ y: targretTop }, 1000)//一秒后 目标位置
        .easing(TWEEN.Easing.Quadratic.InOut)//动画类型
        .onUpdate(function () {
          window.scrollTo(0, coords.y)//需要的操作。滚动到该目标位置
        })
        .start();
    }
  }

设置滚动到时候 有个缓升动作

let markTags = document.querySelectorAll('[data-x]')
  for (let i = 0;i  0) {
      topNavBar.classList.add('sticky')
    } else {
      topNavBar.classList.remove('sticky')
    }
    scrollto()//执行下面那个函数
  }
  function scrollto(){//用一个函数包起来
    let markTags = document.querySelectorAll('[data-x]')
    let minIndex = 0
    for (let i = 1; i < markTags.length; i++) {
      if (Math.abs(markTags[i].offsetTop - window.scrollY) < Math.abs(markTags[minIndex].offsetTop - window.scrollY)) {
        minIndex = i
      }
    }
    for (let i = 0;i