关于前端:纳尼CSS-也能实现碰撞检测

81次阅读

共计 5943 个字符，预计需要花费 15 分钟才能阅读完成。

本文，咱们将一起学习，应用纯 CSS，实现如下所示的动画成果：

下面的动画成果，十分有意思，外围有两点：

  1. 小球随机做 X、Y 方向的直线运动，并且可能实现碰撞到边界的时候，实现反弹成果
  2. 小球在碰撞边界的霎时，色彩产生随机的变动

嗯？很有意思的成果。看上去，咱们如同应用 CSS 实现了碰撞检测。

然而，理论状况真的是这样吗？让咱们一起一探到底！

实现 X 轴方向的静止

这里其实咱们并没有实现碰撞检测，因为小球和小球之间接触时，并没有产生碰撞成果。

咱们只实现了，小球与边界之间的碰撞反馈。不过这里，也并非碰撞检测，咱们只须要设置好单个方向的静止动画，并且设置 animation-direction: alternate; 即可！

上面，咱们一起来实现单个方向上的静止动画：

<div></div>
div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #0cf;
    animation: horizontal 3s infinite linear alternate;
}
 
@keyframes horizontal {
    from {left: 0;}
    to {left: calc(100vw - 100px);
    }
}

简略解读一下：

  1. 元素设置为 position: absolute 相对定位，利用 left 进行 X 轴方向的静止
  2. 咱们让元素 div 静止的间隔为 left: calc(100vw - 100px)，元素自身的高宽都是 100px，因而相当于静止到屏幕的最右侧
  3. 动画设置了 alternate 也就是 animation-direction: alternate; 的简写，示意 动画在每个循环中正反交替播放

这样，咱们就奇妙的实现了，在视觉上，小球元素挪动到最右侧边界时，回弹的成果：

如法炮制 Y 轴方向的静止

好，有了下面的铺垫，咱们只须要再如法炮制 Y 轴方向的静止即可。

利用元素的 top 进行 Y 轴方向的静止：

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #0cf;
    animation: 
        horizontal 3s infinite linear alternate,
        vertical 3s infinite  linear alternate;
}
 
@keyframes horizontal {
    from {left: 0;}
    to {left: calc(100vw - 100px);
    }
}
 
@keyframes vertical {
    from {top: 0;}
    to {top: calc(100vh - 100px);
    }
}

咱们减少了一个 vertical 3s infinite linear alternate Y 轴的静止动画，实现小球从 top: 0 到 top: calc(100vh - 100px); 的静止。

这样，咱们就胜利的失去了 X、Y 两个方向上的小球静止，它们叠加在一起的成果如下：

色彩的变动能够疏忽，GIF 录制问题。

当然，此时的问题在于，短少了随机性，小球的始终在左上和右下角之间来回静止。

为了解决这个问题，咱们须要增加肯定的随机性，这个问题也要解决，咱们只须要让两个方向上静止工夫不统一即可。

咱们批改一下代码，让 X、Y 轴的静止时长不统一即可：

div {
    position: absolute;
    // ...
    animation: 
        horizontal 2.6s infinite linear alternate,
        vertical 1.9s infinite  linear alternate;
}

如此一来，整体的成果就好上了不少，因为整个动画是有限重复进行的，随着工夫的推动，整个动画出现进去的就是 无序、随机的静止：

应用 transform 代替 top、left

当然，下面的成果基本上没有什么太大的问题了，然而代码层面不够优雅，次要有两点问题：

  1. 元素挪动应用的是 top 和 left，性能绝对较差，须要应用 transform 进行代替
  2. 代码中 hardcode 了 100px，因为 DEMO 中小球的大小是 100px x 100px，并且在动画的代码中也应用了 100px 这个值进行了静止终态的计算，因而如果想批改小球的元素大小，须要改变中央较多

上述两个问题，应用 transform: translate() 都能够解决，然而咱们为什么一开始不必 transform 呢？

咱们来尝试一下，应用 transform 代替 top、left：

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #0cf;
    animation: 
        horizontal 2.6s infinite linear alternate,
        vertical 1.9s infinite  linear alternate;
}
@keyframes horizontal {from { transform: translateX(0); }
    to {transform: translateX(calc(100vw - 100%)); }
}
@keyframes vertical {from { transform: translateY(0); }
    to {transform: translateY(calc(100vh - 100%)); }
}

上述代码中，咱们应用了 transform 代替 top、left 静止。并且，将动画代码中的 100px 替换成了 100%，这一点的益处是，在 transform: translate 中，100% 示意的是元素自身的高宽，这样，当咱们扭转元素自身的大小时，就无需再扭转 @keyframes 中的代码，通用性更强。

咱们来看看批改后的成果：

有点问题！料想中的成果并没有呈现，整个动画只有 Y 轴方向上的动画成果。

这是什么起因呢？

其本质在于，定义的 vertical 1.9s infinite linear alternate 的垂直方向的动画成果笼罩了在其之前定义的 transform: translateX(calc(100vw - 100%)) 动画成果。

说人话就是 X、Y 轴的动画都应用了 transform 属性，两者之间造成了抵触。

应用 animation-composition 进行动画合成

在之前，这种状况根本是无解的，常见的解决方案就是：

  1. 解法一：应用 top、left 代替 transform
  2. 解法二：多一层嵌套，将一个方向的动画拆解到元素的父元素上

不过，到明天，这个问题有了更好的解法！也就是 CSS animation 家族中的新属性 —— animation-composition。

这是一个十分新的属性，示意 动画合成属性，从 Chrome 112 版本开始反对。

有三种不同的取值：

{
    animation-composition: replace;        // 示意动画值替换
    animation-composition: add;              // 示意动画值追加
    animation-composition: accumulate; // 示意动画值累加
}

本文不会具体介绍 animation-composition，感兴趣的能够看看 MDN 的属性介绍或者 XBOXYAN 大佬的这篇文章 — 理解一下全新的 CSS 动画合成属性 animation-composition

这里，基于下面的代码，咱们只须要再多设置一个 animation-composition: accumulate 即可解决问题：

div {
    animation: 
        horizontal 2.6s infinite linear alternate,
        vertical 1.9s infinite  linear alternate;
    animation-composition: accumulate;
}

此时，咱们就能通过一个元素，利用 transform 失去 X、Y 两个方向位移动画的合成成果，也就是咱们想要的成果：

应用 steps 实现色彩切换

解决了位移动画的问题，咱们就只剩下最初一个问题了，如何在碰撞的霎时，实现色彩的切换？

这里也十分好解决，因为咱们是晓得每一轮 X、Y 方向上的动画时长的，那咱们只须要在每次这个结点上，切换一次色彩即可。

并且，因为色彩不是过渡变换，而是间接的跳变，所以，咱们须要用到 animation 中的 animation-timing-function: steps()，也就是步骤缓动函数。

对 animation-timing-function: steps() 还不太理解的，可能须要先补一补根底，能够看看这一篇文章：深入浅出 CSS 动画

举个例子，假如 X 方向上，单次的动画时长为 3s，那咱们能够设置一个 steps(10) 的色彩动画，总时长为 30s，这样，每隔 3s 就会触发一次 steps() 步骤动画，色彩的变动就可能和小球与边界的碰撞动画产生在同一时刻。

那如何疾速实现色彩的变动呢？利用 filter: hue-rotate() 即可疾速实现色彩的变动。

了解一下上面的代码：

<div class="normal"></div>
<div class="steps"></div>
div {
    width: 200px;
    height: 200px;
    background: #fc0;
}
.normal {animation: colorChange 10s linear infinite;}
.steps {animation: colorChange 10s steps(5) infinite;
}
@keyframes colorChange {
    100% {filter: hue-rotate(360deg);
    }
}

这里，咱们用 filter: hue-rotate(360deg) 的扭转，实现色彩的变动，察看上面的动图，了解 steps(5) 的作用。

  1. animation: colorChange 10s linear infinite 示意背景动画的过渡变动
  2. animation: colorChange 10s steps(5) infinite，这里示意 10s 的动画分成 5 步，每两秒，会触发一次动画：

成果如下：

了解了这一步，咱们就能够把色彩的变动，也一起叠加到上述的小球变动中：

div {
    animation: 
        horizontal 2.6s infinite linear alternate,
        vertical 2s infinite  linear alternate,
        colorX 26s infinite steps(10),
        colorY 14s infinite steps(7);
    animation-composition: accumulate;
}
 
@keyframes horizontal {from { transform: translateX(0); }
    to {transform: translateX(calc(100vw - 100%)); }
}
@keyframes vertical {from { transform: translateY(0); }
    to {transform: translateY(calc(100vh - 100%)); }
}
@keyframes colorX {
    to {filter: hue-rotate(360deg);
    }
}
@keyframes colorY {
    to {filter: hue-rotate(360deg);
    }
}

这样，咱们就胜利的失去了题图中的成果：

残缺的代码，你能够戳这里：Random Circle Path

利用于图片成果、利用与多粒子成果

OK，下面，咱们就把整个成果的残缺原理分析了一遍。

把握了整个原理之后，咱们就能够把这个成果利用于不同场景中。

譬如，假如咱们有这么一张图片：

基于下面的成果，稍加革新，咱们就能够失去相似的如下成果：

<div></div>
div {
    width: 220px;
    height: 97px;
    background: linear-gradient(#f00, #f00), url(https://s1.ax1x.com/2023/08/15/pPQm9oT.jpg);
    background-blend-mode: lighten;
    background-size: contain; 
    animation: horizontal 3.7s infinite -1.4s linear alternate,
            vertical 4.1s infinite -2.1s linear alternate,
            colorX 37s infinite -1.4s steps(10),
            colorY 28.7s infinite -2.1s steps(7);
    animation-composition: accumulate;
}
@keyframes horizontal {from { transform: translateX(0); }
    to {transform: translateX(calc(100vw - 100%)); }
}
@keyframes vertical {from { transform: translateY(0); }
    to {transform: translateY(calc(100vh - 100%)); }
}
@keyframes colorX {
    to {filter: hue-rotate(2185deg);
    }
}
@keyframes colorY {
    to {filter: hue-rotate(1769deg);
    }
}

成果如下：

下面的 DEMO 是基于元素背景色的，本 DEMO 是基于图片的，因而这里多了一步，利用 mix-blend-mode，实现了图片色彩的变动。

残缺的代码，你能够戳这里：CodePen Demo — Random DVD Path

实现多粒子碰撞

OK，咱们再进一步，基于下面的成果，咱们能够实现各种乏味的粒子成果，如果同时让页面存在 1000 个粒子呢？

上面是我应用 CSS-Doodle 实现的纯 CSS 的粒子成果，其外围原理与下面的保持一致，只是增加了更多的随机性：

Amazing！是不是十分乏味，整个成果的代码基于 CSS-doodle 的语法，不超过 40 行。残缺的代码，你能够戳这里：CSS Doodle – CSS Particles Animation

最初

总结一下，本文介绍了如何奇妙的利用 CSS 中的各种高阶技巧，组合实现相似于碰撞场景的动画成果。创立出了十分乏味的 CSS 动画，期间各种技巧的组合使用，值得好好推敲学习。

OK，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

正文完
前端
发表至： 前端
2023-08-22
 0
关于前端:JavaScript-设计模式-单例模式
关于前端:什么是-Chrome-开发者工具-performance-面板-Experience-里的-Layout-shift
关于github:前端开发越发复杂你是否需要低代码平台
关于前端:表格技术七十二变手把手教你用Canvas电子表格做电子签名