Html 中的摆动弹性动画

Question

看看这个Dribble

动画结束时有一个绿色条带进来，效果很酷。我想在 html.

中完成

关于如何实现这一点有什么建议吗？

Answer 1

有可能。这是一个示例 Elastic SVG，还有许多其他示例和库可用于使用 SVG 或 Canvas 元素和 javascript.

创建这些类型的 FX

Answer 2

@Blindman67 给了一个很好的link。但它非常受限制且不可扩展。

但我发现了一些其他很酷的方法。

使用 JavaScript 更新 svg 路径属性并使用 dynamic.js

对其进行动画处理

<svg>
  <path fill="#3F51B5" d="M0,0 L320,0 320,160Q160,160 0,160"></path>
</svg>

可以轻松地用 jQuery 或 JavaScript

更新“d”属性

检查下面的 fiddle.. 它是用 vuejs 构建的，但它是一个很好的例子。 http://jsfiddle.net/yyx990803/2eg8kbyk/light/

希望对大家有所帮助。

Wobble Elastic Animation in Html