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.)
Related
I am trying to have a view in which 3 dots would animate infinity and here is the code snippet(swift 5) for it
func showAnimatingDotsInImageView() {
let lay = CAReplicatorLayer()
lay.frame = CGRect(x: 0, y: 0, width: 15, height: 7) //yPos == 12
let circle = CALayer()
circle.frame = CGRect(x: 0, y: 0, width: 7, height: 7)
circle.cornerRadius = circle.frame.width / 2
circle.backgroundColor = UIColor.green.cgColor
lay.addSublayer(circle)
lay.instanceCount = 3
lay.instanceTransform = CATransform3DMakeTranslation(10, 0, 0)
let anim = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))
anim.fromValue = 1.0
anim.toValue = 0.2
anim.duration = 1
anim.repeatCount = .infinity
circle.add(anim, forKey: nil)
lay.instanceDelay = anim.duration / Double(lay.instanceCount)
test1.layer.addSublayer(lay)
}
In the above code test1 is a UIImageView.
The main issue is the dots are shown but it's static and doesn't animate.
I tried your code and it is animating just fine.
Any chance you are calling this from a thread which is different than the Main thread? Like for example something on the background is happening, which you want to triggers the loading?
Try adding:
DispatchQueue.main.async { [weak self] in
self?.showAnimatingDotsInImageView()
}
I want to implement a 3D roration on a door Image on a layer, but it does not work.
I found the animation stoped the function invoke immediately at start. So I think this is the reason why animation does not work.
Below is my code:
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
// Do any additional setup after loading the view.
let doorLayer = CALayer()
doorLayer.frame = CGRect(x: 0, y: 0, width: 128, height: 256)
doorLayer.position = CGPoint(x: 150 - 64, y: 150)
doorLayer.anchorPoint = CGPoint(x: 0, y: 0.5)
doorLayer.contents = UIImage(named: "door")?.cgImage
self.view.layer.addSublayer(doorLayer)
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
self.view.layer.sublayerTransform = perspective
let animation = CABasicAnimation()
animation.keyPath = "transform.rotation.y"
animation.toValue = -Double.pi/2
animation.duration = 2.0
animation.repeatCount = 5
animation.autoreverses = true
animation.delegate = self
doorLayer.add(animation, forKey: "rotationAnimation")
}
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
print(#function)
}
When the View shows, the message shows immediately.
How shall I do ?
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.
I'm trying to get a transform animation to work by having the width of a CALayer increase in 3 increments from a width of 1 to the width of the entire view. If my understanding is correct, each transformation is being applied to the original layer size. If the width is 1 and I'm scaling the transformation by self.view.frame.size.width I expect the animation layer to take up the entire view width, but instead its stopping half way. Why is that?
let progressBar1 = CALayer()
var transform1 = CATransform3DMakeScale(1, 1, 1)
var transform2 = CATransform3DMakeScale(1, 1, 1)
var transform3 = CATransform3DMakeScale(1, 1, 1)
override func viewDidLoad() {
super.viewDidLoad()
setupAnimationTransforms()
}
override func viewDidAppear(_ animated: Bool) {
buildBar()
}
func setupAnimationTransforms(){
transform1 = CATransform3DMakeScale(20, 1, 1)
transform2 = CATransform3DMakeScale(40, 1, 1)
transform3 = CATransform3DMakeScale(self.view.frame.size.width, 1, 1)
}
func buildBar(){
progressBar1.bounds = CGRect(x: 0, y: 0, width: 1, height: 5)
progressBar1.position = CGPoint(x: 0, y: self.view.frame.size.height)
progressBar1.backgroundColor = UIColor.red.cgColor
view.layer.addSublayer(progressBar1)
animate1()
}
func animate1(){
CATransaction.begin()
CATransaction.setCompletionBlock {
self.animate2()
}
let anim = CABasicAnimation(keyPath: "transform")
anim.fromValue = progressBar1.transform
anim.toValue = transform1
anim.duration = 1.00
progressBar1.add(anim, forKey: "transform")
CATransaction.setDisableActions(true)
self.progressBar1.transform = transform1
CATransaction.commit()
}
func animate2(){
CATransaction.begin()
CATransaction.setCompletionBlock {
self.animate3()
}
let anim = CABasicAnimation(keyPath: "transform")
anim.fromValue = transform1
anim.toValue = transform2
anim.duration = 1.00
progressBar1.add(anim, forKey: "transform")
CATransaction.setDisableActions(true)
progressBar1.transform = transform2
CATransaction.commit()
}
func animate3(){
CATransaction.begin()
CATransaction.setCompletionBlock {
print("DONE")
}
let anim = CABasicAnimation(keyPath: "transform")
anim.fromValue = transform2
anim.toValue = transform3
anim.duration = 1.00
progressBar1.add(anim, forKey: "transform")
CATransaction.setDisableActions(true)
progressBar1.transform = transform3
CATransaction.commit()
}
There is no need to use a transform here; you can simply animate the width.
Also there is a constant CATransform3DIdentity so you don't need CATransform3DMakeScale(1, 1, 1).
As for your original question, I believe the answer is that you are scaling about the default anchor point which is 0.5, 2.5 so almost half of your scaled up bar is off screen to the left (or more precisely half minus 0.5 points is offscreen to the left). You also need a translate here or you need to move the anchor point if you really ant to use a scale. Animating the width is a much easier solution since there is no need to mess with the anchor or concatenate transforms.
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.