I have an spinning UIView to show progress in each cell of a UITableView and I am using this function to animate UIViews:
func rotate360Degrees(duration: CFTimeInterval = 1.0) {
let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.fromValue = 0.0
rotateAnimation.toValue = CGFloat.pi * 2
rotateAnimation.duration = duration
rotateAnimation.repeatCount = Float.infinity
self.layer.add(rotateAnimation, forKey: nil)
}
It works fine when the cells appears first but when you scroll the UITableView and the cells disappear and after that they shows up by scrolling again, their animations are stopped. I tried calling the method for them again after reappearing but it didn't work. what is wrong with my code?
UITableViewCell objects are reusable and you need to restore the animation in prepareForReuse: or tableView(_:willDisplay:forRowAt:) method.
func getRotate360DegreesAnimation(duration: CFTimeInterval = 1.0) -> CABasicAnimation {
let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.fromValue = 0.0
rotateAnimation.toValue = .pi * 2
rotateAnimation.duration = duration
rotateAnimation.repeatCount = .infinity
return rotateAnimation
}
func restoreAnimation() {
let animation = getRotate360DegreesAnimation()
layer.removeAllAnimations()
layer.add(animation, forKey: nil)
}
Related
I have a collection view where the first cell needs to be animated with scaling. The standard cabasic animation's behaviour goes under neighbouring cell but I need to find a way so the scaling animation overlaps neighbouring cell. I've tried to put a clear view on a cell and animate it, so it would've been at the top of view hierarchy but it didn't help. Is there any assumptions how it can be achieved?
class func pulse(view: UIView, sizeMultiplier: Float, duration: TimeInterval, repeatCount: Float = 1.0) {
let pulseAnimation = CABasicAnimation(keyPath: "transform.scale")
pulseAnimation.duration = duration
pulseAnimation.toValue = NSNumber(value: sizeMultiplier)
pulseAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
pulseAnimation.autoreverses = true
pulseAnimation.repeatCount = repeatCount
view.layer.add(pulseAnimation, forKey: nil)
}
This is strange to me
For the following code (where myView is a coloured UIView on the storyboard) the timing seems off.
class ViewController: UIViewController {
#IBOutlet weak var myView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let round = CABasicAnimation(keyPath: "cornerRadius")
round.fromValue = 0.0
round.toValue = 50.0
round.duration = 2.0
round.beginTime = 0.0
round.fillMode = CAMediaTimingFillMode.backwards
round.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeIn)
myView.layer.cornerRadius = 50.0
let scaleDown = CABasicAnimation(keyPath: "transform.scale")
scaleDown.fromValue = 1.0
scaleDown.toValue = 0.25
scaleDown.beginTime = 2.0
scaleDown.duration = 2.0
let rotate = CABasicAnimation(keyPath: "transform.rotation")
rotate.fromValue = .pi/10.0
rotate.toValue = 0.0
rotate.beginTime = 4.0
rotate.duration = 2.0
let hideAnimation = CABasicAnimation(keyPath: "hidden")
hideAnimation.fromValue = NSNumber(value: 1)
hideAnimation.toValue = NSNumber(value: 0)
hideAnimation.beginTime = 4.0
hideAnimation.duration = 2.0
let imageGroupAnimations = CAAnimationGroup()
imageGroupAnimations.animations = [round, scaleDown, rotate, hideAnimation]
imageGroupAnimations.duration = 6.0
imageGroupAnimations.repeatCount = 1
imageGroupAnimations.beginTime = 0.0
myView.layer.add(imageGroupAnimations, forKey: nil)
}
}
The duration of the animation group is 6.0, so I would expect the shape to be hidden (since I expect it to be hidden from 4 to 4 + 2 (6.0) seconds.
However, the shape appears and finishes off the animation (finish rotating). I've tried using CACurrentMediaTime() in front of every beginTime - but this also doesn't have the expected result.
Expected result:
0-2 seconds animate corner radius change
2-4 seconds animate scale transformation
4-6 seconds animate rotation (hidden from the user)
How can I make the shape disappear from 4 - 6 seconds?
If you want to show fade-out effect on view, use
let hideAnimation = CABasicAnimation(keyPath: "opacity")
Instead of
let hideAnimation = CABasicAnimation(keyPath: "hidden") //bad!
If you don't want animation to reset your values after finish, simply add
imageGroupAnimations.fillMode = .forwards
imageGroupAnimations.isRemovedOnCompletion = false
to your CAAnimationGroup
The duration is not how long something stays true — it is how long it takes to perform a change.
So if you want the view to vanish suddenly, obviously you need to change hideAnimation.duration = 2.0 so that the duration is very short, say, 0.01.
This is a hideAnimation where the view turns invisible suddenly at the 4th second of the animation, and stays invisible until the end of the animation:
let hideAnimation = CABasicAnimation(keyPath: "hidden")
hideAnimation.fromValue = false
hideAnimation.toValue = true
hideAnimation.beginTime = 4.0
hideAnimation.duration = 0.01
hideAnimation.fillMode = .forwards
But I did not make any other changes because I still do not understand the complete effect that you want...
So, I have a CALayer that is being rotated and scaled using CABasicAnimation. Since the layer is being rotated, frame returns the frame containing the highest to lowest x and y values(so this will be larger than the actual presented layer). And, while bounds would work if scaling does not occur, the bounds of the layer do not. Here is my code for my custom UIView subclass:
func rotateCircleView(duration: CFTimeInterval = 1.0) {
let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.fromValue = 0.0
rotateAnimation.toValue = CGFloat(M_PI * 2.0)
rotateAnimation.duration = duration
rotateAnimation.repeatCount = Float.infinity
self.layer.addAnimation(rotateAnimation, forKey: rotateKey)
}
func shrinkCircleView(duration: CFTimeInterval = 1.0, to: Double) {
let from = self.getCurrentAnimationScale()
let shrinkAnimation = CABasicAnimation(keyPath: "transform.scale")
shrinkAnimation.additive = true
shrinkAnimation.fromValue = from - to
shrinkAnimation.toValue = 0
shrinkAnimation.duration = duration
shrinkAnimation.removedOnCompletion = true
let scaleTransform = CATransform3DMakeScale(CGFloat(to), CGFloat(to), 1.0)
layer.transform = scaleTransform
layer.addAnimation(shrinkAnimation, forKey: "shrinkAnimation")
}
func getCurrentAnimationScale() -> Double{
if let temp = self.layer.presentationLayer(){
// return scale of presentationLayer
} else{
// return scale of self.layer
}
}
I'm a bit struggling with this simple line animation. I figured out how to pause it, but what I need is to be able to reverse animation back to starting point from the moment I call function resetAnimation().
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
let pathLayer = CAShapeLayer()
func lineAnimation() {
let path = UIBezierPath()
let screenWidth = self.view.bounds.width
let screenHeight = self.view.bounds.height
path.moveToPoint(CGPointMake(screenWidth, screenHeight / 2))
path.addLineToPoint(CGPointMake(screenWidth - screenWidth, screenHeight / 2))
self.pathLayer.frame = self.view.bounds
self.pathLayer.path = path.CGPath
self.pathLayer.strokeColor = UIColor.whiteColor().CGColor
self.pathLayer.fillColor = nil
self.pathLayer.lineWidth = 3.0
self.pathLayer.lineCap = kCALineCapRound
self.pathLayer.speed = 1
self.view.layer.addSublayer(pathLayer)
self.pathAnimation.duration = 5.0
self.pathAnimation.fromValue = 0.0
self.pathAnimation.toValue = 1.0
pathLayer.addAnimation(pathAnimation, forKey: "animate")
}
func pauseAnimation() {
let pausedTime = pathLayer.convertTime(CACurrentMediaTime(), fromLayer: nil)
pathLayer.speed = 0
pathLayer.timeOffset = pausedTime
}
func resetAnimation() {
}
You just need to create a new animation and remove the old one. Your starting point for the new animation will be the current value of that property in your presentation layer. I'd also recommend setting the frame of your shape layer to the bounds of the actual bezier shape instead of the entire view - its a good habit to be in when you start moving things around and scaling/rotating/etc. Otherwise you're gonna be faced with a bunch of funky conversions or anchor point changes.
Here's what I'd do:
let pathLayer = CAShapeLayer()
// first, separate your drawing code from your animation code.
// this way you can call animations without instantiating new objects
func drawLine() {
let path = UIBezierPath()
// draw your path with no position translation.. move the layer
path.moveToPoint(CGPointMake(view.bounds.width, 0))
path.addLineToPoint(CGPointMake(0, 0))
pathLayer.frame = path.bounds
// this line sets the position of the layer appropriately
pathLayer.position = view.bounds.width - pathLayer.bounds.width / 2
pathLayer.path = path.CGPath
pathLayer.strokeColor = UIColor.whiteColor().CGColor
pathLayer.fillColor = nil
pathLayer.lineWidth = 3.0
pathLayer.lineCap = kCALineCapRound
view.layer.addSublayer(pathLayer)
}
func lineAnimation() {
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 5.0
pathAnimation.fromValue = 0.0
pathAnimation.toValue = 1.0
pathLayer.addAnimation(pathAnimation, forKey: "strokeEnd")
}
func reverseAnimation() {
let revAnimation = CABasicAnimation(keyPath: "strokeEnd")
revAnimation.duration = 5.0
// every Core Animation has a 'presentation layer' that contains the animated changes
revAnimation.fromValue = pathLayer.presentationLayer()?.strokeEnd
revAnimation.toValue = 0.0
pathLayer.removeAllAnimations()
pathLayer.addAnimation(revAnimation, forKey: "strokeEnd")
}
Keep in mind you'll also want to set your properties so you retain the end values of the animation.
You could also use the autoreverses property of CAMediaTiming protocol, which is complied by CABasicAnimation
I can't seem to control the duration of a simple Core Animation whether I use a CATransation or not.
The transaction completion code fires after my duration setting like I'd expect, but the rotation animation always takes about 0.5 seconds no matter what duration it's set to.
But if I comment out the last line that sets the transform, the animation moves at the proper speed, but then snaps back to the original rotation.
What am I missing?
class MyControl: NSControl {
var shapeLayer = CAShapeLayer()
required override init(frame frameRect: NSRect) {
super.init(frame: frameRect)
self.wantsLayer = true
self.layerContentsRedrawPolicy = NSViewLayerContentsRedrawPolicy.OnSetNeedsDisplay
// create a triangle shape
let path = NSBezierPath()
path.moveToPoint(CGPointMake(45.0, 25.0))
path.lineToPoint(CGPointMake(5.0, 5.0))
path.lineToPoint(CGPointMake(5.0, 45.0))
path.lineToPoint(CGPointMake(45.0, 25.0))
path.closePath()
shapeLayer.frame = self.bounds
shapeLayer.path = path.toCGPath()
shapeLayer.fillColor = NSColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0).CGColor
self.layer!.addSublayer(shapeLayer)
}
override func mouseUp(theEvent: NSEvent){
let duration = 2.0
let endAngle = -90.0
let startAngle = shapeLayer.valueForKey("transform.rotation")
CATransaction.begin()
CATransaction.setAnimationDuration(duration)
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut))
CATransaction.setCompletionBlock({
Swift.print("this fires after 2 seconds")
})
let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.removedOnCompletion = true
rotateAnimation.autoreverses = false
rotateAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
rotateAnimation.duration = duration
rotateAnimation.fromValue = startAngle
rotateAnimation.toValue = endAngle.degreesToRadians
shapeLayer.addAnimation(rotateAnimation, forKey: rotateAnimation.keyPath)
CATransaction.commit()
// mystery line...
shapeLayer.transform = CATransform3DMakeRotation(endAngle.degreesToRadians, 0.0, 0.0, 1.0)
}
}
On a side note, I made use of a couple of useful extensions... toCGPath in NSBezierPath and degreesToRadians for CGFloat.
The reason why you are seeing this strange behaviour is usage of explicit CATransaction begin--commit. This will in turn add a nested CATransaction within the one already owned by the run loop. So what happens is, your inner transaction gets committed, but before the associated animations finish, you have an immediate new value for the transform. This will cause this glitch where your layer will just quickly rotate and vanish.
Instead of this, the straight forward way to do is
1. Create your animation
2. Set a delegate for your animation
3. In delegate call back set the target value you would want the layer to remain in.
override func mouseUp(theEvent: NSEvent){
let duration = 2.0
let endAngle = -90.0
let startAngle = shapeLayer.valueForKey("transform.rotation")
//Set up animation
let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.removedOnCompletion = true
rotateAnimation.autoreverses = false
rotateAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
rotateAnimation.duration = duration
rotateAnimation.fromValue = startAngle
rotateAnimation.toValue = endAngle * 3.142/180
//Setup delegate
rotateAnimation.delegate = self
shapeLayer.addAnimation(rotateAnimation, forKey: #"rotationAnimation")
}
public override func animationDidStop(anim: CAAnimation, finished flag: Bool){
shapeLayer.transform = CATransform3DMakeRotation(CGFloat(-90.0 * 3.142/180), 0.0, 0.0, 1.0)
}
P.S: I have not run this code, and also note sure what value you want to set for the transform of your layer once the animation completes.
I think the problem is because your startAngle and endAngle. Try to change it like this. This works for me
private let startAngle: CGFloat = CGFloat(-M_PI_2)
private let endAngle: CGFloat = CGFloat(-M_PI_2) + CGFloat(M_PI * 2)