这个 JS 动画是如何创建的？答案

【问题标题】：How is this JS animation created?这个 JS 动画是如何创建的？
【发布时间】：2020-02-11 02:30:29
【问题描述】：

Stripe 和其他网站在其营销页面上使用这种风格的“截屏演示”。他们没有展示他们平台的视频或 gif，而是使用真实的 HTML 元素创建了一个风格化的 JS 动画。

如果你检查它们的动画，你会发现所有的运动部件都是div 元素。根本不使用任何图像、视频、GIF 或 svg。

JS 脚本示例： https://b.stripecdn.com/site-srv/assets/compiled/js/sprockets-js-v3/billing/interactive-invoice-806d1d5b2d4f6d9c5c27.min.js

我可以从网页中看到用于创建动画的缩小的 JS 文件。很难判断他们是自己编写了这个 JS（考虑到他们的网站上有多少这样的动画，这似乎很辛苦），或者他们是否使用桌面应用程序（如 Adobe AfterEffects 或类似的），或者他们是否使用 JS 包（如 GreenSock） .

那么可能使用哪些工具来构建这些？

【问题讨论】：

标签： javascript animation stripe-payments css-animations gsap

【解决方案1】：

如果您使用 F12 检查元素并转到“计算”选项卡，您将看到它们具有 CSS transition 属性：

CSS transition properties 只是告诉浏览器将 CSS 属性从当前值动画到新值。是一种非常简单且高效的动画制作方式。我强烈推荐他们。

这是一个我刚刚完成的带有演示的 sn-p：

setTimeout(function() {
    document.querySelector(".yay").classList.add("anim");
}, 1000);

.yay {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 500ms, top 500ms, left 500ms;
}
.anim {
    top: 100px;
    left: 100px;
    background-color: blue;
}

&lt;div class="yay" /&gt;

您只需通过 JavaScript 通过修改其类（如本演示）或直接修改对象样式属性来更改其过渡的 CSS 属性。浏览器将完成其余的工作。其实很酷。您甚至可以使用::hover、::active 等伪选择器来修改属性，它们也会设置动画。零涉及 JavaScript！

他们所做的是让这些属性由 CSS 动画化，并且他们只需设置目标位置/大小/每 X 秒。

附录： 很容易所有的动画都是使用一个外部工具来制作的，该工具可以将所有东西都转换为 CSS 过渡，但是因为市场上充斥着几十种工具，而且它们没有设置任何签名他们导出到 HTML5，不可能知道他们是否为每个元素手动完成。顺便说一句，创建手动显示的示例并不难。如果您最终习惯了 HTML5，那么在使用外部工具时会浪费同样的时间。通过“JS 包”，有一些使用 CSS 过渡的包和其他有自己的时间线的包。 GreenSock 不使用 CSS 过渡，所以绝对不是 GreenSock。

特别是在 Stripe 案例中，他们使用“Animate Plus”，您可以在此处看到：https://b.stripecdn.com/site-srv/assets/compiled/js/sprockets-js-v3/external/animateplus-compat-2.0.1.js-490ccee558f4d2e2d207.min.js

【讨论】：