Group Animation in ios - ios

I'm making a custom loader which has circular shaped layer inside and It will animate in two way. First shape will animate pulsing like scaling it's radius increase and decrease with infinite time and in same time it will rotate inside the view with around the center of view. But now my group animation does't work properly, view didn't rotate full radius and scaling didn't worked
here's my code review and tell me where I'm doing mistake.
class ViewController: UIViewController {
#IBOutlet weak var loaderView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
//circularLoader()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
drawCircularLoader()
}
func drawCircularLoader(){
let width = loaderView.bounds.width
let halfWidth = width / 2
let size = CGSize(width: halfWidth / 2, height: halfWidth / 2)
let rect = CGRect(x: halfWidth - (size.width / 2), y: (halfWidth / 2) - (size.height / 2), width: size.width, height: size.height)
let path = UIBezierPath(ovalIn: rect)
let layer = CAShapeLayer()
layer.frame = rect
layer.fillColor = UIColor.black.cgColor
layer.path = path.cgPath
loaderView.layer.addSublayer(layer)
let rotation = CABasicAnimation(keyPath: "transform.rotation")
rotation.fromValue = 0
rotation.toValue = 2.0 * .pi
rotation.duration = 1.5
layer.add(rotation, forKey: nil)
let scaling = CABasicAnimation(keyPath: "transform.scale")
scaling.toValue = 1.2
scaling.duration = 0.3
scaling.autoreverses = true
let group = CAAnimationGroup()
group.animations = [rotation, scaling]
group.repeatCount = .infinity
layer.add(group, forKey: nil)
}
}

The immediate problem is that the animation group has no duration. It needs a duration long enough for all its child animations to complete. Otherwise everything just stops after .2 seconds (the default). Try giving the group a duration of 1.5.
In a broader sense I doubt whether your overall goal is a good use of an animation group at all. But that's a different matter. Plus you have two transform animations; they might be interfering with each other (transform is one animatable property), so a different approach might be needed.

Related

merge two CAShaplayer with transparent in Swift5?

We have created two CAShapeLayer and we have animated them by CABasicAnimation changing position like fromValue to toValue so far code works as excepted.
Two layers meeting at some points while animating, its moving one over another seems overlapping. We need to achieve like below image but we have got different output.
Desired output:
Output at Loading view::
Result we got after animating layers:
Code Below:
class MovingAnimationVC: UIViewController {
let layerSize = CGSize(width: 100, height: 100)
private var layerWidth : CGFloat = 100
private var layerHeight : CGFloat = 100
var circleA : CAShapeLayer! = nil
var circleB : CAShapeLayer! = nil
lazy var aPosition = CGPoint(x: -layerWidth/2 + 30, y: 100)
lazy var bPosition = CGPoint(x: (self.view.frame.width - layerWidth / 2) - 30 , y: 400)
override func viewDidLoad() {
super.viewDidLoad()
if circleA == nil{
circleA = CAShapeLayer()
let pa = UIBezierPath(ovalIn: CGRect(origin: aPosition, size: layerSize))
circleA.path = pa.cgPath
circleA.fillColor = UIColor.orange.cgColor
view.layer.addSublayer(circleA)
}
if circleB == nil{
circleB = CAShapeLayer()
let pa = UIBezierPath(ovalIn: CGRect(origin: bPosition, size: layerSize))
circleB.path = pa.cgPath
circleB.fillColor = UIColor.orange.cgColor
view.layer.addSublayer(circleB)
}
}
override func viewDidAppear(_ animated: Bool) {
animateCircleA()
animateCircleB()
}
fileprivate func animateCircleA(){
lazy var startPointA = CGPoint(x: -layerWidth/2 + 30, y: 0)
lazy var endPointA = CGPoint(x: (self.view.frame.width - layerWidth / 2), y: 300)
let animate = CABasicAnimation(keyPath: "position")
animate.timingFunction = CAMediaTimingFunction(name: .linear)
animate.fromValue = NSValue(cgPoint: startPointA)
animate.toValue = NSValue(cgPoint: endPointA)
animate.repeatCount = 2
animate.duration = 5.0
circleA.add(animate, forKey: "position")
}
fileprivate func animateCircleB(){
lazy var startPointB = CGPoint(x: 0, y: 0)
lazy var endPointB = CGPoint(x:-(self.view.frame.width - layerWidth / 2) - 30, y: -(self.view.frame.width - layerWidth / 2) + 30)
let animate = CABasicAnimation(keyPath: "position")
animate.timingFunction = CAMediaTimingFunction(name: .linear)
animate.fromValue = NSValue(cgPoint: startPointB)
animate.toValue = NSValue(cgPoint: endPointB)
animate.repeatCount = 2
animate.duration = 5.0
circleB.add(animate, forKey: "position")
}
}
Kindly suggest me right way to get started.
How to make both layer transparent while crossing each other?
The easiest way is to just set the alphas of the layers, but if you don't want the layers to be transparent, then that means you want a different blend mode for the layers.
According to this question, to change the blend mode of a layer, you can set CALayer.compositingFilter. From your desired output, it seems like the screen blend mode is appropriate:
circleA.compositingFilter = "screenBlendMode"
circleA.compositingFilter = "screenBlendMode"
Note that you should add your layers to a view with a transparent background, otherwise the background color of the view is also blended with the circles' colours. This view can be added as a subview of whatever view you were originally going to put the circles in, filling its entire bounds.
someView.backgroundColor = .clear
someView.layer.addSublayer(circleA)
someView.layer.addSublayer(circleB)

How to make UIBezierPath to fill from the center

How do I make a UIBezierPath that starts drawing from the center and expands to the left and right?
My current solution is not using UIBezierPath but rather a UIView inside another UIView. The children view is centered inside of it's parent and I adjust child's width when I need it to expand. However, this solution is far from perfect because the view is located inside of UIStackView and the stack view is in UICollectionView cell and it sometimes does not get the width correctly.
override func layoutSubviews() {
super.layoutSubviews()
progressView.cornerRadius = cornerRadius
clipsToBounds = true
addSubview(progressView)
NSLayoutConstraint.activate([
progressView.topAnchor.constraint(equalTo: topAnchor),
progressView.bottomAnchor.constraint(equalTo: bottomAnchor),
progressView.centerXAnchor.constraint(equalTo: centerXAnchor)
])
let width = frame.width
let finalProgress = CGFloat(progress) * width
let widthConstraint = progressView.widthAnchor.constraint(equalToConstant: finalProgress)
widthConstraint.priority = UILayoutPriority(rawValue: 999)
widthConstraint.isActive = true
}
the progress is a class property of type double and when it gets set I call layoutIfNeeded.
I also tried calling setNeedsLayout and layoutIfNeeded but it does not solve the issue. SetNeedsDisplay and invalidateIntrinzicSize do not work either.
Now, I would like to do it using bezier path, but the issue is that it starts from a given point and draws from left to right. The question is: how do I make a UIBezierPath that is centered and when I increase the width it expands (stays in center)
Here is the image of what I want to achieve.
There are quite a few options. But here are a few:
CABasicAnimation of the strokeStart and strokeEnd of CAShapeLayer, namely:
Create CAShapeLayer whose path is the final UIBezierPath (full width), but whose strokeStart and strokeEnd are both 0.5 (i.e. start half-way, and finish half-way, i.e. nothing visible yet).
func configure() {
shapeLayer.strokeColor = strokeColor.cgColor
shapeLayer.lineCap = .round
setProgress(0, animated: false)
}
func updatePath() {
let path = UIBezierPath()
path.move(to: CGPoint(x: bounds.minX + lineWidth, y: bounds.midY))
path.addLine(to: CGPoint(x: bounds.maxX - lineWidth, y: bounds.midY))
shapeLayer.path = path.cgPath
shapeLayer.lineWidth = lineWidth
}
Then, in CABasicAnimation animate the change of the strokeStart to 0 and the strokeEnd to 1 to achieve the animation growing both left and right from the middle. For example:
func setProgress(_ progress: CGFloat, animated: Bool = true) {
let percent = max(0, min(1, progress))
let strokeStart = (1 - percent) / 2
let strokeEnd = 1 - (1 - percent) / 2
if animated {
let strokeStartAnimation = CABasicAnimation(keyPath: "strokeStart")
strokeStartAnimation.fromValue = shapeLayer.strokeStart
strokeStartAnimation.toValue = strokeStart
let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")
strokeEndAnimation.fromValue = shapeLayer.strokeEnd
strokeEndAnimation.toValue = strokeEnd
let animation = CAAnimationGroup()
animation.animations = [strokeStartAnimation, strokeEndAnimation]
shapeLayer.strokeStart = strokeStart
shapeLayer.strokeEnd = strokeEnd
layer.add(animation, forKey: nil)
} else {
shapeLayer.strokeStart = strokeStart
shapeLayer.strokeEnd = strokeEnd
}
}
Animation of the path of a CAShapeLayer
Have method that creates the UIBezierPath:
func setProgress(_ progress: CGFloat, animated: Bool = true) {
self.progress = progress
let cgPath = path(for: progress).cgPath
if animated {
let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = shapeLayer.path
animation.toValue = cgPath
shapeLayer.path = cgPath
layer.add(animation, forKey: nil)
} else {
shapeLayer.path = cgPath
}
}
Where
func path(for progress: CGFloat) -> UIBezierPath {
let path = UIBezierPath()
let percent = max(0, min(1, progress))
let width = bounds.width - lineWidth
path.move(to: CGPoint(x: bounds.midX - width * percent / 2 , y: bounds.midY))
path.addLine(to: CGPoint(x: bounds.midX + width * percent / 2, y: bounds.midY))
return path
}
When you create the CAShapeLayer call setProgress with value of 0 and no animation; and
When you want to animate it out, then call setProgress with value of 1 but with animation.
Abandon UIBezierPath/CAShapeLayer approaches and use UIView and UIView block-based animation:
Create short UIView with a backgroundColor and whose layer has a cornerRadius which is half the height of the view.
Define constraints such that the view has a zero width. E.g. you might define the centerXanchor and so that it’s placed where you want it, and with a widthAnchor is zero.
Animate the constraints by setting the existing widthAnchor’s constant to whatever width you want and place layoutIfNeeded inside a UIView animation block.

SpriteKit - Animate SKShapeNode Shape Path

Currently I am using Core Graphics for a shape and to transform the shape in to a different one with CAShapeLayer and CABasicAnimation path animation.
However due to the complexity of the game, If were to step in to SpritKit, using SKShapeNode, (discarding CAShapeLayer and using SKShapeNode) would I be able to smoothly animate it in to a different shape?
I did not see a SKAction method that would let you change the path of a SKShapeNode.
Thanks in advance.
Well. Happy holidays.
The simplest way is to use the CALayerAnimation to teach the SKNode how to action like this :
class ViewController: UIViewController {
#IBOutlet weak var skview: SKView!
var path1: CGPath!
var path2: CGPath!
override func viewDidLoad() {
super.viewDidLoad()
path1 = CGPath.init(rect: CGRect.init(x: 0, y: 0, width: 100, height: 100), transform: nil)
path2 = CGPath.init(rect: CGRect.init(x: 0, y: 0, width: 250, height: 400), transform: nil)
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let shapeLayer = CAShapeLayer()
self.view.layer.addSublayer(shapeLayer)
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.path = path1
let anim = CABasicAnimation.init(keyPath: "path")
anim.duration = 1.0
anim.fromValue = path1
anim.toValue = path2
anim.isRemovedOnCompletion = false
let shapeNode = SKShapeNode.init(path: path1)
shapeNode.fillColor = UIColor.green
skview.scene?.addChild(shapeNode)
shapeLayer.add(anim, forKey:
"prepanimation")
shapeNode.run(SKAction.customAction(withDuration: anim.duration, actionBlock: { (node, timeDuration) in
(node as! SKShapeNode).path =
shapeLayer.presentation()?.path
}))
}
}
If you path is too big and an optimum way is to consider converting CABasicAnimation to CAKeyFrameAnimation approach.
From the above process you can extract a pair (time, presentation_Path) at design time. Then assign back during the runtime in SKCustomAction. Please refer to SKKeyframeSequence to get the idea (not exactly but similar animation).

How to prevent CABasicAnimation from scale all content inside UIView?

I've wrote this to apply heart beat animation to CAShapeLayer, after this worked fine, I need to implement it to be behind UIButton (btnTest) without scaling the UIButton or any other content.
#IBOutlet weak var btnTest: UIButton!
let btnLayer = CAShapeLayer()
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
btnTest.layer.removeAllAnimations()
let ovalPath = UIBezierPath(arcCenter: CGPoint(x: btnTest.frame.midX, y: btnTest.frame.midY), radius: 100, startAngle: 0*(CGFloat.pi / 180), endAngle: 360*(CGFloat.pi / 180), clockwise: true)
btnLayer.path = ovalPath.cgPath
btnLayer.fillColor = UIColor.red.cgColor
btnLayer.contentsGravity = "center"
btnLayer.opacity = 0.3
self.view.layer.addSublayer(btnLayer)
let theAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
theAnimation.duration = 0.75
theAnimation.repeatCount = Float.infinity
theAnimation.autoreverses = true
theAnimation.fromValue = 1.0
theAnimation.toValue = 1.2
theAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
self.view.layer.add(theAnimation, forKey: nil)
}
the is this result gif
another solution was changing this line :
self.view.layer.add(theAnimation, forKey: nil)
to this :
btnLayer.add(theAnimation, forKey: nil)
the result of this was this :gif
Any ideas to solve this problem !
You want to animate your btnLayer. The reason it's animating from the wrong place is probably that the layer's anchorPoint is at 0,0, where it should be set to 0.5, 0.5.
Edit:
Actually, I think the issue is where you put your btnLayer. You should make it a sublayer of your button view's layer, and give it a frame that's the bounds of the button's layer:
btnTest.layer.addSublayer(btnLayer)
btnLayer.frame = btnTest.layer.bounds
You can do it like this, just translate your layer alongside with scale animation. To do so you need to create a CAAnimationGroup.
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
btnTest.layer.removeAllAnimations()
let ovalPath = UIBezierPath(arcCenter: CGPoint(x: btnTest.frame.midX, y: btnTest.frame.midY), radius: 100, startAngle: 0*(CGFloat.pi / 180), endAngle: 360*(CGFloat.pi / 180), clockwise: true)
btnLayer.path = ovalPath.cgPath
btnLayer.fillColor = UIColor.red.cgColor
btnLayer.anchorPoint = CGPoint.init(x: 0.5, y: 0.5)
btnLayer.contentsGravity = "center"
btnLayer.opacity = 0.3
self.view.layer.addSublayer(btnLayer)
let theAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
theAnimation.fromValue = 1.0
theAnimation.toValue = 1.2
let theAnimationTranslationX = CABasicAnimation(keyPath: "transform.translation.x")
theAnimationTranslationX.fromValue = btnTest.bounds.minX
theAnimationTranslationX.toValue = btnTest.bounds.minX - 40
let theAnimationTranslationY = CABasicAnimation(keyPath: "transform.translation.y")
theAnimationTranslationY.fromValue = btnTest.bounds.minY
theAnimationTranslationY.toValue = btnTest.bounds.minY - 80
let animationGroup = CAAnimationGroup.init()
animationGroup.duration = 0.75
animationGroup.repeatCount = Float.infinity
animationGroup.autoreverses = true
animationGroup.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
animationGroup.animations = [theAnimation,theAnimationTranslationX,theAnimationTranslationY]
btnLayer.add(animationGroup, forKey: nil)
}
1- First make the heart shape that will animate a UIView let's name it heartView.
2- self.view.addsubview(heartView) (self.view can be changed to any parent you want)
3- make an invisible button called heartButton and give it the same frame of heartView
4- self.view.addsubview(heartButton) (self.view can be changed to any parent you want)
5- start the heartView animation.
The key point here is not to add the button on the animating view but on their parent (self.view this case) since if the button was on top of the heart and the heart is animating, the button will adopt the animation.
Hope this helps!

Animating a circular progress circle smoothly via buttons

I am experiencing odd visual quirks with my progress circle. I would like the green circle (CAShapeLayer) to smoothly animate in increments of fifths. 0/5 = no green circle. 5/5 = full green circle. The problem is the green circle is animating past where it should be, then abruptly shrinks back to the proper spot. This happens when both the plus and minus button are pressed. There is a gif below demonstrating what is happening.
The duration of each animation should last 0.25 seconds, and should smoothly animate both UP and DOWN (depending if the plus or minus button is pressed) from wherever the animation ended last (which is currently not happening.)
In my UIView, I draw the circle, along with the method to animate the position of the progress:
class CircleView: UIView {
let progressCircle = CAShapeLayer()
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
}
override func draw(_ rect: CGRect) {
let circlePath = UIBezierPath(ovalIn: self.bounds)
progressCircle.path = circlePath.cgPath
progressCircle.strokeColor = UIColor.green.cgColor
progressCircle.fillColor = UIColor.red.cgColor
progressCircle.lineWidth = 10.0
// Add the circle to the view.
self.layer.addSublayer(progressCircle)
}
func animateCircle(circleToValue: CGFloat) {
let fifths:CGFloat = circleToValue / 5
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.duration = 0.25
animation.fromValue = fifths
animation.byValue = fifths
animation.fillMode = kCAFillModeBoth
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
progressCircle.strokeEnd = fifths
// Create the animation.
progressCircle.add(animation, forKey: "strokeEnd")
}
}
In my VC:
I init the circle and starting point with:
let myDrawnCircle = CircleView()
var startingPointForCircle = CGFloat()
viewDidAppear:
startingPointForCircle = 0.0
myDrawnCircle.frame = CGRect(x: 100, y: 100, width: 150, height: 150)
myDrawnCircle.backgroundColor = UIColor.white
myDrawnCircle.animateCircle(circleToValue: startingPointForCircle)
self.view.addSubview(myDrawnCircle)
textLabel.text = "\(startingPointForCircle)"
And the actual buttons that do the cool animating:
#IBAction func minusButtonPressed(_ sender: UIButton) {
if startingPointForCircle > 0 {
startingPointForCircle -= 1
textLabel.text = "\(startingPointForCircle)"
myDrawnCircle.animateCircle(circleToValue: startingPointForCircle)
}
}
#IBAction func plusButtonPressed(_ sender: UIButton) {
if startingPointForCircle < 5 {
startingPointForCircle += 1
textLabel.text = "\(startingPointForCircle)"
myDrawnCircle.animateCircle(circleToValue: startingPointForCircle)
}
}
Here's a gif showing you what's going on with the jerky animations.
How do I make my animations smoothly animate TO the proper value FROM the proper value?
My guess is it has something to do with using a key path. I don't know how exactly to fix it for using a key path, but you could try a different tack, using a custom view, and animating the value passed to the method used for drawing an arc.
The code below was generated by PaintCode. The value passed for arc specifies the point on the circle to draw the arc to. This is used in the drawRect method of a custom UIView. Make a CGFloat property of the custom view and simply change that value, and call setNeedsDisplay on the view after your animation code.
func drawCircleProgress(frame frame: CGRect = CGRect(x: 0, y: 0, width: 40, height: 40), arc: CGFloat = 270) {
//// General Declarations
let context = UIGraphicsGetCurrentContext()
//// Color Declarations
let white = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let white50 = white.colorWithAlpha(0.5)
//// Oval Drawing
CGContextSaveGState(context)
CGContextTranslateCTM(context, frame.minX + 20, frame.minY + 20)
CGContextRotateCTM(context, -90 * CGFloat(M_PI) / 180)
let ovalRect = CGRect(x: -19.5, y: -19.5, width: 39, height: 39)
let ovalPath = UIBezierPath()
ovalPath.addArcWithCenter(CGPoint(x: ovalRect.midX, y: ovalRect.midY), radius: ovalRect.width / 2, startAngle: 0 * CGFloat(M_PI)/180, endAngle: -arc * CGFloat(M_PI)/180, clockwise: true)
white.setStroke()
ovalPath.lineWidth = 1
ovalPath.stroke()
CGContextRestoreGState(context)
}
The desired results were as simple as commenting out fromValue / byValue in the animateCircle method. This was pointed out by #dfri - "set both fromValue and toValue to nil then: "Interpolates between the previous value of keyPath in the target layer’s presentation layer and the current value of keyPath in the target layer’s presentation layer."
//animation.fromValue = fifths
//animation.byValue = fifths

Resources