html gif 蒙层,使用蒙层实现启动图动画效果

一个朋友的产品经理提出了一个新的需求：给启动图添加一个动画效果，要求上面的 “城市客厅” 图片由中心点开始，以一个圆形扩大展示出来。我觉得挺有意思的，然后就根据自己的思路写了一个小小的demo。运行效果图如下。

效果图

实现思路：

启动部分：使用LaunchImage作为启动图的图片来源，制造一个假象控制器，使控制器的背景图和启动图的图片保持一致，设置该控制器为rootViewController。等“启动页”动画结束之后，再更换rootViewController。

动画部分：使用CALayer的mask(蒙层)实现。

简单的介绍一下mask：/* A layer whose alpha channel is used as a mask to select between the

* layer's background and the result of compositing the layer's

* contents with its filtered background. Defaults to nil. When used as

* a mask the layer's `compositingFilter' and `backgroundFilters'

* properties are ignored. When setting the mask to a new layer, the

* new layer must have a nil superlayer, otherwise the behavior is

* undefined. Nested masks (mask layers with their own masks) are

* unsupported. */

@property(nullable,strong)CALayer*mask;

以上是CALayer的头文件关于mask的说明，mask实际上layer内容的一个遮罩。

如果我们把mask是透明的，实际看到的layer是完全透明的，也就是说只有mask的内容不透明的部分和layer叠加的部分才会显示出来，效果如下：

该图片来源于网络mask有一下几个特性：

mask 属性本身就是个CALayer类型。

有和其他图层一样的绘制和布局属性。

mask图层定义了父图层的部分可见区域。

mask图层的 Color 属性是无关紧要的。mask图层实心的部分会被保留下来，其他的则会被抛弃。

CALayer 蒙版图层真正厉害的地方在于蒙版图层不局限于静态图。任何有图层构成的都可以作为mask属性，这意味着你的蒙版可以通过代码甚至是动画实时生成！

以上只是简单的对(mask)蒙层做了介绍，感兴趣的话，还需要读者自行去探究。回到正题，我们要生成一个圆形的蒙层，用该蒙层去显示View的需要显示的区域。怎么做到动画呢，这里我用到的是计时器，不断地去生成一个半径变大的蒙层(圆形)，然后不断地去赋给显示View的蒙层。这样就构成一个动画效果，动画的速度可以根据需求去调整。核心代码如下：//6.根据launchView的圆心,去生成一个贝塞尔曲线,并根据贝塞尔曲线的路径生成CAShapeLayer,并将其赋值给launchView的CALayer的蒙层(mask图层定义了父图层的部分可见区域)

UIBezierPath*path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(self.launchView.center.x-self.launchView.frame.origin.x,self.launchView.center.y-self.launchView.frame.origin.y)radius:self.countstartAngle:0endAngle:2*M_PIclockwise:YES];

self.maskLayer.path= path.CGPath;

self.launchView.layer.mask=self.maskLayer;

这样，就实现了启动图的动画效果。有问题的话，欢迎在讨论区讨论，喜欢的话，不放收藏一下。