javascript - 这个JS动画是怎么制作出来的呢？

Question

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

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

动画: https://stripe.com/billing

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

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

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

Answer 1

如果您使用 F12 检查元素并转到“计算”选项卡，您将看到它们具有 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 修改其类(如本演示)或直接修改对象样式属性来更改其转换后的 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