How to make a video pause when a calayer appears - swift

I am trying to make a calayer pause the video when it appears. I do not know how to go about doing this whether I add it as another calayer or animation. Here is my code when I add the calayer before exporting it. So when the animation happens I would like to have the video pause when it appears and then resume once the animation stops.
let titleLayer = CATextLayer()
titleLayer.backgroundColor = NSColor.clearColor().CGColor
titleLayer.string = "Dummy text"
titleLayer.font = NSFont(name: "Helvetica", size: 28)
titleLayer.shadowOpacity = 0.5
titleLayer.alignmentMode = kCAAlignmentCenter
titleLayer.frame = CGRectMake(0, 50, size.width, size.height / 6)
let animation: CABasicAnimation = CABasicAnimation(keyPath: "opacity")
animation.duration = 0
animation.fromValue = Int(1.0)
animation.toValue = Int(0.0)
animation.beginTime = 5
animation.removedOnCompletion = false
animation.fillMode = kCAFillModeForwards
titleLayer.addAnimation(animation, forKey: "animateOpacity")

You can pause the video before you add your animation to the layer and then resume it when the animation finishes. To know when the animation finishes, you can have an object be a delegate of animation and then resume playback in the animationDidStop:finished: delegate method.
func showTitle() {
// configure animation { .. }
animation.delegate = self
// pause video
titleLayer.addAnimation(animation, forKey: "animateOpacity")
}
func animationDidStop(anim: CAAnimation, finished flag: Bool) {
// play video
}

Related

Animation stops when UIView reappears on scrolling UITableView

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)
}

Animate roundedrect with CoreAnimation

Guys I have the following code to produce a bezierpath
firstLine.path = UIBezierPath(roundedRect: CGRect(x: frameSize.width / 2.2, y: frameSize.height / 2.6, width: 4, height: 4), cornerRadius: 10).cgPath
I try to animate the firstLine by moving it to the right of the screen by x value and back to the original position. But I don't know what to use for the keyPath in the animation.
let animation = CABasicAnimation(keyPath: "??")
animation.toValue = // this should be the position to move?
animation.duration = 0.5 // duration of the animation
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) // animation curve is Ease Out
animation.fillMode = kCAFillModeBoth // keep to value after finishing
animation.isRemovedOnCompletion = false // don't remove after finishing
animation.autoreverses = true
animation.repeatCount = HUGE
Can someone help me out on this :)
From: https://developer.apple.com/reference/quartzcore/cabasicanimation
You create an instance of CABasicAnimation using the inherited init(keyPath:) method, specifying the key path of the property to be animated in the render tree.
Example of what you want:
let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = [startX, startY]
animation.toValue = [destinationX, destinationY]

CABasicAnimation reverse(backwards)

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

CAKeyframeAnimation delay before repeating

I have a CAKeyframeAnimation animation that I would like to repeat forever using repeatCount = HUGE_VALF. The animation's duration is 2 seconds, but I would like to have a 3 seconds pause before each cycle.
The only 2 ways I can think of doing that are:
Make the whole animation last 5 seconds and add extra keyTimes and values so that I get the pause I'm looking for during the last 3s of the 5s animation. This feels kinda hacky.
Have the animation only repeat once and then add use something like performSelector:afterDelay:2 to run the animation again, and so on and so on. This feels dirty as well. Also would mean that I need to call addAnimation: every 5 seconds, which I'm not sure is optimal in terms of performance.
Is there another option I might be missing? Is one of those 2 methods better than the other?
By dumping the animations of Apple's MKUserLocationView, I was able to see how they were doing it. Turns out that this is what CAAnimationGroup is for. By encapsulating a 2 seconds animation into a 5 seconds animation group, you'll end up with a 2 seconds animation followed by a 3 seconds delay:
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 5;
animationGroup.repeatCount = INFINITY;
CAMediaTimingFunction *easeOut = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
CABasicAnimation *pulseAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale.xy"];
pulseAnimation.fromValue = #0.0;
pulseAnimation.toValue = #1.0;
pulseAnimation.duration = 2;
pulseAnimation.timingFunction = easeOut;
animationGroup.animations = #[pulseAnimation];
[ringImageView.layer addAnimation:animationGroup forKey:#"pulse"];
samvermette's answer in Swift 3:
let animationGroup = CAAnimationGroup()
animationGroup.duration = 5;
animationGroup.repeatCount = .infinity
let easeOut = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
let pulseAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
pulseAnimation.fromValue = 0
pulseAnimation.toValue = 1.0
pulseAnimation.duration = 2
pulseAnimation.timingFunction = easeOut
animationGroup.animations = [pulseAnimation]
ringImageView.layer.add(animationGroup, forKey: "pulse")
Tested on Swift 4.2
Just implement the following extension and then you can get a nice pulse Animation on Any UI component
//MARK:- Pulse animation
extension UIView {
func applyPulse(_ apply: Bool = true) {
if apply {
let animation = CABasicAnimation(keyPath: "transform.scale")
animation.toValue = 1.5
animation.duration = 0.8
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)
animation.autoreverses = true
animation.repeatCount = Float.infinity
self.layer.add(animation, forKey: "pulsing")
} else {
self.layer.removeAnimation(forKey: "pulsing")
}
}
}
Usage:
To start
yourUiComponent.applyPulse()
To Stop
yourUiComponent.applyPulse(false)

Preserve Ripple effect over UIImageView

I want to preserve Ripple effect on my UIImageView. I know we can animate image for ripple effect , but preserve. In other words I want a rippled image.
I know we can animate image using
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:25.0];
[UIView setAnimationTransition:(UIViewAnimationTransition) 110 forView:imgRipple cache:NO];
[UIView commitAnimations];
But it animates , doesn't keep the ripple. I think we can get rippled image if we Pause or Stop animation before it ends. Is it possible? how can we Pause or Stop UIView Animation?
If there is any alternate to this trick ,kindly mention it.
Thanks.
I got my solution,
used this code
CFTimeInterval pausedTime = [imgRipple.layer convertTime:CACurrentMediaTime() fromLayer:nil];
imgRipple.layer.speed = 0.0;
imgRipple.layer.timeOffset = pausedTime;
and it paused
I'm not sure if it gives you what you want, but you can stop animations using those:
#import <QuartzCore/QuartzCore.h>
[CATransaction begin];
[myView.layer removeAllAnimations];
[CATransaction commit];
You can get the current state before stopping animation using presentationLayer:
CALayer* myPreLayer = [myView.layer presentationLayer];
CATransform3D currentTransform = [myPreLayer transform];
//if you need some specific info, you can use key-value pairs
float currentAngle = [[myPreLayer valueForKeyPath:#"transform.rotation.z"] floatValue];
swift 5
Imageview set ripple animation its working fine......
#IBOutlet weak var imageview: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
imageview.layer.cornerRadius = imageview.bounds.width / 2
self.animateImage()
}
func animateImage() {
addRippleEffect(to: viewAnimation)
}
func addRippleEffect(to referenceView: UIView) {
/*! Creates a circular path around the view*/
let path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: referenceView.bounds.size.width, height: referenceView.bounds.size.height))
/*! Position where the shape layer should be */
let shapePosition = CGPoint(x: referenceView.bounds.size.width / 2.0, y: referenceView.bounds.size.height / 2.0)
let rippleShape = CAShapeLayer()
rippleShape.bounds = CGRect(x: 0, y: 0, width: referenceView.bounds.size.width, height: referenceView.bounds.size.height)
rippleShape.path = path.cgPath
rippleShape.fillColor = UIColor.clear.cgColor
rippleShape.strokeColor = UIColor.black.cgColor
rippleShape.lineWidth = 5
rippleShape.position = shapePosition
rippleShape.opacity = 0
/*! Add the ripple layer as the sublayer of the reference view */
referenceView.layer.addSublayer(rippleShape)
/*! Create scale animation of the ripples */
let scaleAnim = CABasicAnimation(keyPath: "transform.scale")
scaleAnim.fromValue = NSValue(caTransform3D: CATransform3DIdentity)
scaleAnim.toValue = NSValue(caTransform3D: CATransform3DMakeScale(2, 2, 1))
/*! Create animation for opacity of the ripples */
let opacityAnim = CABasicAnimation(keyPath: "opacity")
opacityAnim.fromValue = 1
opacityAnim.toValue = 0
/*! Group the opacity and scale animations */
let animation = CAAnimationGroup()
animation.animations = [scaleAnim, opacityAnim]
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
animation.duration = CFTimeInterval(1.0)
animation.repeatCount = .infinity
animation.isRemovedOnCompletion = true
rippleShape.add(animation, forKey: "rippleEffect")
}