Question

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）。

那么有哪些工具可以用来构建这些工具？

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

如何创建此JS动画？

1 个答案: