You either need to implement draw(_:) or use CAAnimation, not both.
As rule, don't implement draw(_:) for view classes. That forces the system to do all it's rendering on the CPU, and does not take advantage of the tile based, hardware accelerated rendering on iOS devices. Instead, use CALayers and CAAnimation and let the hardware do the heavy lifting for you.
Using CALayers and CAAnimation you can get an effect like this:
I would suggest doing the following:
Create a full circle hexagon shape as a CAShapeLayer. (The code in your draw() method already generates a hexagon path. You could easily adapt that to install your hexagon path into a CAShapeLayer.)
Add that shape layer as a sublayer of a view.
Create a "conic" CAGradientLayer with a start point of the layer's center and an endpoint of the top center.
Add colors ranging from clear to any opaque colors to the gradient
layer, using an array of locations that feathers the gradient as
desired.
install the gradient layer as the mask on your hexagon shape layer.
Create a CABasicAnimation that rotates the gradient layer around the
Z axis 1/4 turn at a time. Run that animation constantly until you're
done with the animation.
The code to create your gradient layer might look like this:
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.bounds
gradientLayer.type = .conic
gradientLayer.colors = [UIColor.clear.cgColor,
UIColor.clear.cgColor,
UIColor.white.cgColor,
UIColor.white.cgColor]
let center = CGPoint(x: 0.5, y: 0.5)
gradientLayer.locations = [0, 0.3, 0.7, 0.9]
gradientLayer.startPoint = center
gradientLayer.endPoint = CGPoint(x: 0.5, y: 0)
(You will need to update the gradient layer's bounds if the owning view's bounds change.)
The code to rotate the gradient layer might look like this:
private func animateGradientRotationStep() {
let rotation = CABasicAnimation(keyPath: "transform.rotation.z")
animationStepsRemaining -= 1
rotation.fromValue = rotationAngle
rotationAngle += CGFloat.pi / 2
rotation.toValue = rotationAngle
rotation.duration = 0.5
rotation.delegate = self
gradientLayer.add(rotation, forKey: nil)
// After a tiny delay, set the layer's transform to the state at the end of the animation
// so it doesnt jump back once the animation is complete.
DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
// You have to wrap this step in a CATransaction with setDisableActions(true)
// So you don't get an implicit animation
CATransaction.begin()
CATransaction.setDisableActions(true)
self.gradientLayer.transform = CATransform3DMakeRotation(self.rotationAngle, 0, 0, 1)
CATransaction.commit()
}
}
And you would need your view to conform to the CAAnimationDelegate protocol:
extension GradientLayerView: CAAnimationDelegate {
func animationDidStop(_ anim: CAAnimation,
finished flag: Bool) {
if animating && animationStepsRemaining > 0 {
animateGradientRotation()
}
}
}
Note that a layer's transform property is "implicitly animated", which means that by default the system generates an animation of the change. We can take advantage of that fact and just make some adjustments to the implicit animation. That makes the animation function simpler:
// This version of the function takes advantage of the fact
// that a layer's transform property is implicitly animated
private func animateGradientRotationStep() {
animationStepsRemaining -= 1
rotationAngle += CGFloat.pi / 2
// MARK: - CATransaction begin
// Use a CATransaction to set the animation duration, timing function, and completion block
CATransaction.begin()
CATransaction.setAnimationDuration(0.5)
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: .linear))
CATransaction.setCompletionBlock {
self.animationDidStop(finished:true)
}
self.gradientLayer.transform = CATransform3DMakeRotation(self.rotationAngle, 0, 0, 1)
CATransaction.commit()
// MARK: CATransaction end -
}
That version requires a slightly different completion function, since it doesn't use a CAAnimation:
func animationDidStop(finished flag: Bool) {
delegate?.animationStepComplete(animationStepsRemaining)
if animating && animationStepsRemaining > 0 {
animateGradientRotationStep()
}
I banged out a little sample app that creates such an animation.
You can download the demo app from Github at this link.
The one part of your sample animation that I'm not sure how to duplicate is the fact that the color of the hexagon seems to be bright white at the beginning and transitions to yellow. My sample app creates an animation where the hexagon is a fixed color and transitions from opaque to clear.
Here is the README from the project:
PolarGradientMaskView
This project illustrates how to use a "conic" gradient to mask a view and create a circular animation.
It uses a CAGradientLayer of type .conic, set up to be mostly opaque, with the last half transitioning to transparent. It installs the gradient layer as a mask on a shape layer that contains a yellow Hexagon.
The gadient layer looks like this:
(Rendered in blue against a gray checkerboard background so you can see the transition from opaque to clear.)
The opaque (blue) parts of the gradient cause the shape layer to be visible. The transparent parts of the gradient hide (mask) those parts of the shape layer, and partly transparent parts of the gradient layer make those parts of the shape layer partly transparent.
The animation simply rotates the gradient layer on the Z axis around the center of the layer. It rotatest the layer 1/4 turn at a time, and each time an animation step completes, it simply creates a new animation that rotates the mask another 1/4 turn.
It's a little hard to understand what's going on when you're masking a hexagon shape. I created a variant where I added an image view as a subview of the custom view. The animation for that looks like this:
The app's window looks like this:
.
