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 <markTags.length; i++){
markTags[i].classList.remove('moved')//遍历全部被标记的，先全部去掉状态moved
}
markTags[minIndex].classList.add('moved')//最接近页面顶部的的加上状态
let id = markTags[minIndex].id//找到当前的id
let a = document.querySelector('a[href="#' + id + '"]')//找到id对应的a标签
let li = a.parentNode//找到a标签的父亲节点
let childrens = li.parentNode.children//该父节点的全部儿子
for (let i=0;i<childrens.length;i++){
childrens[i].classList.remove('moved')//先给所有的儿子去掉状态
}
li.classList.add('moved')//给当前的儿子加上状态
}
添加缓动代码
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 <markTags.length; i++){
markTags[i].classList.add('riseup')//所有被标记的先下沉100px
}
setTimeout(function(){
scrollto()
},100)//第一个标记的先运行一次上升动作，刷新的时候就看到
window.onscroll = function () {
if (window.scrollY > 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 <markTags.length; i++){
markTags[i].classList.remove('moved')
}
markTags[minIndex].classList.remove('riseup')//滚到的时候移除状态，回复原来位置，看起来就上升了
markTags[minIndex].classList.add('moved')
let id = markTags[minIndex].id
let a = document.querySelector('a[href="#' + id + '"]')
let li = a.parentNode
let childrens = li.parentNode.children
for (let i=0;i<childrens.length;i++){
childrens[i].classList.remove('moved')
}
li.classList.add('moved')
}