前不久即刻更新到了2.0,整体 UI 虽然朴实了不少,但也不乏一些精致的效果,比如收藏按钮,效果如下,代码已上传github

实现这个效果需要三个元素

  1. 最下层利用 maskLayer 创造一个爱心形状的 View

  2. 中间层添加一个镂空的 ImageView 用于显示爱心边框

  3. 最上层需要一个用于显示填充动画的View

maskLayer 这里就不过多介绍了,如果用代码创建一个爱心形状的 maskLayer 也未免太麻烦,
虽然有paintcode这样的工具存在,所以直接用图片创建 maskLayer 是最佳方案:

- (void)setMaskImage:(UIImage *)maskImage{_maskImage = maskImage;if (!_maskLayer) {self.maskLayer = [CALayer layer];self.maskLayer.frame = CGRectMake(0,0, _maskImage.size.width, _maskImage.size.height);self.layer.mask = _maskLayer;// 必须设置frame}self.maskLayer.contents = (id)[_maskImage CGImage];
}

这里也验证下即刻是用图片创建 maskLayer 的事实,从 ipa 包中提取 Assets.car 文件,实际上这个文件就是Images.xcassets
但是 Mac 上不能直接打开,所以就需要用到ThemeEngine工具,浏览里面的内容就可以找到:

很显然第一张图片就是用于创建 maskLayer,另一张就是用于第二个元素的创建,只需要简单的添加一个 Iamgeview

- (void)setBorderImage:(UIImage *)borderImage{_borderImage = borderImage;if (!_borderImageView) {self.borderImageView = [[UIImageView alloc] init];self.borderImageView.frame = CGRectMake(0,0, _borderImage.size.width, _borderImage.size.height);[self addSubview:_borderImageView];}self.borderImageView.image = _borderImage;[self sendSubviewToBack:_borderImageView];
}

最后,利用 setFillColor 方法创建 fillView,设置 transform 来配合之后的动画

- (void)setFillColor:(UIColor *)fillColor{_fillColor = fillColor;if (!_fillView) {self.fillView = [[UIView alloc] initWithFrame:self.bounds];self.fillView.layer.cornerRadius = self.bounds.size.width * 0.5f;self.fillView.transform = CGAffineTransformMakeScale(0, 0);[self addSubview:_fillView];}self.fillView.backgroundColor = _fillColor;
}

即刻APP收藏按钮的实现相关推荐

  1. android仿小米运动,GitHub - luciferldy/Bnimation: 模仿即刻 App 点赞与数字跳动效果,模仿小米运动首页转圈圈的烟花效果...

    Bnimation 现阶段实现了模仿即刻点赞效果以及数字跳动增长,小米运动首页烟花转圈圈(•̀⌄•́)效果. 即刻 即刻的点赞效果 下面是我实现的效果(最下为 TextView 自带的展示数字效果) ...

  2. Ctrl+D 快捷键:浏览器 · 添加收藏按钮

    Ctrl+D 快捷键:浏览器 · 添加收藏按钮 快捷键: Ctrl + D 以上就是关于" Ctrl+D 快捷键:浏览器 · 添加收藏按钮"的全部内容.

  3. 新浪微博回应热搜被暂停更新一周;即刻 APP 下架一年后恢复上线;Android 11 Beta 版发布| 极客头条...

    整理 | 屠敏 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极 ...

  4. 腾讯“立知”被指抄袭“即刻” APP,目前已被下线

    点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 据报道,腾讯近日上线了一款资讯阅读类 APP "腾讯立知",然而这款刚刚 ...

  5. 即刻App产品分析报告

    即刻产品分析报告 一.前期描述 即刻是一款基于兴趣的信息推送工具,支持iOS和Android平台. 操作方便.简洁.易上手,相比较于网易新闻.腾讯新闻.今日头条等新闻客户端,即刻更具有倾向性,它可根据 ...

  6. invoke 按钮点击_使用aspectj对app中按钮的快速点击进行处理

    最近项目进入紧锣密鼓测试阶段,昨天测试提了一个issue,app中按钮都没有做快速点击校验. 这就涉及到aop面向切面编程了!后端开发Spring对aop应该很熟悉,android开发中可能用到aop ...

  7. ios开发收藏按钮_iOS使用CoreData实现收藏功能

    实现收藏有很多方式,我在自己练习的项目中用CoreData实现了一下收藏功能,注释很少,算是自己做的一个笔记. 首先创建一个工具类继承NSObject,在里面实现所需要的方法. 工具类的.h文件: t ...

  8. 怎么在php中设置收藏按钮,如何在ecshop首页给商品加入立即购买与收藏按钮

    在ecshop首页给商品加入立即购买与收藏按钮,直接模板当中操作修改,无需修改任何PHP代码.方法简便.以下是最模板提供的方法,如果出现错误,请拿错误在最模板网站搜索,继续修改下去. 第一步:首先查看 ...

  9. 一个类似抖音 APP 拍摄按钮效果的控件

    TouchButton 一个类似抖音 APP 拍摄按钮效果的控件 效果图预览 用法 <net.angrycode.library.TouchButtonandroid:id="@+id ...

最新文章

  1. 【译】.NET Core 是 .NET 的未来
  2. html怎样添加日历控件,向日历控件中添加自定义内容
  3. 网易云信入选《2021 年浙江省首版次软件产品应用推广指导目录》
  4. ( )不是对网络模型进行分层的目标。
  5. 解决SurfaceView渲染的各种疑难杂症
  6. axios请求拦截器错误_Axios使用拦截器全局处理请求重试
  7. java arraylist 过滤_关于java:ArrayList过滤器
  8. 重磅!2018人脸识别研究报告(附全文下载)
  9. 继承中的构造函数问题
  10. SQL_drop删除表、数据库
  11. 【mysql】扩展-变量_存储过程_函数
  12. java api1.8中文版(由谷歌,百度,有道,必应翻译).md
  13. 利用哈夫曼编码英文字母表
  14. LimeSDR外壳安装及基本测试
  15. 历史大数据证“低薪薄俸”易诱发腐败
  16. Anaconda 添加清华镜像源
  17. Methods annotated with ‘@Async‘ must be overridable
  18. android 5.1 随机IMEI号
  19. 【ExpandTabView】Android 仿大众,美团下拉菜单ExpandTabView
  20. Pentadactyl使用技巧

热门文章

  1. Kyligence 荣获“高新技术企业”认证称号
  2. 克隆技术与DOS批处理命令
  3. 【华为OD机试真题 python】天然蓄水库【2023 Q1 | 100分】
  4. Matlab求解数学问题
  5. python用户价值分析
  6. 新路由D1 网件R6400 测速
  7. BT种子怎么用 BT种子怎么下载 BT种子是什么意思
  8. [FineReport]数据填报
  9. 什么标签用于在表单中构建复选框_目前艾滋病主要的传播方式是(  )。
  10. SSM整合+视频网站开发