β

按钮加载效果实现

白糖 43 阅读

1. 背景

之前的加载大部分都是 toast 的形式,但现在一些 Native 的按钮点击都将加载动画做在了按钮上,给人感觉很好,比较常见的就是移动端支付宝的支付按钮,点击后有个旋转的圆圈表示加载。现在也来模拟一个该效果。

2. 实现

看到这种线段变化的动画,直接想到之前用的 svg 配合 strokeDasharray 属性来实现,具体效果如下:

See the Pen DynamicButton by zee ( @bt404 ) on CodePen .

注: 转载注明出处并联系作者,本文链接: https://nodefe.com/button-animation/

作者:白糖
口淡
原文地址:按钮加载效果实现, 感谢原作者分享。

发表评论