动画与缓动

简介

这是一个前端简单动画和缓动函数的学习记录。

项目地址

项目地址

效果预览

1.页面加载动画 -呼吸

效果预览

代码

html

<!-- 加载动画 -->
<div class="webWelcome active">
	<div class="loading"></div>
</div>

css

/* 页面加载动画 */
.webWelcome {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index: 10;
}
.webWelcome.active {
    display: flex
}
.webWelcome>.loading,
.webWelcome>.loading::after {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: scale-up-center 1.5s linear infinite;
}
.webWelcome>.loading::after {
    animation-delay: 0.75s;
}
@keyframes scale-up-center {
    0% {
        transform: scale(0);
        background-color: rgba(0, 0, 0, 1);
    }

    100% {
        transform: scale(1);
        background-color: rgba(0, 0, 0, 0);
    }
}

2.自制超链接a的锚点跳转动画

利用setInterval,每一段时间滚动一次窗口。

html

<section>
    <a class="default" href="#default">默认的a跳转</a>
    <a class="myAnimation" href="#myAnimation">自制的a跳转动画</a>
    <a class="tweenjsAnimation" href="#tweenjsAnimation">tweenjs的a跳转缓动动画</a>

    <div id="default"></div>
    <div id="myAnimation"></div>
    <div id="tweenjsAnimation"></div>
</section>
<!-- tween.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>

js

// 1.自制超链接a的锚点跳转动画
let myAnimationaTags = document.querySelector('.myAnimation')
myAnimationaTags.onclick = function (xxx) {
    // 取消a默认的跳转动作
    xxx.preventDefault()

    // 找到a要跳转的目标
    let a = xxx.currentTarget
    let href = a.getAttribute('href')
    let element = document.querySelector(href)

    let targetTop = element.offsetTop // 目标高度
    let currentTop = window.scrollY // 当前高度

    /*** 用setInterval在500毫秒内滚完动画，滚25次 ***/
    let n = 25 // 一共滚动25次（500毫秒25次，也就是50帧/s）
    let duration = 500 / n // 多少时间滚动一次
    let distance = (targetTop - currentTop) / n // 每次滚动的距离

    let i = 0
    let timerID = setInterval(() => {
        if (i === n) {
            window.clearInterval(timerID)
            return
        }
        i = i + 1
        window.scrollTo(0, currentTop + distance * i)
    }, duration)
}

3.用tween.js做a跳转的缓动动画

// 2.用tween.js做a跳转的缓动动画

/*** tween.js需要的代码，不用管 ***/
function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}
requestAnimationFrame(animate);
/*** tween.js需要的代码，不用管 ***/

let tweenjsAnimationaTags = document.querySelector('.tweenjsAnimation')
tweenjsAnimationaTags.onclick = function (xxx) {
    // 取消a默认的跳转动作
    xxx.preventDefault()

    // 找到a要跳转的目标
    let a = xxx.currentTarget
    let href = a.getAttribute('href')
    let element = document.querySelector(href)

    let targetTop = element.offsetTop // 目标高度
    let currentTop = window.scrollY // 当前高度

    // 用tween.js缓动
    let time = Math.abs((targetTop - currentTop) / 100 * 500)
    if (time > 500) {
        time = 500
    }

    const coords = {
        y: currentTop
    }; // 初始位置
    const tween = new TWEEN.Tween(coords)
        .to({
            y: targetTop
        }, time) // time秒内移动到targetTop
        .easing(TWEEN.Easing.Quadratic.InOut) // 使用的tween的缓动函数Quadratic.InOut
        .onUpdate(() => {
            window.scrollTo(0, coords.y) // 窗口滚动到coords.y，coords.y是由tween更新的，最后coords.y等于targetTop
        })
        .start();
}

4.tween.js的官方快速上手demo

// 3.tween.js的官方快速上手demo

// 创建box
const box = document.createElement('div');
box.innerText='tween.js官方demo'
box.style.setProperty('background-color', '#008800');
box.style.setProperty('width', '100px');
box.style.setProperty('height', '100px');
document.body.appendChild(box);

// Setup the animation loop.
function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}
requestAnimationFrame(animate);

const coords = {
    x: 0,
    y: 0
}; // 初始位置(0, 0)
const tween = new TWEEN.Tween(coords) // 创建tween
    .to({
        x: 300,
        y: 200
    }, 1000) // 1秒内移动到(300, 200)
    .easing(TWEEN.Easing.Quadratic.Out) // 使用的tween的缓动函数
    .onUpdate(() => {
        // 改变box的style添加动画
        box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`);
    })
    .start(); // 启动