button按钮(icon)

button按钮(icon),第1张

    上一节,我们已经基本实现了按钮组件,但是还不够完善,因为我们的组件并未内置图标,像antd就可以通过icon属性显示一个图标按钮。这一节就来实现它

需求分析

    添加icon属性,用来显示不同的icon图标,并且支持传递字符串或对象,对象形式将用来进行更多控制

      添加loading属性,标识按钮加载中

基本实现

      增加类型定义

      增加类名标识

                当icon或loading属性存在时,增加su-btn-icon标识,对应的css如下

      处理icon渲染

                该函数将在按钮文本前被调用,即

      使用

动画可以拆分为三部分:

1.将矩形按钮缩成圆型,首先隐藏title,然后改变按钮的frame为位于中心点的以原有高度为边长正方形,最后裁切圆角,达到效果。

2.旋转圆形按钮,首先需要添加一个白色小弧线,可以采用CAShapeLayer实现,然后让按钮绕Z轴旋转,可以采用CABasicAnimation实现。

3.将圆形按钮展开成矩形,首先还原按钮的frame,然后还原圆角,最后显示title。

1.对外接口

2.动画实现

源码放在了 github 上,欢迎指正,觉得不错的star一下呀!


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/7971743.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存