CABasicAnimation without interpolation values - ios

Apple's documentation link states that:
The fromValue, byValue and toValue properties define the values being interpolated between. All are optional, and no more than two should be non-nil. The object type should match the type of the property being animated.
The interpolation values are used as follows:
All properties are nil. 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.
How can I make this work without specifying any of the fromValue, byValue, or toValue?
Here, I'm just animating the change of the cornerRadius property.
I know how to make this animation using toValue. But I just want to know if there is an even simpler code than this to achieve it:
import UIKit
import PlaygroundSupport
let rect = CGRect(x: 0,y: 0, width: 300, height: 400)
let view = UIView(frame: rect)
view.backgroundColor = UIColor.yellow
PlaygroundPage.current.liveView = view
let layer = CALayer()
layer.backgroundColor = UIColor.red.cgColor
layer.frame = CGRect(x: 75, y: 75, width: 150, height: 150)
view.layer.addSublayer(layer)
layer.cornerRadius = 15
let animation = CABasicAnimation(keyPath:#keyPath(CALayer.cornerRadius))
animation.toValue = layer.bounds.width / 2
animation.duration = 1
layer.add(animation, forKey: nil)

In some situations, where you have already set the layer's final value without animation, you can skip setting both the toValue and the fromValue in your CABasicAnimation, because the runtime gets the fromValue from the current value of the presentation layer and the toValue from the current value of the model layer.
For example, in my own code, it turns out that I can reduce this full form of specifying an animation...
let startValue = arrow.transform
let endValue = CATransform3DRotate(startValue, .pi/4.0, 0, 0, 1)
CATransaction.setDisableActions(true)
arrow.transform = endValue
let anim = CABasicAnimation(keyPath:#keyPath(CALayer.transform))
anim.duration = 0.8
let clunk = CAMediaTimingFunction(controlPoints:0.9, 0.1, 0.7, 0.9)
anim.timingFunction = clunk
anim.fromValue = startValue
anim.toValue = endValue
arrow.add(anim, forKey:nil)
...to this (notice that fromValue and toValue are omitted):
CATransaction.setDisableActions(true)
arrow.transform = CATransform3DRotate(arrow.transform, .pi/4.0, 0, 0, 1)
let anim = CABasicAnimation(keyPath:#keyPath(CALayer.transform))
anim.duration = 0.8
let clunk = CAMediaTimingFunction(controlPoints:0.9, 0.1, 0.7, 0.9)
anim.timingFunction = clunk
arrow.add(anim, forKey:nil)
However, I do not recommend that approach. It is much more reliable always to supply both the fromValue and the toValue. Yes, it's two more lines of code, but that is a small price to pay for avoiding confusion. Sometimes, clarity is simplicity.

Related

CALayer animation for width

I have one view in which need to add one layer. I successfully added the layer but now i want to do animation for it's width means layer start filling from "started" label and end at "awaiting..." label. I try to add animation with CABasicAnimation it start from beginning but it not properly fill. Please check video like for more understanding.
func startProgressAnimation()
{
self.ivStarted.isHighlighted = true
let layer = CALayer()
layer.backgroundColor = #colorLiteral(red: 0.4980392157, green: 0.8352941176, blue: 0.1921568627, alpha: 1)
layer.masksToBounds = true
layer.frame = CGRect.init(x: self.viewStartedAwaited.frame.origin.x, y: self.viewStartedAwaited.frame.origin.y, width: 0.0, height: self.viewStartedAwaited.frame.height)
self.ivStarted.layer.addSublayer(layer)
CATransaction.begin()
let boundsAnim:CABasicAnimation = CABasicAnimation(keyPath: "bounds.size.width")
boundsAnim.fromValue = NSNumber.init(value: 0.0)
boundsAnim.byValue = NSNumber.init(value: Float(self.viewStartedAwaited.frame.size.width / 2.0))
boundsAnim.toValue = NSNumber.init(value: Float(self.viewStartedAwaited.frame.size.width))
let anim = CAAnimationGroup()
anim.animations = [boundsAnim]
anim.isRemovedOnCompletion = false
anim.duration = 5
anim.fillMode = kCAFillModeBoth
CATransaction.setCompletionBlock{ [weak self] in
self?.ivAwaited.isHighlighted = true
}
layer.add(anim, forKey: "bounds.size.width")
CATransaction.commit()
}
Here is the video what i achieve with this code.
https://streamable.com/h6tpp
Not Proper
Proper image
Just set your
layer.anchorPoint = CGPoint(x: 0, y: 0)
After this it will work according to your requirement.
The default anchorpoint of (0.5,0.5) means that the growing or shrinking of width happens evenly on both sides. Anchorpoint of (0,0) means the layer is essentially pinned to the top left, so whatever new width it gets, the change happens on the right. That is, it matters not whether your animation key path is 'bounds' or 'bounds.size.width'. The anchor point is what determines where the change happens

How to flip a card while scaling it in Swift

I'm trying to take a card UIView object, which has both back and front image subviews in it, and flip it while scaling it larger until mid flip and then scaling it back down. I have it working with just the flipping part, using UIView.transition(with:duration:options:animations:completion:), but this doesn't seem to be the correct solution, as all animations in the block only occur halfway through the full animation, which makes sense, since that's the point the views need to be added/removed.
I'm guessing I need to drop down to a lower level here, but I'm not that familiar with animations beyond the UIView layer. Any suggestions on how to add this scaling functionality to the card flip?
I'd put the both sides of the card under the layers of the view, you can do so by setting the contents of a CALayer. Then you apply the CABasicAnimation on the sublayers.
This is a simple demo which should run on the playground, without scaling implemented, you can modify the matrix by CATransform3DRotate(t:angle:x:y:z:) yourself.
var t = CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0)
t.m34 = 0.001 // set a 3D perspective to simulate real flipping
let anim = CABasicAnimation(keyPath: "transform")
anim.byValue = NSValue(caTransform3D: t)
anim.duration = 3
anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
anim.fillMode = kCAFillModeForwards
anim.isRemovedOnCompletion = true
let cardContainer = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 100))
cardContainer.backgroundColor = UIColor.clear
// layer1: front side of the card
let layer1 = CALayer()
layer1.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
layer1.backgroundColor = UIColor.red.cgColor
layer1.isDoubleSided = false
// layer2: back side of the card
let layer2 = CALayer()
layer2.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
layer2.backgroundColor = UIColor.blue.cgColor
layer2.isDoubleSided = false
layer2.transform = CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0)
cardContainer.layer.addSublayer(layer1)
cardContainer.layer.addSublayer(layer2)
layer1.add(anim, forKey: "anim1")
layer2.add(anim, forKey: "anim2")

CABasicAnimation not scaling around center

I want to perform opacity And Scale effect at same time my animation work perfect but it's position is not proper. i want to perform animation on center.
This is my code.
btn.backgroundColor = UIColor.yellowColor()
let stroke = UIColor(red:236.0/255, green:0.0/255, blue:140.0/255, alpha:0.8)
let pathFrame = CGRectMake(24, 13, btn.bounds.size.height/2, btn.bounds.size.height/2)
let circleShape1 = CAShapeLayer()
circleShape1.path = UIBezierPath(roundedRect: pathFrame, cornerRadius: btn.bounds.size.height/2).CGPath
circleShape1.position = CGPoint(x: 2, y: 2)
circleShape1.fillColor = stroke.CGColor
circleShape1.opacity = 0
btn.layer.addSublayer(circleShape1)
circleShape1.anchorPoint = CGPoint(x: 0.5, y: 0.5)
let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.fromValue = NSValue(CATransform3D: CATransform3DIdentity)
scaleAnimation.toValue = NSValue(CATransform3D: CATransform3DMakeScale(2.0, 2.0, 1))
let alphaAnimation = CABasicAnimation(keyPath: "opacity")
alphaAnimation.fromValue = 1
alphaAnimation.toValue = 0
CATransaction.begin()
let animation = CAAnimationGroup()
animation.animations = [scaleAnimation, alphaAnimation]
animation.duration = 1.5
animation.repeatCount = .infinity
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
circleShape1.addAnimation(animation, forKey:"Ripple")
CATransaction.commit()
The problem is that you are not grappling with frames correctly. You say:
let circleShape1 = CAShapeLayer()
But you have forgotten to give circleShape1 a frame! Thus, its size is zero, and very weird things happen when you animate it. Your job in the very next line should be to assign circleShape1 a frame. Example:
circleShape1.frame = pathFrame
That may or may not be the correct frame; it probably isn't. But you need to figure that out.
Then, you need to fix the frame of your Bezier path in terms of the shape layer's bounds:
circleShape1.path = UIBezierPath(roundedRect: circleShape1.bounds // ...
I have never worked with sublayers so I would make it with a subview instead, makes the code a lot easier:
btn.backgroundColor = UIColor.yellow
let circleShape1 = UIView()
circleShape1.frame.size = CGSize(width: btn.frame.height / 2, height: btn.frame.height / 2)
circleShape1.center = CGPoint(x: btn.frame.width / 2, y: btn.frame.height / 2)
circleShape1.layer.cornerRadius = btn.frame.height / 4
circleShape1.backgroundColor = UIColor(red:236.0/255, green:0.0/255, blue:140.0/255, alpha:0.8)
circleShape1.alpha = 1
btn.addSubview(circleShape1)
UIView.animate(withDuration: 1,
delay: 0,
options: [.repeat, .curveLinear],
animations: {
circleShape1.transform = CGAffineTransform(scaleX: 5, y: 5)
circleShape1.alpha = 0.4
}, completion: nil)
You need to create path frame with {0,0} position, and set correct frame to the Layer:
let pathFrame = CGRectMake(0, 0, btn.bounds.size.height/2, btn.bounds.size.height/2)
....
circleShape1.frame = CGRect(x: 0, y: 0, width: pathFrame.width, height: pathFrame.height)
circleShape1.position = CGPoint(x: 2, y: 2)
If you want to create path with {13,24} position you need to change width and height in layer. Your shape should be in center of layer.

Transform doesn't work with animation

I'm trying to set up a CALayer to increase in width at the bottom of my viewcontroller by using CATransform3DMakeScale. I can get the layer to scale just fine, but when I try to apply the transformation through an animation, the layer transforms without any animation.
let progressBar1 = CALayer()
override func viewDidAppear() {
progressBar1.bounds = CGRect(x: 0, y: 0, width: 1, height: 5)
progressBar1.position = CGPoint(x: 0, y: 600)
progressBar1.backgroundColor = UIColor.white.cgColor
view.layer.addSublayer(progressBar1)
extendBar1()
}
func extendBar1(){
let transform1 = CATransform3DMakeScale(30, 1, 0)
let anim = CABasicAnimation(keyPath: "transform")
anim.isRemovedOnCompletion = false
anim.fillMode = kCAFillModeForwards
anim.toValue = NSValue(caTransform3D:transform1)
anim.duration = 10.00
progressBar1.add(anim, forKey: "transform")
}
I also tried the following with CATransaction but I get the same result
func extendBar3(){
let transform1 = CATransform3DMakeScale(30, 1, 0)
CATransaction.begin()
CATransaction.setAnimationDuration(7.0)
progressBar1.transform = transform1
CATransaction.commit()
}
The chief remaining problem is this line:
let transform1 = CATransform3DMakeScale(30, 1, 0)
Change the 0 to a 1.
(The result may still not be the animation you want, precisely, but at least you should see something — as long as (0,600) is not off the screen entirely, of course.)

CALayer resizing back to original size after transform animation

I'm trying to implement two consecutive transformation animations. When the first animation ends, the second animation is called through the completion handler. Because this is a transformation animation, my issue is that when the first animation finishes, the layer resizes back to the original size, and then the second animation begins. I'd like for the second animation to begin with the new layer size after the first transformation animation. This post Objective-C - CABasicAnimation applying changes after animation? says I have to resize/transform the layer before beginning the first animation, so that when the first animation ends, the layer is actually the new size. I've tried to do that by changing the bounds or actually applying the transform to the layer but its still not working.
override func viewDidAppear(_ animated: Bool) {
buildBar()
}
func buildBar(){
progressBar1.bounds = CGRect(x: 0, y: 0, width: 20, height: 5)
progressBar1.position = CGPoint(x: 0, y: 600)
progressBar1.backgroundColor = UIColor.white.cgColor
view.layer.addSublayer(progressBar1)
extendBar1()
}
func extendBar1(){
CATransaction.begin()
let transform1 = CATransform3DMakeScale(10, 1, 1)
let anim = CABasicAnimation(keyPath: "transform")
// self.progressBar1.bounds = CGRect(x: 0, y: 0, width: 200, height: 5)
// self.progressBar1.transform = transform1
anim.isRemovedOnCompletion = false
anim.fillMode = kCAFillModeForwards
anim.toValue = NSValue(caTransform3D:transform1)
anim.duration = 5.00
CATransaction.setCompletionBlock {
self.extendBar2()
}
progressBar1.add(anim, forKey: "transform")
CATransaction.commit()
}
func extendBar2(){
let transform1 = CATransform3DMakeScale(2, 1, 1)
let anim = CABasicAnimation(keyPath: "transform")
anim.isRemovedOnCompletion = false
anim.fillMode = kCAFillModeForwards
anim.toValue = NSValue(caTransform3D:transform1)
anim.duration = 5.00
progressBar1.add(anim, forKey: "transform")
}
Because you are modifying the transform property of the layer in both animation, it will be easier here to use CAKeyframeAnimation, which will handle the chaining of the animations for you.
func extendBar(){
let transform1 = CATransform3DMakeScale(10, 1, 1)
let transform2 = CATransform3DMakeScale(2, 1, 1)
let anim = CAKeyframeAnimation()
anim.keyPath = "transform"
anim.values = [progressBar1.transform, transform1, transform2] // the stages of the animation
anim.keyTimes = [0, 0.5, 1] // when they occurs, 0 being the very begining, 1 the end
anim.duration = 10.00
progressBar1.add(anim, forKey: "transform")
progressBar1.transform = transform2 // we set the transform property to the final animation's value
}
A word about the content of values and keyTimes:
We set the first value to be the current transform of progressBar1. This will make sure we start in the current layer's state.
In keyTimes, we say that at the begining, the first value in the values array should be used. We then say at animation's half time, the layer should be transformed in values second value. Hence, the animation between the initial state and the second one will occurs during that time. Then, between 0.5 to 1, we'll go from tranform1 to transform2.
You can read more about animations in this very nice article from objc.io.
If you really need two distinct animations (because maybe you want to add subviews to progressBar1 in between, here's the code that will do it
func extendBar1() {
CATransaction.begin()
CATransaction.setCompletionBlock {
print("side effects")
extendBar2()
}
let transform1 = CATransform3DMakeScale(5, 1, 1)
let anim = CABasicAnimation(keyPath: "transform")
anim.fromValue = progressBar1.transform
anim.toValue = transform1
anim.duration = 2.00
progressBar1.add(anim, forKey: "transform")
CATransaction.setDisableActions(true)
progressBar1.transform = transform1
CATransaction.commit()
}
func extendBar2() {
CATransaction.begin()
let transform2 = CATransform3DMakeScale(2, 1, 1)
let anim = CABasicAnimation(keyPath: "transform")
anim.fromValue = progressBar1.transform
anim.toValue = transform2
anim.duration = 2.00
progressBar1.add(anim, forKey: "transform")
CATransaction.setDisableActions(true)
progressBar1.transform = transform2
CATransaction.commit()
}
What happens here? Basically, we setup a first "normal animation". So we create the animation, that will modify the presentation layer and set the actual layer to the final first animation's transform.
Then, when the first animation completes, we call extendBar2 which will in turn queue a normal animation.
You also want to call CATransaction.setDisableActions(true) before explicitly updating the transform, otherwise, core animation will create an implicit one, which will override the one created just before.

Resources