美文网首页
图片倒影

图片倒影

作者: child_cool | 来源:发表于2018-05-03 11:40 被阅读4次
    A87C5877-1A82-4ED8-A48C-382C39708A6A.png

    方法一

    • 将图片添加到两个相同的layer上
    • 对要倒影的结果layer 进行180度旋转
    • 使用渐变图层进行颜色处理
    let balloon = UIImage(named: "1.jpeg")
            
            let topLayer = CALayer()
            topLayer.bounds = CGRect(x: 0.0, y: 0.0, width: balloon?.size.width ?? 0, height: balloon?.size.height ?? 0)
            topLayer.position = CGPoint(x: UIScreen.main.bounds.width/2, y: 120)
            topLayer.contents = balloon?.cgImage
            view.layer.addSublayer(topLayer)
            
            let reflectionLayer = CALayer()
            reflectionLayer.bounds = CGRect(x: 0.0, y: 0.0, width: balloon?.size.width ?? 0, height: balloon?.size.height ?? 0)
            reflectionLayer.position = CGPoint(x: UIScreen.main.bounds.width/2, y: 400)
            reflectionLayer.contents = topLayer.contents
            reflectionLayer.setValue(NSNumber(value: 180 * Double.pi / 180), forKeyPath: "transform.rotation.x")
            
            
            let gradientLayer = CAGradientLayer()
            gradientLayer.bounds = reflectionLayer.bounds
            gradientLayer.position = CGPoint(x: reflectionLayer.bounds.width/2, y: reflectionLayer.bounds.height/2)
            gradientLayer.colors = [UIColor.clear.cgColor,UIColor.white.withAlphaComponent(1).cgColor]
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 1)
            
            reflectionLayer.mask = gradientLayer
            view.layer.addSublayer(reflectionLayer)
    

    方法二

    • 自定义view继承uiview,重写方法
    + (nonnull Class)layerClass{
                return [CAReplicatorLayer class];
             }
    
    • 绑定自定义view到self.view上
    • 绕着父层的锚点旋转,
    CAReplicatorLayer *repL = (CAReplicatorLayer *)self.view.layer;
             repL.instanceTransform = CATransform3DMakeRotation(M_PI, 1, 0, 0);
             repL.instanceCount = 2;
    
    • 底部图片添加倒影效果
    更改颜色通道
           每一个颜色通道减等于0.1
    
            更改每一个颜色通道
            repL.instanceRedOffset -= 0.1;
            repL.instanceBlueOffset -= 0.1;
            repL.instanceGreenOffset -= 0.1;
            repL.instanceAlphaOffset -= 0.1;
    

    相关文章

      网友评论

          本文标题:图片倒影

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