How to update toValue/fromValue of CABasicAnimation to be smoother when changed? - ios

Question

I've 2 animations applied to CAShapeLayer(let's name it pulseLayer), with this code :
let scaledAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
scaledAnimation.duration = 0.75
scaledAnimation.repeatCount = Float.infinity
scaledAnimation.autoreverses = true
scaledAnimation.fromValue = 4
scaledAnimation.toValue = 4
scaledAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
let heartBeatAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
heartBeatAnimation.duration = 0.75
heartBeatAnimation.repeatCount = Float.infinity
heartBeatAnimation.autoreverses = true
heartBeatAnimation.fromValue = 1.0
heartBeatAnimation.toValue = 1.2
heartBeatAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
pulseLayer.add(heartBeatAnimation, forKey: "heartBeatAnimation")
at some point while heartBeatAnimation is on I need to remove heart beat animation and add the scaled animation with this code :
pulseLayer.add(self.scaledAnimation, forKey: "scaledAnimation")
pulseLayer.opacity = 0.55
pulseLayer.removeAnimation(forKey: "heartBeatAnimation")
but I didn't get any smooth transition between this two animation, even with UIView.animate()
so I tried to stay with only one animation heartBeatAnimation and change its toValue fromValue to the same value to get as scaledAnimation with this code :
heartBeatAnimation.toValue = 4
heartBeatAnimation.fromValue = 4
nothing happened while the animation is beating after the animation gone and the user does some gesture to start the animation I got the scaled steady animation...!
so any ideas how to update these values to make the scaled animation smoother!

Answer 1

Try this and see. Complete animation and switching between both is depends upon
duration, count, fromValue and toValue properties of CABasicAnimation with UIView.animate closure
#IBOutlet var vwAnimation: UIView!
let initialScale: CGFloat = 1.0
let animatingScale: CGFloat = 2.0
let finalScale: CGFloat = 3.0
override func viewDidLoad() {
super.viewDidLoad()
addAnimation()
}
func addAnimation(){
heartBeatAnimation()
self.perform(#selector(self.switchAnimation), with: nil, afterDelay: 3.0)
}
#objc func switchAnimation(){
UIView.animate(withDuration: 0.25, animations: {
self.vwAnimation.layer.removeAnimation(forKey: "heartBeatAnimation")
self.scaledAnimation()
self.vwAnimation.layoutIfNeeded()
}) { (isCompleted) in
}
}
func scaledAnimation() -> Void {
let scaledAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
scaledAnimation.duration = 0.5
scaledAnimation.repeatCount = 0.5
scaledAnimation.autoreverses = true
scaledAnimation.fromValue = initialScale
scaledAnimation.toValue = finalScale
scaledAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
vwAnimation.layer.add(scaledAnimation, forKey: "scaledAnimation")
self.perform(#selector(self.adjustScale), with: nil, afterDelay: 0.5)
}
#objc func adjustScale(){
self.vwAnimation.layer.removeAnimation(forKey: "scaledAnimation")
let scaleTransform = CGAffineTransform(scaleX: finalScale, y: finalScale)
vwAnimation.transform = scaleTransform
}
func heartBeatAnimation() -> Void {
let heartBeatAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
heartBeatAnimation.duration = 0.5
heartBeatAnimation.repeatCount = Float.infinity
heartBeatAnimation.autoreverses = true
heartBeatAnimation.fromValue = initialScale
heartBeatAnimation.toValue = animatingScale
heartBeatAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
vwAnimation.layer.add(heartBeatAnimation, forKey: "heartBeatAnimation")
}
Here is result of above code and let me know if want changes in this result:

Answer 2

Without using delays and such and using CATransaction and CASpringAnimations.
import UIKit
class ViewController: UIViewController {
var shapeLayer : CAShapeLayer!
var button : UIButton!
override func viewDidLoad() {
super.viewDidLoad()
//add a shapelayer
shapeLayer = CAShapeLayer()
shapeLayer.frame = CGRect(x: 0, y: 0, width: self.view.bounds.width/4, height: self.view.bounds.width/4)
shapeLayer.position = self.view.center
shapeLayer.path = drawStarPath(frame: shapeLayer.bounds).cgPath
let color = UIColor(red: 0.989, green: 1.000, blue: 0.000, alpha: 1.000)
shapeLayer.fillColor = color.cgColor
self.view.layer.addSublayer(shapeLayer)
//button for action
button = UIButton(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width - 20, height: 50))
button.center = self.view.center
button.center.y = self.view.bounds.height - 70
button.addTarget(self, action: #selector(ViewController.pressed(sender:)), for: .touchUpInside)
button.setTitle("Animate", for: .normal)
button.setTitleColor(.blue, for: .normal)
self.view.addSubview(button)
}
func pressed(sender:UIButton) {
if button.titleLabel?.text == "Reset Layer"{
reset()
return
}
//perform Animation
button.isEnabled = false
button.setTitle("Animating...", for: .normal)
let heartBeatAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
heartBeatAnimation.duration = 0.5
heartBeatAnimation.repeatCount = 2
heartBeatAnimation.autoreverses = true
heartBeatAnimation.fromValue = 1.0
heartBeatAnimation.toValue = 2.0
heartBeatAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
CATransaction.begin()
CATransaction.setCompletionBlock {
//call when finished
[weak self] in
if let vc = self{
vc.scaleUpToComplete()
}
}
shapeLayer.add(heartBeatAnimation, forKey: "beatAnimation")
CATransaction.commit()
}
func scaleUpToComplete(){
let scaledAnimation = CASpringAnimation(keyPath: "transform.scale.xy")
scaledAnimation.duration = 0.7
scaledAnimation.fromValue = 1.0
scaledAnimation.toValue = 2.0
scaledAnimation.damping = 8.0
scaledAnimation.initialVelocity = 9
scaledAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
CATransaction.begin()
CATransaction.setCompletionBlock {
//set transform
[weak self] in
if let vc = self{
let scaleTransform = CATransform3DScale(CATransform3DIdentity, 2.0, 2.0, 1)
vc.shapeLayer.transform = scaleTransform
vc.shapeLayer.removeAllAnimations()
//button title and enabled
vc.button.isEnabled = true
vc.button.setTitle("Reset Layer", for: .normal)
}
}
shapeLayer.add(scaledAnimation, forKey: "scaleUp")
CATransaction.commit()
}
func reset(){
let scaledAnimation = CASpringAnimation(keyPath: "transform.scale.xy")
scaledAnimation.duration = 0.7
scaledAnimation.fromValue = 2.0
scaledAnimation.toValue = 1.0
scaledAnimation.damping = 8.0
scaledAnimation.initialVelocity = 9
scaledAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
CATransaction.begin()
CATransaction.setCompletionBlock {
//set transform
[weak self] in
if let vc = self{
let scaleTransform = CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 1)
vc.shapeLayer.transform = scaleTransform
vc.shapeLayer.removeAllAnimations()
vc.button.setTitle("Animate", for: .normal)
}
}
shapeLayer.add(scaledAnimation, forKey: "scaleDown")
CATransaction.commit()
}
func drawStarPath(frame: CGRect = CGRect(x: 0, y: 0, width: 140, height: 140)) ->UIBezierPath{
//// Star Drawing
let starPath = UIBezierPath()
starPath.move(to: CGPoint(x: frame.minX + 0.50000 * frame.width, y: frame.minY + 0.21071 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.60202 * frame.width, y: frame.minY + 0.35958 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.77513 * frame.width, y: frame.minY + 0.41061 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.66508 * frame.width, y: frame.minY + 0.55364 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.67004 * frame.width, y: frame.minY + 0.73404 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.50000 * frame.width, y: frame.minY + 0.67357 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.32996 * frame.width, y: frame.minY + 0.73404 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.33492 * frame.width, y: frame.minY + 0.55364 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.22487 * frame.width, y: frame.minY + 0.41061 * frame.height))
starPath.addLine(to: CGPoint(x: frame.minX + 0.39798 * frame.width, y: frame.minY + 0.35958 * frame.height))
return starPath
}
}