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

Question

Stripe 和其他网站在其营销页面上使用这种 "screencast demo" 样式。他们没有展示他们平台的视频或 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） .

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

Answer 1

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

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

这是我刚刚完成的演示的片段：

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;
}

<div class="yay" />

您只需通过 JavaScript 通过修改其 class（如本演示）或直接修改对象样式属性来更改其转换后的 CSS 属性。浏览器将完成剩下的工作。实际上很酷。您甚至可以使用 ::hover、::active 等伪选择器来修改属性，它们也会具有动画效果。零 JavaScript 涉及！

他们所做的是让这些属性由 CSS 动画化，他们只是每隔 X 秒设置目标 positions/sizes/whatever。

附录： 使用外部工具制作所有动画很容易，该工具将所有内容转换为 CSS 过渡，但因为市场上充斥着数十种工具并且他们在导出到 HTML5 时不设置任何签名，无法知道他们是否已为每个元素手动完成。顺便说一句，创建您手动显示的示例并不难。如果您最终习惯了 HTML5，那么在使用外部工具时您会损失相同的时间。通过 "JS packages" 有使用 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

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

How is this JS animation created?

javascript

animation

css-animations

stripe-payments

gsap