Как я могу охарактеризовать свойства моего пользовательского UIView?

Question

Мне часто нужно окружать только два угла в представлении, а иногда нужно использовать градиенты. Я обнаружил, что общее решение использования CALayerMask вредно для производительности, поэтому я разработал собственное решение, переопределяя drawRect(rect: CGRect). Он работает хорошо, обеспечивая простой способ округления некоторых или всех углов, нарисовать границу и использовать как линейные, так и радиальные градиентные заливки, даже имея возможность устанавливать цветовые остановки для градиентов.

К сожалению, когда я пытаюсь оживить эти свойства с помощью UIView.animateWithDuration, мои углы, градиенты и границы не оживляют. Скорее, они выглядят «растянутыми» в начальном состоянии, а затем оживляют до конечного состояния. Я читал, что это можно решить с помощью анимации CALayer, но я не совсем понимаю суть проблемы. Есть ли способ, которым я могу решить это, когда класс сейчас? Если нет, то когда drawRect(rect: CGRect) предпочтительнее drawLayer(layer: CALayer, inContext ctx: CGContext)?

Я также открыт для общих предложений по улучшению этого класса.

AppocalypseUI.swift (обеспечивает функции поддержки для операций UI)

// 
// AppocalypseUI.swift 
// Soapbox 
// 
// Created by Joseph Falcone on 6/2/16. 
// Copyright © 2016 Joseph Falcone. All rights reserved. 
// 

import UIKit 

class AppocalypseUI: NSObject 
{ 
    /// Generates an array of CGFloat values ranging from 0.0-1.0 which represent the color stops in a gradient 
    class func makeLinearColorStops(numStops:Int) -> [CGFloat] 
    { 
     assert(numStops >= 2, "Must have at least two color stops.") 

     let stepIncrement = 1.0/Double(numStops-1) 
     var returnArr : [CGFloat] = [] 

     // The first stop is always 0 
     returnArr += [0.0] 

     for i in 1 ..< numStops-1 
     { 
      let stepVal = stepIncrement*Double(i) 
      let stepFactor = CGFloat(fmod(stepVal, 1.0)) 
      returnArr += [stepFactor] 
     } 

     // The last stop is always 1 
     returnArr += [1.0] 

     // Fini 
     return returnArr 
    } 

    /// Returns the stop colors in an array 
    class func colorsAlongArray(colorArr:[UIColor], steps:Int) -> [UIColor] 
    { 
     let arrCount = colorArr.count 
     let stepIncrement = Double(arrCount)/Double(steps) 
     var returnArr : [UIColor] = [] 

     for i in 0..<steps 
     { 
      let stepVal = stepIncrement*Double(i) 
      let stepFactor = CGFloat(fmod(stepVal, 1.0)) 
      let stepIndex1 = Int(floor(stepVal/1.0)) 
      var stepIndex2 = Int(ceil(stepVal/1.0)) 

      if(stepIndex2 > arrCount-1) 
       {stepIndex2 = arrCount-1} 

      let color1 = colorArr[stepIndex1] 
      let color2 = colorArr[stepIndex2] 

      let color = colorByInterpolatingColors(color1, color2: color2, factor: stepFactor) 
      returnArr += [color] 
     } 

     return returnArr 
    } 

    /// Returns a color between two colors on a gradient 
    class func colorByInterpolatingColors(color1:UIColor, color2:UIColor, factor:CGFloat) -> UIColor 
    { 
     let startComponent = CGColorGetComponents(color1.CGColor) 
     let endComponent = CGColorGetComponents(color2.CGColor) 

     let startAlpha = CGColorGetAlpha(color1.CGColor) 
     let endAlpha = CGColorGetAlpha(color2.CGColor) 

     let r = startComponent[0] + (endComponent[0] - startComponent[0]) * factor 
     let g = startComponent[1] + (endComponent[1] - startComponent[1]) * factor 
     let b = startComponent[2] + (endComponent[2] - startComponent[2]) * factor 
     let a = startAlpha + (endAlpha - startAlpha) * factor 

     return UIColor(red: r, green: g, blue: b, alpha: a) 
    } 

    /* No longer needed 
    class func getFloatArrayFromNSNumbers(numbers:[NSNumber]) -> [CGFloat] 
    { 
     var returnArr : [CGFloat] = [] 

     for number in numbers 
     { 
      returnArr += [CGFloat(number.floatValue)] 
     } 

     return returnArr 
    } 
    */ 

    /// Returns an array containing the RGBA components of an array of colors 
    class func getFloatArrayFromUIColors(colors:[UIColor]) -> [CGFloat] 
    { 
     var returnArr : [CGFloat] = [] 
     for color : UIColor in colors 
     { 
      var red : CGFloat = 0.0 
      var green : CGFloat = 0.0 
      var blue : CGFloat = 0.0 
      var alpha : CGFloat = 0.0 

      color.getRed(&red, green: &green, blue: &blue, alpha: &alpha) 

      /* 
      // This check and backup should probably be implemented later, but it seems to fail when it shouldn't...probably improper use of optionals 
      if(color?.getRed(&red, green: &green, blue: &blue , alpha: &alpha) == nil) 
      { 
       // If for some reason the above function call fails, try this method of getting RGBA instead 
       let components = CGColorGetComponents(color?.CGColor) 
       red  = components[0] 
       green = components[1] 
       blue = components[2] 
       alpha = components[3] 
      } 
      */ 

      returnArr += [red, green, blue, alpha] 
     } 
     return returnArr 
    } 

    /// Returns a path for a rectangle with rounded corners 
    class func newPathForRoundedRect(rect:CGRect, radiusTL radTL:CGFloat, radiusTR radTR:CGFloat, radiusBL radBL:CGFloat, radiusBR radBR:CGFloat, edges:UIRectEdge = .All) -> CGPathRef 
    { 
     let retPath = CGPathCreateMutable() 

     // Convenience 
     let rectL = rect.origin.x 
     let rectR = rect.origin.x+rect.size.width 
     let rectT = rect.origin.y 
     let rectB = rect.origin.y+rect.size.height 

     // Starting from the top left arc, move clockwise 
     let p1 = CGPointMake(rectL  , rectT+radTL) 
     let p2 = CGPointMake(rectL+radTL, rectT) 
     let p3 = CGPointMake(rectR-radTR, rectT) 
     let p4 = CGPointMake(rectR  , rectT+radTR) 
     let p5 = CGPointMake(rectR  , rectB-radBR) 
     let p6 = CGPointMake(rectR-radBR, rectB) 
     let p7 = CGPointMake(rectL+radBL, rectB) 
     let p8 = CGPointMake(rectL  , rectB-radBL) 

     let c1 = CGPointMake(rect.origin.x     , rect.origin.y) 
     let c2 = CGPointMake(rect.origin.x+rect.size.width , rect.origin.y) 
     let c3 = CGPointMake(rect.origin.x+rect.size.width , rect.origin.y+rect.size.height) 
     let c4 = CGPointMake(rect.origin.x     , rect.origin.y+rect.size.height) 

     if(edges.contains(.All) || (edges.contains(.Left) && edges.contains(.Right) && edges.contains(.Top) && edges.contains(.Bottom))) 
     { 
      CGPathMoveToPoint(retPath, nil, p1.x, p1.y) 

      CGPathAddArcToPoint (retPath, nil, c1.x, c1.y, p2.x, p2.y, radTL) 
      CGPathAddLineToPoint(retPath, nil, p3.x, p3.y) 

      CGPathAddArcToPoint (retPath, nil, c2.x, c2.y, p4.x, p4.y, radTR) 
      CGPathAddLineToPoint(retPath, nil, p5.x, p5.y) 

      CGPathAddArcToPoint (retPath, nil, c3.x, c3.y, p6.x, p6.y, radBR) 
      CGPathAddLineToPoint(retPath, nil, p7.x, p7.y) 

      CGPathAddArcToPoint (retPath, nil, c4.x, c4.y, p8.x, p8.y, radBL) 
      CGPathAddLineToPoint(retPath, nil, p1.x, p1.y) 

      CGPathCloseSubpath(retPath) 

      return retPath 
     } 

     if(edges.contains(.Top)) 
     { 
      CGPathMoveToPoint(retPath, nil, p1.x, p1.y) 
      CGPathAddArcToPoint (retPath, nil, c1.x, c1.y, p2.x, p2.y, radTL) 
      CGPathAddLineToPoint(retPath, nil, p3.x, p3.y) 
      CGPathAddArcToPoint (retPath, nil, c2.x, c2.y, p4.x, p4.y, radTR) 
     } 

     if(edges.contains(.Right)) 
     { 
      CGPathMoveToPoint(retPath, nil, p3.x, p3.y) 
      CGPathAddArcToPoint (retPath, nil, c2.x, c2.y, p4.x, p4.y, radTR) 
      CGPathAddLineToPoint(retPath, nil, p5.x, p5.y) 
      CGPathAddArcToPoint (retPath, nil, c3.x, c3.y, p6.x, p6.y, radBR) 
     } 

     if(edges.contains(.Bottom)) 
     { 
      CGPathMoveToPoint(retPath, nil, p5.x, p5.y) 
      CGPathAddArcToPoint (retPath, nil, c3.x, c3.y, p6.x, p6.y, radBR) 
      CGPathAddLineToPoint(retPath, nil, p7.x, p7.y) 
      CGPathAddArcToPoint (retPath, nil, c4.x, c4.y, p8.x, p8.y, radBL) 
     } 

     if(edges.contains(.Left)) 
     { 
      CGPathMoveToPoint(retPath, nil, p7.x, p7.y) 
      CGPathAddArcToPoint (retPath, nil, c4.x, c4.y, p8.x, p8.y, radBL) 
      CGPathAddLineToPoint(retPath, nil, p1.x, p1.y) 
      CGPathAddArcToPoint (retPath, nil, c1.x, c1.y, p2.x, p2.y, radTL) 
     } 

     return retPath 
    } 
} 

JFStylishView.swift

// 
// JFStylishView.swift 
// Soapbox 
// 
// Created by Joseph Falcone on 6/2/16. 
// Copyright © 2016 Joseph Falcone. All rights reserved. 
// 

import UIKit 

enum GradientType 
{ 
    case Linear 
    case Radial 
} 

private enum BackgroundFillType 
{ 
    case Solid 
    case Gradient 
} 

class JFStylishView : UIView 
{ 
    // Rounded Corners 
    var cornerTL : CGFloat = 0.0 
    var cornerTR : CGFloat = 0.0 
    var cornerBR : CGFloat = 0.0 
    var cornerBL : CGFloat = 0.0 

    // Border 
    var borderWidth : CGFloat = 4.0 
    var borderColor = UIColor.greenColor() 

    // Colors 
    private var trueBackgroundColor = UIColor.clearColor() // The backgroundColor property has to be clear so that the layer doesn't draw behind the clipping area, so we use this to track what the user wants 
    private var bgColors : [CGFloat] = [] // array of colors used in drawrect 

    // Gradient points 
    private var gradientStart = CGPointMake(0.5, 0.0) 
    private var gradientEnd  = CGPointMake(0.5, 1.0) 
    private var gradientColorStops : [CGFloat] = [] 

    // Gradient type 
    private var gradientType : GradientType = .Linear 

    // Background Mode 
    private var backgroundFillType : BackgroundFillType = .Solid 

// var shadowLayer: CAShapeLayer! // Not ready for this yet 

    // MARK: Initialization 

    override init(frame: CGRect) 
    { 
     super.init(frame:frame) 
    } 

    required init?(coder aDecoder: NSCoder) 
    { 
     super.init(coder:aDecoder) 
    } 

    override func awakeFromNib() 
    { 
     super.awakeFromNib() 
    } 

    func initStylishStuff() 
    { 
     cornerTL = 0.0 

    } 

    // MARK: Color 

    private func getFillType() -> BackgroundFillType 
    { 
     // Rather than keeping a variable for this that gets set everywhere, we'll just use this getter to figure out what type we are using. 
     // Of course, if I get sloppy and don't make the unused elements empty when setting another fill parameter, this could produce a bug. 

     // RULES 
     // If using a gradient, trueBackgroundColor will be clear 
     // If using solid, bgColors will be empty 
     // If patterns are ever added, the above will be empty 

     if(bgColors.count == 0) 
     {return .Solid} 

     if(trueBackgroundColor == UIColor.clearColor()) 
     {return .Gradient} 

     // Default 
     return .Solid 
    } 

    override var backgroundColor: UIColor? 
    { 
     get 
     { 
      return trueBackgroundColor 
     } 
     set 
     { 
      trueBackgroundColor = backgroundColor! 
      super.backgroundColor = UIColor.clearColor() 
      //bgColorArr = [] 
      bgColors = [] 
      backgroundFillType = .Solid 
     } 

     /* 
     // Property observer - whenever the background color is 
     didSet 
     { 
      bgColorArr = [] 
      bgColors = [] 
//   bgColorArr = [backgroundColor!] 
//   bgColors = AppocalypseUI.getFloatArrayFromUIColors([backgroundColor!, backgroundColor!]) 
     } 
     */ 
    } 

// // Convenient...maybe we shouldn't include this? 
// func setBackgroundGradient(topColor:UIColor, bottomColor:UIColor) 
// { 
//  bgColorArr = [topColor, bottomColor] 
//  bgColors = AppocalypseUI.getFloatArrayFromUIColors([topColor, bottomColor]) 
// } 

    // Default is linear, top to bottom 
    // startPoint, endPoint should be coordinates of 0.0-1.0 
    func setBackgroundGradient(colors:[UIColor], stops:[CGFloat]? = nil, startPoint:CGPoint?=nil, endPoint:CGPoint?=nil, type:GradientType = .Linear) 
    { 
     assert(colors.count > 1, "At least two colors must be specified.") 

     // We won't be using the backgroundColor property when drawing a gradient 
     trueBackgroundColor = UIColor.clearColor() 

     // Calculate the stops if they were not specified 
     var stops = stops // arguments are immutable, but we can declare a variable with the same name 
     if(stops == nil) 
     { 
      stops = AppocalypseUI.makeLinearColorStops(colors.count) 
     } 

     // Provide default start and end points if necessary 
     gradientType = type 
     switch type 
     { 
      case .Linear: // top to bottom 
       gradientStart = startPoint == nil ? CGPointZero : startPoint! 
       gradientEnd = endPoint == nil ? CGPointMake(0, 1.0) : endPoint! 
      case .Radial: // center to top 
       gradientStart = startPoint == nil ? CGPointMake(0.5, 0.5) : startPoint! 
       gradientEnd = endPoint == nil ? CGPointMake(0.5, 0) : endPoint! 
     } 

     assert(colors.count == stops?.count, "The number of colors and stops must be equal.") 

     //bgColorArr = colors 
     bgColors = AppocalypseUI.getFloatArrayFromUIColors(colors) 
     gradientColorStops = stops! 
    } 


    /* 
    override func layoutSubviews() 
    { 
     super.layoutSubviews() 

     if shadowLayer == nil 
     { 
      shadowLayer = CAShapeLayer() 
      shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 12).CGPath 
      //shadowLayer.fillColor = UIColor.whiteColor().CGColor 
      shadowLayer.fillColor = UIColor.clearColor().CGColor 

      shadowLayer.shadowColor = UIColor.darkGrayColor().CGColor 
      shadowLayer.shadowPath = shadowLayer.path 
      shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0) 
      shadowLayer.shadowOpacity = 0.8 
      shadowLayer.shadowRadius = 2 

      //layer.insertSublayer(shadowLayer, atIndex: 0) 
      layer.insertSublayer(shadowLayer, below: nil) // also works 
     }   
    } 
    */ 

    // MARK: Drawing 

// override func drawLayer(layer: CALayer, inContext ctx: CGContext) { 
//   
// } 

    override func drawRect(rect: CGRect) 
    { 
     // Get the current context 
     let context = UIGraphicsGetCurrentContext() 

     // Make the background gradient 
     let baseSpace = CGColorSpaceCreateDeviceRGB(); 
     let gradient = CGGradientCreateWithColorComponents(baseSpace, bgColors, gradientColorStops, gradientColorStops.count); 

     // Set the border color and stroke 
     CGContextSetLineWidth(context, borderWidth); 
     CGContextSetStrokeColorWithColor(context, borderColor.CGColor); 

     // Fill in the background, inset by the border 

     let bgRect  = CGRectMake(bounds.origin.x+borderWidth , bounds.origin.y+borderWidth , bounds.size.width-borderWidth*2, bounds.size.height-borderWidth*2); 
     let borderRect = CGRectMake(bounds.origin.x+borderWidth/2, bounds.origin.y+borderWidth/2, bounds.size.width-borderWidth , bounds.size.height-borderWidth); 

     let bgPath  = AppocalypseUI.newPathForRoundedRect(bgRect, radiusTL: cornerTL, radiusTR: cornerTR, radiusBL: cornerBL, radiusBR: cornerBR) 
     let borderPath = AppocalypseUI.newPathForRoundedRect(borderRect, radiusTL: cornerTL, radiusTR: cornerTR, radiusBL: cornerBL, radiusBR: cornerBR) 

     CGContextStrokePath(context) 

     // Background 
     CGContextSaveGState(context); // Saves the state from before we clipped to the path 
     CGContextAddPath(context, bgPath); 
     CGContextClip(context); // Makes the background fill only the path 

     switch getFillType() 
     { 
     case .Gradient: 
      let gradientStartInPoints = CGPointMake(gradientStart.x*bounds.size.width, gradientStart.y*bounds.size.height); 
      let gradientEndInPoints  = CGPointMake(gradientEnd.x*bounds.size.width, gradientEnd.y*bounds.size.height); 
      switch(gradientType) 
      { 
      case .Linear: 
       CGContextDrawLinearGradient(context, gradient, gradientStartInPoints, gradientEndInPoints, []); // Draw a vertical gradient 

      case .Radial: 
       // A radial gradient might not fill the layer...first, fill it with the end color 
       UIColor(red: bgColors[bgColors.count-4], green: bgColors[bgColors.count-3], blue: bgColors[bgColors.count-2], alpha: bgColors[bgColors.count-1]).setFill() 
       CGContextAddPath(context, bgPath); // Not sure why I need this...TODO: Investigate 
       CGContextFillPath(context) 

       let endRadius = hypot(gradientStartInPoints.x-gradientEndInPoints.x, gradientStartInPoints.y-gradientEndInPoints.y) 
       CGContextDrawRadialGradient(context, gradient, gradientStartInPoints, 0, gradientStartInPoints, endRadius, []) 
      } 
     case .Solid: 
      trueBackgroundColor.setFill() 
      CGContextFillPath(context) 
     } 

     CGContextRestoreGState(context); // Now we are no longer clipped to the path 

     // Border 
     CGContextAddPath(context, borderPath); 
     CGContextStrokePath(context); 
    } 

    // MARK: Convenience 

    func removeAllSubviews() 
    { 
     for view in subviews 
      {view.removeFromSuperview()} 
    } 
} 

Answer 1

Вы можете создать CAGradientLayer, затем добавьте маску только два угла радиуса к нему. Затем вы можете анимировать преобразование с использованием Core Animation, или анимация преобразования UIView также должна работать, если вы поместите слой в UIView.

CAGradientLayer * rectangleGradient = [CAGradientLayer layer]; 
rectangleGradient.colors    = @[(id)[UIColor greenColor].CGColor, (id)[UIColor orangeColor].CGColor]; 
rectangleGradient.startPoint   = CGPointMake(0.5, 0); 
rectangleGradient.endPoint   = CGPointMake(0.5, 1); 
rectangleMask.path     = maskPath; 

////The animation 
    CABasicAnimation * theTransformAnim = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    theTransformAnim.fromValue   = [NSValue valueWithCATransform3D:CATransform3DIdentity];; 
    theTransformAnim.toValue   = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 2, 1)];; 
    theTransformAnim.duration   = 1; 

[rectangleGradient addAnimation:theTransformAnim];