Defining a gradient angle using a CAGradientLayer

Question

I am trying to draw an angular gradient using CaGradientLayer . I know that the angle can be determined using startPoint and endPoint . I can calculate these points for some standard angles, such as 0, 90, 180, 360, etc. But I want to formulate these points for an arbitrary angle. I tried to calculate it using some trigonometry, but did not get any success. Can someone give me any guidance on how to calculate these points for arbitrary angles?

Answer 1

Here's a method that creates a view that allows you to rotate its two-color gradient by 360 degrees, based on entering a slider (or something else). The value of the input slider (variable "x" below) is between 0.0 and 1.0.

At 0.0, the gradient is horizontal (with color A on top and color B below), rotating 360 degrees to 1.0 (identical to 0.0 or full rotation).

eg. when x = 0.25, color A remains on the left, and color B is correct. At point 0.5, color A is lower and color B is higher, 0.75 color A is correct and color B remains. It rotates counterclockwise from right to left.

Four arguments are required: frame, colourA, colourB and input value (0-1).

 -(UIView *)gradientViewWithFrame:(CGRect)frame colourA:(UIColor *)A colourB:(UIColor *)B rotation:(float)x { //x is between 0 and 1, eg. from a slider, representing 0 - 360 degrees //colour A starts on top, with colour B below //rotations move anti-clockwise //1. create the colour view UIView * colourView = [UIView new]; colourView.frame = frame; //2. create the gradient layer CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = colourView.bounds; gradient.colors = [NSArray arrayWithObjects:(id)[A CGColor], (id)[B CGColor], nil]; [colourView.layer insertSublayer:gradient atIndex:0]; //3. create coordinates float a = pow(sinf((2*M_PI*((x+0.75)/2))),2); float b = pow(sinf((2*M_PI*((x+0.0)/2))),2); float c = pow(sinf((2*M_PI*((x+0.25)/2))),2); float d = pow(sinf((2*M_PI*((x+0.5)/2))),2); //4. set the gradient direction [gradient setStartPoint:CGPointMake(a, b)]; [gradient setEndPoint:CGPointMake(c, d)]; return colourView; } 

Answer 2

Swift 3

 static func setGradient(view: UIView!,viewRadius: CGFloat!, color1: UIColor!, color2: UIColor!, angle: Double!, alphaValue: CGFloat!){ let gradient = CAGradientLayer() gradient.frame = CGRect(origin: CGPoint.zero, size: view.frame.size) gradient.colors = [color1.withAlphaComponent(alphaValue).cgColor, color2.withAlphaComponent(alphaValue).cgColor] let x: Double! = angle / 360.0 let a = pow(sinf(Float(2.0 * M_PI * ((x + 0.75) / 2.0))),2.0); let b = pow(sinf(Float(2*M_PI*((x+0.0)/2))),2); let c = pow(sinf(Float(2*M_PI*((x+0.25)/2))),2); let d = pow(sinf(Float(2*M_PI*((x+0.5)/2))),2); gradient.endPoint = CGPoint(x: CGFloat(c),y: CGFloat(d)) gradient.startPoint = CGPoint(x: CGFloat(a),y:CGFloat(b)) view.roundCorners([.topLeft, .bottomLeft], radius: viewRadius) view.layer.insertSublayer(gradient, at: 0) } 

Answer 3

This is largely based on the decision of Sartak Sharmas. I made a UIView extension, and I decided that readability and type conversions could be slightly improved:

 extension UIView { func setGradient(colors: [CGColor], angle: Float = 0) { let gradientLayerView: UIView = UIView(frame: CGRect(x:0, y: 0, width: bounds.width, height: bounds.height)) let gradient: CAGradientLayer = CAGradientLayer() gradient.frame = gradientLayerView.bounds gradient.colors = colors let alpha: Float = angle / 360 let startPointX = powf( sinf(2 * Float.pi * ((alpha + 0.75) / 2)), 2 ) let startPointY = powf( sinf(2 * Float.pi * ((alpha + 0) / 2)), 2 ) let endPointX = powf( sinf(2 * Float.pi * ((alpha + 0.25) / 2)), 2 ) let endPointY = powf( sinf(2 * Float.pi * ((alpha + 0.5) / 2)), 2 ) gradient.endPoint = CGPoint(x: CGFloat(endPointX),y: CGFloat(endPointY)) gradient.startPoint = CGPoint(x: CGFloat(startPointX), y: CGFloat(startPointY)) gradientLayerView.layer.insertSublayer(gradient, at: 0) layer.insertSublayer(gradientLayerView.layer, at: 0) } } 

Add this to your new or linked Swift file, and all you have to do is call either myView.setGradient(colors: gradientColorsArray) or myView.setGradient(colors: gradientColorsArray, angle: 90) .