【动画进阶】有意思的网格下落渐次加载效果

最近,群友贴了一个非常有意思的动画效果,整体动画效果如下:

点击某个按钮后,触发一个动画效果,原本的网格内容,将按顺序(又带点随机的效果)从高处下落进行加载填充动画。

当然,我个人认为这个动画有点华而不实,主要体现在这个动画一次需要耗费较长时间,有点消磨人的耐心。不过确实一个很好的 CSS 动画教学案例。

而本文,就将具体去剖析这个动画,如果使用纯 CSS,应该如何实现。

还原布局结构

首先,我们需要大致还原布局结构,这个并非整个动画的核心。

整个动画的核心在于元素按顺序(又带点随机的效果)从高处下落渐次进行下落加载填充动画

当然,还原这个布局也非常简单,这里我们借助 flex 布局快速实现,几个关键点:

  1. 每个 flex-item 宽度不固定:这一点可以使用 SASS 函数进行模拟,随机生成不同宽度的 flex-item
  2. 每个 flex-item 背景色随机:这一点同样也可以借助 SASS 函数 实现
  3. 整体水平居中:这个也简单,父容器添加 justify-content: center; 即可

这样,整个布局的大致代码如下:

<ul>
  <li></li>
  <li></li>
   // ... 假设一共 50 个 li
  <li></li>
</ul>
$count: 51;
@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}
@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

ul {
    display: flex;
    gap: 4px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 640px;
    height: 420px;
}
li {
    flex-shrink: 0;
    height: 30px;
    border-radius: 30px;
}

@for $i from 1 to $count {
    li:nth-child(#{$i}) {
        width: #{randomNum(110, 90)}px;
        background: randomColor();
    }
}

简单解释一下:

  1. 利用了 SASS 的循环函数简化代码量
  2. 实现了两个 SASS 函数,利用这两个函数随机生成不同宽度不同颜色的 li
  • randomNum(): 用于生成范围内的随机数
  • randomColor(): 用于生成随机颜色值

这样,我们就可以快速得到这样一个布局效果:

下落动画

接下来,我们来实现元素的下落动画。

首先,我们撇开多元素的按顺序又带点随机的延迟下落,值聚焦于单个 item 的下落动画,它其实是这么个动画效果:

整个动画的核心步骤大致是:

  1. 默认是状态下,元素是在最终的 flex 布局状态下,且是可见状态
  2. 动画开始时,元素将消失,然后从上方,在一个缩小状态下,有一个小幅度向上运动
  3. 接着元素向下运动到目标位置(终止状态)
  4. 元素从缩小状态,放大为正常状态
  5. 并且,动画结束后,需要维持在最后一帧,因此需要使用(animation-fill-mode: forwards

对 CSS 动画细节和各个属性还不太了解的,建议你看看我的这本小册 -- CSS 技术揭秘与实战通关

完成上面的拆解后,单个动画实现起来就非常轻松了:

li {
    opacity: 0;

    &hover {
            animation: falldown 1s forwards;
    }
}

@keyframes falldown {
    0% {
        transform: translateY(-180px) scaleX(.1) scaleY(.3);
        opacity: 1;
    }
    20% {
        transform: translateY(-200px) scaleX(.6) scaleY(.3);
    }
    75% {
        transform: translateY(0) scaleX(.6) scaleY(.3);
    }
    100% {
        transform: translateY(0)  scaleX(1) scaleY(1);
        opacity: 1;
    }
}

这样,我们就轻松的实现了单个的动画效果:

如果 50 个 item 同时作用这个动画,就是这样的效果:

实现延迟随机下落

当然,到这里,整个动画都还是平平无奇的

我们需要最后的点睛之笔,实现按顺序又带点随机的延迟下落效果,以及让整体的动画更加自然。

这里的核心就在于:

  1. 利用 animation-delay 制造延迟效果,但是不能是顺序延迟,需要带点随机效果
  2. 利用 animation-timing-function 缓动函数,控制动画的速度曲线,使动画变化更为平滑
  3. 控制缩短每一个 item 的动画时长

方法明确了,剩下的就是调试动画效果了,最终,经过一番调试,完整的动画效果的代码就完成啦。

代码量真的不多:

$count: 51;
@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}
@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

ul {
    display: flex;
    gap: 4px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 660px;
    height: 420px;
}
li {
    flex-shrink: 0;
    height: 30px;
    border-radius: 30px;
}

@for $i from 1 to $count {
    li:nth-child(#{$i}) {
        width: #{randomNum(110, 90)}px;
        background: randomColor();
    }
}

ul:hover {
    li {
        opacity: 0;
    }
    @for $i from 1 to $count {
        li:nth-child(#{$i}) {
            animation: falldown .3s cubic-bezier(.44,.02,.65,1.3) #{50 * ($count - $i) + (random(150) - random(300))}ms forwards;
        }
    }
}
@keyframes falldown {
    0% {
        transform: translateY(-180px) scaleX(.1) scaleY(.3);
        opacity: 1;
    }
    20% {
        transform: translateY(-200px) scaleX(.6) scaleY(.3);
    }
    75% {
        transform: translateY(0) scaleX(.6) scaleY(.3);
    }
    100% {
        transform: translateY(0)  scaleX(1) scaleY(1);
        opacity: 1;
    }
}

核心,就在于这一句,animation: falldown .3s cubic-bezier(.44,.02,.65,1.3) #{50 * ($count - $i) + (random(150) - random(300))}ms forwards,需要好好的消化理解。

这样,我们就基本完美的复刻了原效果:

Gif 录制存在掉帧行为,原效果会比 GIF 录制出来的更好。完整的代码你可以戳这里:

CodePen Demo -- Flex Item Fall Down

总结一下

好了,本文到此结束,希望对你有帮助 😃

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

最后,我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK

热门相关:恭喜你被逮捕了   富贵不能吟   裙上之臣   富贵不能吟   金粉