zoukankan      html  css  js  c++  java
  • 自己实现苹果安装app动画

    最近在学习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分类
  • 相关阅读:
    HDU4685 Prince and Princess 完美搭配+良好的沟通
    坚持 本身是一种策略
    PowerDesigner中SQL文件、数据库表反向生成PDM
    Filter技术+职责链模式
    [ACM] poj 1258 Agri-Net (最小生成树)
    android 屏幕适配 课程笔记
    HDU 5071 Chat
    【玩转微信公众平台之中的一个】序章(纯粹扯淡)
    HTML表格标签的使用-<table>
    hdu 1251 统计难题 (map水过)
  • 原文地址:https://www.cnblogs.com/Phelthas/p/4668533.html
Copyright © 2011-2022 走看看