最近在学习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. [汇编与C语言关系]3. 变量的存储布局

    以下面C程序为例: #include <stdio.h> ; ; ; int c; int main(void) { ; char b[] = "Hello World" ...

  2. mysql数据库学习目录

    前面的话 对于前端工程师来说,数据库并不是主要技能点,但是基本的增删改查操作还是需要了解的.小火柴将mysql数据库的学习记录整理如下 目录  前端学数据库之基础操作 前端学数据库之数据类型 前端学数 ...

  3. 【开源】OSharp框架解说系列(2.2):EasyUI复杂布局及数据操作

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  4. 引用类型-Array类型

    ECMAScript数组的每一项可以保存任何类型的数据,并且数组的大小是可以动态调整的. 创建数组的基本方式有两种,第一种是使用Array构造函数 var colors = new Array(); ...

  5. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  6. GCD-两个网络请求同步问题

    在网络请求的时候有时有这种需求 两个接口请求数据,然后我们才能做最后的数据处理.但是因为网络请求是移步的 .我们并不知道什么时候两个请求完成 . 通常面对这样的需求会自然的想到 多线程 啊 .表现真正 ...

  7. swift中Range的使用书名

    在swift中Range有两种用法 1.把字符串转换成NSString来使用 //这里是把swift的字符换转换成了nsstring 使用 let str :NSString = text.strin ...

  8. C++运算符重载

    C++运算符重载 基本知识 重载的运算符是具有特殊名字的函数,他们的名字由关键字operator和其后要定义的运算符号共同组成. 运算符可以重载为成员函数和非成员函数.当一个重载的运算符是成员函数时, ...

  9. hibernate笔记--单(双)向的多对多映射关系

    在讲单向的多对多的映射关系的案例时,我们假设我们有两张表,一张角色表Role,一张权限表Function,我们知道一个角色或者说一个用户,可能有多个操作权限,而一种操作权限同时被多个用户所拥有,假如我 ...

  10. Python的安装和详细配置

    Python是一种面向对象.解释型计算机程序设计语言.被认为是比较好的胶水语言.至于其他的,你可以去百度一下.本文仅介绍python的安装和配置,供刚入门的朋友快速搭建自己的学习和开发环境.本人欢迎大 ...