iOS动画-扩散波纹效果

最终效果



实现思路动画的表现形式是颜色以及大小的变化，整体效果可以看做多个单独的波纹效果的叠加。因此我们可以创建多个CALayer，分别赋予CABasicAnimation动画，组成最终的动画效果。因此我们先从单个波纹扩散效果来尝试，然后根据时间差将效果叠加起来。代码1.新建动画 View RippleAnimationView，动画效果在animationLayer上实现。新建RippleAnimationView类，继承自UIView，设置扩散倍数，然后重写- (void)drawRect:(CGRect)rect方法，在方法内部新建承载动画的animationLayer。2.创建单个扩散的动画承载CALayer，实现扩散效果。首先实现缩放动画新建CALayer，并在layer上加载动画。然后将这个Layer放在animationLayer上。可以看看现在的效果是这样的

3. 加入背景色以及边框色的渐变效果，将单一的缩放动画合并为动画组CAAnimationGroup。（ps: 除了改变背景色，还要设置并改变边框色的更主要原因是去除锯齿）现在就有种渐变的感觉了

4. 同时创建三个扩散动画的CALyer，将开始动画的时间错开，同时添加到animationLayer上。然后效果有点……一言难尽……

真是很有纪律性的变化啊~~好吧，只需要加入动画曲线就好了5. 最后加入动画速度曲线如果需要点扩散，那就设置 frame 极小，同时扩散倍数增大即可。将动画View垫在另一个圆形View之下即可实现最上方的效果。关闭背景色，重调边框色和边框宽度即可实现第二种效果。