How do you create a feathered "Circle wipe" animation in iOS? - ios

My question requires quite a bit of explanation. If you want to skip to the question, look for the bold "Question:" towards the end.
It's fairly easy to create a "circle wipe" animation in iOS or Mac OS using a Core Animation and masks.
One way is to install a CAShapeLayer as a mask on a view (typically an image view), and installing a circle in the shape layer, and animating the circle from 0 size to large enough to cover the whole image (r = sqrt(height^2 + width^2)
Another way is to use a radial CAGradientLayer as a mask, set up the center of the gradient as an opaque color, and have a sudden transition to clear just beyond the corners of the image. You then animate the "positions" values of the gradient layer to move the clear color in to the center of the image.
Both of these approaches create a sharp-edged "circle wipe" that causes the image to shrink to a point and disappear.
That effect looks like this:
The classic cinematic circle wipe animation has a feathered edge, however, rather than a sharp border. The outer edge of the circle is completely transparent. As you move in towards the center the image becomes more and more solid over a fairly short distance, and then the image is completely opaque from there into the center. As the circle shrinks, the thickness of the transition from transparent to opaque remains constant, and the circle stinks down to a point and disappears. (The mask is a circle is opaque in the middle and has a slightly blurred edge, and the radius of the circle shrinks to 0 while the thickness of the blurred edge remains constant.)
Here is an example of an old school circle wipe. This is technically an "Iris Out" where the transition is to black, but the idea is the same:
https://youtu.be/IqDhAW3TDR8?t=90
I have no idea how to achieve a circle wipe with a feathered edge using a shape layer as a mask. Shape layers are always sharp-edged. I could get fairly close by using a shape layer where the circle is stroked with 50% opacity, and the middle of the circle is filled with a color at 100% opacity, but that wouldn't get the smooth transition from transparent to opaque that I'm after.
Another approach I've tried is using a radial gradient with 3 colors in it. I set the inner colors as opaque, and the outer color as clear. I set the location of the outer color as > 1 (say 1.2), the middle location to 1, and the inner location to 0. The locations array contains [1.2, 1.0, 0] That makes the whole part of the mask that covers the image opaque, with a feathered transition to clear that happens past the edges of the image.
I then do an animation of the locations array in 2 steps.
In the first step, I animate the locations array to [0, 0, 0.2]. That causes a band of feathering to move in from the corners and stop at 0.2 from the center of the image.
In the 2nd step, I animate the locations array from [0, 0, 0.2] to [0,0,0]. That causes an inner, transparent-to-opaque center to shrink to a point and disappear.
The effect is ok, and if I run it with a narrow blur band and a fast duration, it looks decent, but it's not perfect.
Here is what it looks like with a blur range of 0.2, and a duration of (I think) 0.25 seconds:
If I introduce a pause between the animation steps, however, you can see the imperfections in the effect:
Question: Is there a way to animate a circle with a small blur radius (5 points or so) from the full size of a view down to 0 using Core Animation?
The same question applies to other types of wipe animations as well: Keyhole, star, side wipe, box, and many others. For those, the radial gradient trick I'm using for a feathered circle wipe wouldn't work at all. (You create those specialized wipe animations using a CAShapeLayer that's the shape you want to animate, and then adjust it's size from large to small.
It would be easy to create a static blurred circle (or other shape) by first drawing a circle and then applying a Core Image blur filter to it, but there's no way to animate that in iOS, and the CI blur filter is too slow on iOS even if you could.
Here is a link to the project I used to create the animations in this post using the 3-color radial gradient I describe: https://github.com/DuncanMC/GradientView.git.
Edit:
Based On James' comment, I tried using a shape layer with a shadow on it as a mask. The effect is on the right track, but there is still a stark transition from the opaque part of the image to the mostly transparent part which is masked by the shadow layer. Even with a shadow opacity of 1.0 the shadow is still mostly transparent. Here's what it looks like:
Making the line color of the circle shape partly transparent helps some, and gives a transition between the opaque part of the image and the mostly transparent shadow. Here's the image above but stroking the shape layer at a line width of 2 points and an opacity of 0.6:
Edit #2: SOLVED!
James' idea of using a shadowPath is the solution. You don't want anything in your mask layer other than a shadowPath. If you do that you can use the shadowRadius property to control the amount of blurring, and smoothly animate a shadow path from a circle that fully encloses the view down to a vanishing point all in one step.
I've updated my github project at https://github.com/DuncanMC/GradientView.git to include both the radial gradient animation and the shadowPath animation for comparison.
Here is what the finished effect looks like, first with a 5 pixel blur radius:
And then with a 30 pixel blur radius:

You could use the shadowPath on a CAShapeLayer to create a circle with a blurred outline to use as the mask.
Create a shape layer with no fill or stroke (we only want to see the shadow) and add it as the layer mask to your view.
let shapeLayer = CAShapeLayer()
shapeLayer.shadowColor = UIColor.black.cgColor
shapeLayer.shadowOffset = CGSize(width: 0, height: 0)
shapeLayer.shadowOpacity = 1
shapeLayer.shadowRadius = 5
self.maskLayer = shapeLayer
self.layer.mask = shapeLayer
And animate it with a CABasicAnimation.
func show(_ show: Bool) {
let center = CGPoint(x: self.bounds.width/2, y: self.bounds.height/2)
var newPath: CGPath
if show {
let radius = sqrt(self.bounds.height*self.bounds.height + self.bounds.width*self.bounds.width)/2 //assumes view is square
newPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true).cgPath
} else {
newPath = UIBezierPath(arcCenter: center, radius: 0.01, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true).cgPath
}
let shadowAnimation = CABasicAnimation(keyPath: "shadowPath")
shadowAnimation.fromValue = self.maskLayer.shadowPath
shadowAnimation.toValue = newPath
shadowAnimation.duration = totalDuration
self.maskLayer.shadowPath = newPath
self.maskLayer.add(shadowAnimation, forKey: "shadowAnimation")
}
As you can set any path for the shadow it should also work for other shapes (star, box etc.).

Related

How can I animate the corner radius of a CALayer

I'm trying to create an animation where a CALayer rectangle changes from being flush with the borders of a view to having either the left, right, or both corners rounded and the width of the rectangle is also changed.
The problem I'm having is that the animation looks distorted. If I disable the corner radius change in the animation, the distortion doesn't happen. I suspect this is because when the original path and the final path in the animation have a different number of rounded corners, the paths have a different number of control points, so the path animation behavior is undefined as per the docs.
I'm thinking that I should try and find a way to get the number of control points in the rounded rect to be equal to the number in the non-rounded rect but I'm not sure how I would do this since I haven't found a way to count the number of control points in a CGPath/UIBezierPath.
Here's the code I'm using right now, where I'm animating the path, but I'm open to changing the implementation entirely to 'cheat' by having two rectangles or something like that.
func setSelection(to color: UIColor, connectedLeft: Bool, connectedRight: Bool, animated: Bool) {
self.connectedLeft = connectedLeft
self.connectedRight = connectedRight
self.color = color
if animated {
let pathAnimation = CABasicAnimation(keyPath: "path")
let colorAnimation = CABasicAnimation(keyPath: "fillColor")
self.configure(animation: pathAnimation)
self.configure(animation: colorAnimation)
pathAnimation.toValue = self.rectPath(connectedLeft: connectedLeft, connectedRight: connectedRight).cgPath
colorAnimation.toValue = color.cgColor
let group = CAAnimationGroup()
group.animations = [pathAnimation, colorAnimation]
self.configure(animation: group)
group.delegate = self
self.rectLayer.add(group, forKey: Constants.selectionChangeAnimationKey)
} else {
self.rectLayer.fillColor = color.cgColor
self.rectLayer.path = self.rectPath(connectedLeft: connectedLeft, connectedRight: connectedRight).cgPath
}
}
private func rectPath(connectedLeft: Bool, connectedRight: Bool) -> UIBezierPath {
let spacing: CGFloat = 5
var origin = self.bounds.origin
var size = self.bounds.size
var corners = UIRectCorner()
if !connectedLeft {
origin.x += spacing
size.width -= spacing
corners.formUnion([.topLeft, .bottomLeft])
}
if !connectedRight {
size.width -= spacing
corners.formUnion([.topRight, .bottomRight])
}
let path = UIBezierPath(roundedRect: .init(origin: origin, size: size), byRoundingCorners: corners, cornerRadii: .init(width: 8, height: 8))
print(path.cgPath)
return path
}
You are correct as to why your animation doesn't work correctly.
The Core Graphics/Core Animation methods that draw arcs compose the arcs using variable numbers of cubic bezier curves depending on the angle being drawn.
I believe that a 90 degree corner is rendered as a single cubic bezier curve.
Based on a recent test I did, it seems all you need to do is have the same number of endpoints as a Bezier curve in order to get the sharp-corner-to-rounded-corner animation to draw correctly. For a rounded corner, I'm pretty sure it draws a line segment up to the rounded corner, then the arc as one Bezier curve, then the next line segment. Thus you SHOULD be able to create a rectangle by drawing each sharp corner point twice. I haven't tried it, but I think it would work.
(Based on my understanding of how arcs of circles are drawn using bezier curve, an arc of a circle is composed of a cubic bezier curve for each quarter-circle or part of a quarter circle that is drawn. So for a 90 degree bend, you just need 2 control points for a sharp corner to replace a rounded corner. If the angle is >90 degrees but less than 180, you'd want 3 control points at the corner, and if it's >180 but less than 270, you'd want 4 control points.)
Edit:
The above approach of adding each corner-point twice for a rounded rectangle SHOULD work for the rounded rectangle case (where every corner is exactly 90 degrees) but it doesn't work for irregular polygons where the angle that needs to be rounded varies. I couldn't work out how to handle that case. I already created a demo project that generated irregular polygons with any mixture of sharp and curved corners, so I adapted it to handle animation.
The project now includes a function that generates CGPaths with a settable mixture of rounded and sharp corners that will animate the transition between sharp corners and rounded corners. The function you want to look at is called roundedRectPath(rect:byRoundingCorners:cornerRadius:)
Here is the function header and in-line documentation
/**
This function works like the UIBezierPath initializer `init(roundedRect:byRoundingCorners:cornerRadii:)` It returns a CGPath a rounded rectangle with a mixture of rounded and sharp corners, as specified by the options in `corners`.
Unlike the UIBezierPath `init(roundedRect:byRoundingCorners:cornerRadii:` intitializer, The CGPath that is returned by this function will animate smoothly from rounded to non-rounded corners.
- Parameter rect: The starting rectangle who's corners you wish to round
- Parameter corners: The corners to round
- Parameter cornerRadius: The corner radius to use
- Returns: A CGPath containing for the rounded rectangle.
*/
public func roundedRectPath(rect: CGRect, byRoundingCorners corners: UIRectCorner, cornerRadius: CGFloat) -> CGPath
You can download the project from Github and try it out at this link.
Here is a GIF of the demo app in operation:

Increasing UIBezierPath linewidth changes geometry...?

I've created a circular gauge as a visual indicator for a timer. There are multiple segments of the gauge to indicate different stages of the timer. Image here
The problem is that when I add a line width to the paths, the math no longer adds up. For example, the blue and red segment in the image above should be the same size (same % of the circle), but because of the line width, the red is overlapping the blue and, likewise, the grey segment overlaps the blue (I am drawing the segments counter clockwise)—so the blue appears smaller. I know that my segments are created correctly, because if I set the linewidth to 1.0, I get the following, correct result. Image here
If anyone has any insights on this, that would be great.
Code to give context:
//create path
let circularPath = UIBezierPath(arcCenter: view.center, radius: 100, startAngle: -CGFloat.pi/2, endAngle: 3*CGFloat.pi/2, clockwise: true)
//create segments - this is in a loop that adjusts start/end for all the segments
var tempShapeLayer = CAShapeLayer()
tempShapeLayer.path = circularPath.cgPath
tempShapeLayer.lineWidth = 10
tempShapeLayer.fillColor = UIColor.clear.cgColor
tempShapeLayer.lineCap = CAShapeLayerLineCap.square
tempShapeLayer.strokeStart = start
tempShapeLayer.strokeEnd = end
//next simply add some colors and add to view
You are using the wrong line cap style. You should be using .butt.
The different styles of line cap can be found in CGLineCap.
butt:
A line with a squared-off end. Core Graphics draws the line to extend only to the exact endpoint of the path.
square:
A line with a squared-off end. Core Graphics extends the line beyond the endpoint of the path for a distance equal to half the line width.
Using a square cap will cause the line to be a tiny bit longer on both sides than it should. For all segments except the last one drawn, this is not a problem, because their endpoints will be covered by other segments. But for the last segment drawn, it will appear longer than it should on both sides.
You should use .butt for the line cap style.

SKShapeNode fillColor adding 3 more draw calls

I am making a game in SpriteKit. I am creating a SKShapeNode and adding it to a SKSpriteNode (stone) already in the scene.
shapeNode = SKShapeNode(path: self.oldPath)
shapeNode.fillColor = wave.color
shapeNode.strokeColor = .clear
shapeNode.position = CGPoint(x: 0, y: -5) // Offset for wave paths
stone.addChild(shapeNode)
Here is what is strange, the total scene's draws:
When I say "not set", I mean that I commented out that line.
It appears that setting fillColor increases the draws by 3, and setting strokeColor decreases the draws by 1, although doing this does not produce the desired shape node.
What is causing the increase in draw calls, and how can I prevent/reduce this?
Edit 1:
The problem is that this is an animating wave around a stone (as if there is a stone in water, see image above). It would not increase performance by rasterising it and make it as a sprite texture, as the wave is constantly animating. This would most likely decrease performance.
I also don't want to use an Atlas to quickly change a texture, as I want this wave to look random, smooth, and natural.

Unwanted outlined appearing for a UIBezierPath that is filled and used as a clip for a see thru gradient

I have a path that is filled and also used for a clip to provide a gradient. The rendering of the gradient is just a tiny bit smaller or differently anti-aliased compared with the rendering of the fill. This creates an outline effect:
Is there any way to remove this outline?
Note that:
Using two separately drawn identical paths does not solve the problem
Using no fill, but two gradients instead does not solve the problem. Even with just a gradient over another gradient, you get the outline.
It is possible to get the gradient I want without the outline by using just a solid gradient with no fill, but that makes animating the effects of the gradient more difficult later.
Here is the code:
let path4Path = UIBezierPath()
//ordinary drawing stuff here
path4Path.close()
fillColor.setFill() //set to black fill
path4Path.fill()
context.saveGState()
context.setAlpha(0.9)
path4Path.addClip()
context.drawLinearGradient(allToldGradient, start: CGPoint(x: 52.72, y: 114.48), end: CGPoint(x: 30.22, y: 91.99), options: [])
context.restoreGState()
I think you have to turn off antialiasing like this:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetShouldAntialias(context, NO);
CGContextSetAllowsAntialiasing(context, NO);
CGContextSetInterpolationQuality(context, kCGInterpolationNone);

SKSpriteNode not responding to set color & blendModeFactor (SpriteKit & Swift)

I know there are several other posts about this, but my case is kinda specific, i haven't seen this one yet.
I have in my game a ball-shaped sprite, that whenever I tap on it, I would like to add a colorised version of the very same sprite but with an effect of fadeIn and fadeOut.
Going to give you an example code:
self.ball = SKSpriteNode(imageNamed: "ball")
self.ball.position = CGPoint(x: midX, y: midY)
self.ball.zPosition = 1
self.ball.size = CGSize(width: 100, height: 100)
self.touchEffect = SKSpriteNode(imageNamed: "ball")
self.touchEffect.position = CGPoint(x: 0, y: 0)
self.touchEffect.zPosition = 2
self.touchEffect.size = CGSize(width: 100, height: 100)
self.touchEffect.color = UIColor.whiteColor()
self.touchEffect.blendColorFactor = 1
self.touchEffect.alpha = 0
self.ball.addChild(self.touchEffect)
self.addChild(self.ball)
Now, up to this point... I can't even see the touchEffect sprite colorised (if I put alpha to 1), but the same color of the original sprite. Why is this?
At the touchesBegan I do something like this:
func showTapEffect() {
let fadeIn = SKAction.fadeInWithDuration(0.3)
let fadeOut = SKAction.fadeOutWithDuration(0.3)
let sequence = SKAction.sequence([fadeIn,fadeOut])
self.touchEffect.runAction(sequence)
}
I also used it in different scenarios within my very same game, and it worked. Don't know why this unique case doesn't. Any hint? If you need more example code, let me know, is not a copy paste of my current code tho, I just typed it from my memory so you might see a typo error in there. But the code is very alike.
(And my sprite isn't dark or black)
Thanks in advance.
I am posting this an an answer because it is too large for comments, and I can post code in here if need be.
I just reread your thing like 3 times over, You are blending with White, what color are you expecting to get? if you blend Blue and White, you get Blue, if you blend Purple and Blue, You would get Blue. If you blend Blue and Gray, you get a darker Blue. It is all percentage multiplication. I do not believe you get a blend mode to pick from with colors. How it works is it takes the color of each pixel, and on the pixel, breaks it up into R,G,B, then it takes your color, and breaks that up into R G B (lets call it CR CG CB). The math becomes (R * CR,G * CG,B * CB) on a per pixel level.
You are doing (R * 1,G * 1,B * 1) which is (R,G,B)
If you want to colorize your sprite, then you need your sprite to be a gray scale image, and use colors only when you want them to stay that color (To a degree, because blending will still apply to them, you need to figure out the math on how you want it to blend)

Resources