实现钉钉官网动画效果：详解HTML、CSS、JavaScript与性能优化

孔乙己大叔

于 2024-09-02 20:52:28 发布

阅读量987

点赞数 9

分类专栏： Web学习文章标签：钉钉 html css javascript rebootvip

本文链接：https://blog.csdn.net/Ctrl_qun/article/details/141829895

版权

Web学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

更多内容前往个人网站：孔乙己大叔

要全面解析并实现类似钉钉官网的动画效果，我们不仅需要详细阐述HTML结构、CSS样式和JavaScript逻辑，还需要深入探讨动画曲线的计算、元素定位策略以及性能优化。下面，我将逐步展开这些内容，确保每一个部分都详细且易于理解。

一、项目准备

1. 项目结构

首先，我们需要设置项目的基本结构。这包括HTML、CSS和JavaScript文件。

index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>DingTalk Animation</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <div class="header">Header</div>  
    <div class="playground">  
        <div class="sticky-content">Sticky Content</div>  
        <div class="list">  
            <div class="list-item" data-delay="0"></div>  
            <!-- 更多 list-item -->  
        </div>  
    </div>  
    <div class="footer">Footer</div>  
    <script src="script.js"></script>  
</body>  
</html>

styles.css

/* 通配符取消margin、padding */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
body, html {  
    height: 100%;  
    overflow-x: hidden;  
}  
  
.header, .footer {  
    height: 100px;  
    background-color: #f0f0f0;  
    text-align: center;  
    line-height: 100px;  
}  
  
.playground {  
    position: relative;  
    height: 100%;  
    overflow-y: auto;  
}  
  
.sticky-content {  
    position: -webkit-sticky;  
    position: sticky;  
    top: 0;  
    background-color: #fff;  
    z-index: 10;  
    height: 200px;  
    text-align: center;  
    line-height: 200px;  
}  
  
.list {  
    display: flex;  
    flex-wrap: wrap;  
    padding: 20px;  
}  
  
.list-item {  
    width: 100px;  
    height: 100px;  
    background-color: #ddd;  
    margin: 10px;  
    transition: transform 0.5s, opacity 0.5s;  
    will-change: transform, opacity;  
}

script.js
（JavaScript部分将在后续详细解释）

2. 粘性定位解释

在上面的HTML和CSS中，.sticky-content 类使用了CSS的 position: sticky; 属性。这个属性可以使元素在屏幕滚动时，在某个位置固定不动，直到父元素（在这里是 .playground）滚出视口。这是实现“红色粘性区域”的关键。

二、JavaScript 实现动画

1. 动画曲线函数

首先，我们需要一个函数来计算动画的曲线。这个函数将根据滚动位置计算动画属性的值。

function createAnimation(scrollStart, scrollEnd, valueStart, valueEnd) {  
    return function (scrollY) {  
        if (scrollY < scrollStart) return valueStart;  
        if (scrollY > scrollEnd) return valueEnd;  
        const progress = (scrollY - scrollStart) / (scrollEnd - scrollStart);  
        return valueStart + (valueEnd - valueStart) * progress;  
    };  
}

2. 初始化动画映射

我们需要为每个 .list-item 元素创建一个动画映射。这个映射将包含该元素在滚动过程中的所有动画属性（如 opacity 和 transform）。

const animationMap = new Map();  
const items = document.querySelectorAll('.list-item');  
  
function updateAnimationMap() {  
    const playgroundRect = document.querySelector('.playground').getBoundingClientRect();  
    const scrollStart = playgroundRect.top + window.scrollY;  
    const scrollEnd = playgroundRect.bottom + window.scrollY - window.innerHeight;  
  
    items.forEach(item => {  
        const delay = parseInt(item.getAttribute('data-delay'), 10);  
        const opacity = createAnimation(scrollStart, scrollEnd, 0, 1);  
        const scale = createAnimation(scrollStart, scrollEnd, 0.5, 1);  
        const translateY = createAnimation(scrollStart, scrollEnd, -item.offsetHeight / 2, 0);  
          
        animationMap.set(item, {  
            opacity: (scrollY) => opacity(scrollY),  
            transform: (scrollY) => `scale(${scale(scrollY)}) translateY(${translateY(scrollY) + delay * 50}px)`,  
        });  
    });  
}  
  
updateAnimationMap();

注意，这里我添加了 translateY 属性的计算，并根据 data-delay 属性给每个元素添加了不同的延迟效果。

3. 滚动事件监听

我们需要监听滚动事件，并在每次滚动时更新元素的样式。

function updateStyles() {  
    const scrollY = window.scrollY;  
    animationMap.forEach((animations, element) => {  
        Object.keys(animations).forEach(key => {  
            element.style.setProperty(key, animations[key](scrollY));  
        });  
    });  
}  
  
window.addEventListener('scroll', updateStyles);

三、性能优化

1. 节流（Throttling）或防抖（Debouncing）

直接监听滚动事件可能会导致性能问题，因为滚动事件会频繁触发。我们可以使用节流或防抖技术来减少函数的执行频率。

let lastScrollY = 0;  
let ticking = false;  
  
function requestTick() {  
    if (!ticking) {  
        requestAnimationFrame(updateStyles);  
        ticking = true;  
    }  
}  
  
function updateStyles() {  
    const scrollY = window.scrollY;  
    if (scrollY === lastScrollY) return;  
    lastScrollY = scrollY;  
  
    // 更新动画样式  
    // ...（同上）  
  
    ticking = false;  
}  
  
window.addEventListener('scroll', requestTick);

2. 使用`will-change`属性

在CSS中，我们为 .list-item 添加了 will-change: transform, opacity;。这告诉浏览器这些属性可能会改变，从而提前优化这些属性的性能。

四、总结

通过上述步骤，我们实现了一个类似钉钉官网的动画效果。这个效果利用了CSS的粘性定位、JavaScript的滚动事件监听和动画曲线计算。我们还讨论了性能优化的一些方法，如节流/防抖和will-change属性的使用。在实际项目中，还需要考虑更多的细节，如响应式设计、动画的流畅性和可访问性等。但以上内容已经为我们提供了一个良好的起点。

孔乙己大叔您的一站式代码技术资源中心。我们汇集了各种编程语言的教程、最佳实践和行业解决方案，帮助您轻松掌握最新技术。此外，我们还提供了一系列实用的开发者工具和代码库，助您提升开发效率。立即访问，探索更多精彩内容！http://www.rebootvip.com/

孔乙己大叔

关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
实现钉钉官网动画效果：详解HTML、CSS、JavaScript与性能优化

通过上述步骤，我们实现了一个类似钉钉官网的动画效果。这个效果利用了CSS的粘性定位、JavaScript的滚动事件监听和动画曲线计算。我们还讨论了性能优化的一些方法，如节流/防抖和属性的使用。在实际项目中，还需要考虑更多的细节，如响应式设计、动画的流畅性和可访问性等。但以上内容已经为我们提供了一个良好的起点。
复制链接

扫一扫