Day15 - 遮罩效果

作者: Codepgq | 来源:发表于2016-09-21 10:32 被阅读182次

    效果如图:

    实现效果如图

    1、UI布局

    1.1进入LaunchScreen.storyboard中设置背景色为蓝色
    1.2拖入一个ImageView,设置大小100 81,并且垂直水平居中

    效果如图

    2、在AppDelegate.swift中实现效果

    思路解析:

    从效果上看是有一张背景图片,还有一张前景图片(遮罩效果),然后前景图片不断扩大,然后在取消遮罩效果。
    所以需要一个背景图,一个前景图,一个动画扩大的效果
    OK代码实现

    <br />
    2.1创建背景图

    //懒加载图片
        private lazy var imageView : UIImageView = {
           let iv = UIImageView(frame: UIScreen.mainScreen().bounds)
            iv.image = UIImage(named: "7501334")
            return iv
        }()
    

    <br />
    2.2创建遮罩

    //懒加载Layer
        private lazy var imageViewMask : CALayer = {
            let layer = CALayer()
            layer.contents = UIImage(named: "twitter logo mask")?.CGImage
            layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 81)
            layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
            layer.contentsGravity = kCAGravityResizeAspect
            return layer
        }()
    

    <br />
    2.3在didFinishLaunchingWithOptions方法中,创建Window,并设置好属性,以及开始动画

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
            
            //创建window
            window = UIWindow(frame: UIScreen.mainScreen().bounds)
            //设置window根视图
            window?.rootViewController = UIViewController()
            //添加图片
            window?.addSubview(imageView)
            //设置遮罩
            imageView.layer.mask = imageViewMask
            //设置遮罩居中
            imageViewMask.position = (window?.center)!
            //开始动画
            startAnimationMask()
            //设置背景颜色
            window?.backgroundColor = UIColor(red:0.117, green:0.631, blue:0.949, alpha:1)
            //设置为可见
            window?.makeKeyAndVisible()
            
            return true
        }
    

    <br />
    2.4实现动画代码,使用关键帧动画CAKeyframeAnimation

    private func startAnimationMask(){
            //关键帧动画
            //1、创建keyFrameAnimation
            let keyFrameAnimation = CAKeyframeAnimation(keyPath: "bounds")
            //2、设置时长
            keyFrameAnimation.duration = 0.6
            //3、设置代理
            keyFrameAnimation.delegate = self
            //3.1设置开始时间
            keyFrameAnimation.beginTime = CACurrentMediaTime() + 0.5
            //3.2设置动画模式
            keyFrameAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)]
            //4、设置帧
            let key1 = NSValue(CGRect: imageViewMask.bounds)
            let key2 = NSValue(CGRect: CGRect(x: 0, y: 0, width: 80, height: 65))
            let key3 = NSValue(CGRect: CGRect(x: 0, y: 0, width: 1600, height:  1300))
            keyFrameAnimation.values = [key1,key2,key3]
            //4.1、设置帧动画时长
            keyFrameAnimation.keyTimes = [0,0.3,1]
            //5、添加到mask上
            imageViewMask.addAnimation(keyFrameAnimation, forKey: "bounds")
        }
    

    <br />
    2.5在动画结束后,我们要把遮罩层移除

    //动画结束后,把遮罩删除
        override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
            imageView.layer.mask = nil
        }
    

    <br />
    到这里就完成效果了,你们可以修改动画方式来完成更多的效果
    <br />
    <br />

    Demo - ImageViewMask

    相关文章

      网友评论

        本文标题:Day15 - 遮罩效果

        本文链接:https://www.haomeiwen.com/subject/ziqaettx.html