最近在学习CALayer相关动画,然后某一天突然发现苹果安装app这动画就很不错啊,所以就想自己实现下。
具体效果如图:
还是不试不知道一试吓一跳啊,这看上去简单的动画没我想象的那么简单。
首先这个动画分两步:
一是中间的圆像时钟一样走一圈;
二是外面的大圆变大到包括整个图片的大小;
 
首先是第一步:
这时候大圆外部跟小圆内部都是半透明的,小圆走过的部分会变成透明。
一开始我一直想用mask的方式来实现,结果试了老好久还是不行,就扔那儿了。
过了两天再看它,发现其实自己想复杂了,从表面看的话,
第一部分的动画是画一个圆,然后用一个颜色填充它,中间就是画圆的一部分然后填充,问题是这样一点点走的动画好难实现;
所以我就想如果是自己用笔画的话要怎么办?
然后发现用笔画的话,只要用跟半径一样宽的线来画就很easy了,画多少就是多少,想停哪儿就停哪儿!
然后跟代码一对照才恍然大悟,CAShapeLayer就有lineWidth这个属性啊,也这么画就很简单了!
(这里需要注意CAShapeLayer计算fillColor的范围时,是按照线的中心计算的,所以实际在代码中线宽是半径2倍)
 
透明的问题也是一样,根本不用什么mask,画的时候是覆盖上去,那画反过来不就是一点点露出来了嘛!!!
放到代码里的话,让strokeEnd从1变到0就ok了。 (这里需要注意方向的问题,贝塞尔曲线有取反方向的方法,设置path的时候注意)
 
那剩下的问题是:怎么画一个中间圆透明,圆与边框之间半透明的图形出来?
我首先想到的是。。。。做个图片。。。然后试了试,果然可以!不过第二步的动画没法做了。。。
所以还是得用CAShapeLayer自己画。。。
这里经春哥指点才解决了这个问题,用到了一个比较高端的参数,就是CAShapeLayer的fillRule参数。
有两个可选值kCAFillRuleEvenOdd 和 kCAFillRuleNonZero
 
大致是:
nonzero字面意思是“非零”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。下图演示了nonzero规则:

 

evenodd字面意思是“奇偶”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。下图演示了evenodd 规则:
 
 
 
具体就是先画一个矩形,然后再用 appendPath方法添加一个圆进去作为整个CAShapeLayer的path;(也可以用 moveToPoint方法);
利用fillRule让它圆内部透明,外部半透明。
 
然后把这个layer add 上去就可以了。
 
剩下的就是一个stokeEnd的动画,就简单了。
 
第二步:让大圆的半径变大
这个只是个path动画,这里的大圆是上面第一步中最后那个方法画出来的,只需要设置path为最终的大小就可以了,也比较简单
 
还有一些细节见代码注释;
具体demo见gitHub:https://github.com/Phelthas/LXMRevealDemo 的LXMAppleReveal分类

自己实现苹果安装app动画的更多相关文章

  1. iOS:苹果企业证书通过网页分发安装app

    本文转载至 http://blog.sina.com.cn/s/blog_6afb7d800101fa16.html 苹果的企业级证书发布的应用,是不用设备授权即可直接安装,并且不限设备上限.为了方便 ...

  2. 解决企业In-House安装APP需HTTPS支持的问题(转载)

    同事写的一篇文章,感觉不错,转过来. 解决企业In-House安装APP需HTTPS支持的问题 问题背景: 能否通过应用服务器发布企业应用: 解决iOS7.1后,发布地址必须为HTTPS服务器. 写作 ...

  3. 给iOS 模拟器“安装”app文件

    前言 刚刚接触iOS的时候,我就一直很好奇,模拟器上面能不能直接安装app呢?如果可以,我们就直接在模拟器上面聊QQ和微信了.直到昨天和朋友们聊到了这个话题,没有想到还真的可以给模拟器“安装”app! ...

  4. 勾勾街——一个专注于免越狱免签名的苹果ios APP打包生成的网站

    自涛舅舅研发的“苹果ios APP自助生成系统”上线以来,每天都有大量的用户注册和生成免越狱app,为什么? 因为我们有明显的技术优势,APP不需要上架appstore, 生成APP又不需要企业签名证 ...

  5. 勾勾街:一个专业的苹果ios app 自助打包的网站,免越狱,免证书签名

    众所周知,苹果的APP开发是需要基于MAC环境的,而我们很多的开发者并没有这样的条件,如果单单为发布一款app就去买一台价格昂贵的MAC那成本就太高了! 就算你有一台MAC,也有能力自己开发出一款基于 ...

  6. 极速创建 IOS APP !涛舅舅苹果 IOS APP自助生成系统正式上线

    经过大量的测试和开发工作,涛舅舅苹果 IOS APP自助生成系统正式上线! 本系统主要功能: 1.用最最简单的方式将H5网站打包生成一个苹果APP 2.只需要提供APP标题,H5网站首页url地址,一 ...

  7. 极速创建 IOS APP !涛舅舅苹果 IOS APP自助生成系统!不用证书、不用越狱、永久可用

    不用签名将网页封装成苹果APP,无需苹果企业签名,IPA签名,ios签名,免越狱安装 (本方法只支持网站封装app,原生的用不了,详细请咨询客服) 近期很多朋友问我把网站变成app的方法,原因很多种, ...

  8. iOS APP下载安装时,如果出现此时无法下载安装APP的字样时,一些解决思路

    1.在iosAPP下载安装时,如果出现此时无法下载安装APP的字样时,可能是苹果系统进行了支持更新,并需要我们确认条约.至于如何判断是否是苹果系统进行了更改,只需要我们进入开发者账号,进入我的账户(A ...

  9. js判断本机是否已安装app

    需求:在浏览器或者app webview中打开的页面,js判断本机是否已安装搜狐新闻客户端. 一.微信 1.分享——好友/朋友圈,feed会有搜狐新闻标记,打开url后缀参数isappinstalle ...

随机推荐

  1. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  2. 【原创】.NET平台机器学习组件-Infer.NET连载(一)介绍

    Infer.NET机器学习翻译系列文章将进行连载,感兴趣的朋友请收藏或关注             本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/428 ...

  3. Web Fundamentsals学习1-Multiple-Screen-Site

    你的一个运行于多设备网站(Your First Multi-device Site) 遵循的步骤: 1.定义信息架构(information architecture)和页面结构(structure ...

  4. Openfire/XMPP学习之——一个简单的Smack样例

    昨天讲了Openfire的搭建和配置,今天来讲一下Smack.如果对如何搭建和配置Openfire的,可以参考Openfire/XMPP学习之——Openfire的安装.配置. Smack是一个开源, ...

  5. 网络通信简单实例BIO,NIO,AIO

    这里,我将做一个简单的通信程序,分别使用三种原始的通信工具:BIO,NIO,AIO. 功能就是一个服务器,一个客户端.服务器就是处理请求,返回响应.而客户端就是连接服务器,发送请求,接收响应. 第一步 ...

  6. geotrellis使用(九)使用geotrellis进行栅格渲染

    目录 前言 图像渲染 总结 参考链接 一.前言        前面几篇文章讲解了如何使用Geotrellis进行数据处理.瓦片生成等,今天主要表一下如何使用Geotrellis进行栅格渲染.     ...

  7. 在C#中使用Spire.doc对word的操作总结

    在C#中使用Spire.doc对word的操作总结 在最近的工程中我们要处理一些word文档.通过在网上的大量搜索,我发现大多数软件功能不是不完整就是有重复.极少数可以完全实现的word组件又要收费. ...

  8. HTML5 Canvas 画布

    一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属 ...

  9. git安装和初次使用

    为了知道某人安装git,我也是重装啊. 1.下载git并安装 2.打开我的电脑,右键属性,选择高级设置,打开环境变量设置: 3.键盘输入窗口键+r,或者点击开始->运行 输入cmd 在新打开的命 ...

  10. Entity Framework Model First下改变数据库脚本的生成方式

    在Entity Framework Model First下, 一个非常常见的需求是改变数据库脚本的生成方式.这个应用场景是指,当用户在Designer上单击鼠标右键,然后选择Generate Dat ...