UIImageView animation in Swift with time delay - ios

I'm stuck with this issue where I want a UIImage to glow within two seconds and then to go back to it's normal state.
Given this issue here's what I have at the moment:
I have the image views referenced, from 0 to 9.
#IBOutlet weak var imageOne: UIImageView!
#IBOutlet weak var imageTwo: UIImageView!
etc.
Then I added them to SubViews in the viewDiDLoad() function:
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(imageOne)
self.view.addSubview(imageTwo)
etc.
}
Here is my implementation of the colorisation function:
func colorize(imageView: UIImageView, color: CGColorRef) {
imageView.layer.shadowColor = color
imageView.layer.shadowRadius = 7.0
imageView.layer.shadowOpacity = 0.9
imageView.layer.shadowOffset = CGSizeZero
imageView.layer.masksToBounds = false
}
Now, I'm trying to animate two image views which are called through this. a and b are just randoms acquired from the previous view. In this example, they will be 1 and 3.:
UIView.animateWithDuration(2.0, delay: 0, options: nil, animations: { () -> Void in
self.colorize(labelArray[a.toInt()!], color:self.green)
}, completion: nil)
UIView.animateWithDuration(2.0, delay: 2.0, options: nil, animations: { () -> Void in
self.colorize(labelArray[b.toInt()!], color:self.cyan)
}, completion: nil)
Now, this is what the view looks like beforehand -
And this is what it's like after, but both animations occur at the same time. There is no transition. It just automatically applies the glow -
Thanks for your help!

Since you're trying to animation your UIImageView layers, try using Core Animation instead of UIView animation blocks since Core Animation must be used to animate the shadow layer of a view. If you simply want to fade the shadow in, try this to animate the shadow opacity:
override func performGlowAnimations {
self.colorize(labelArray[a.toInt()!], color:self.green)
// Delay the second call by 2 seconds
let delay = 2.0 * Double(NSEC_PER_SEC)
var time = dispatch_time(DISPATCH_TIME_NOW, Int64(delay))
dispatch_after(time, dispatch_get_main_queue(), {
self.colorize(labelArray[b.toInt()!], color:self.cyan)
})
}
func colorize(imageView: UIImageView, color: CGColorRef) {
// Set the image's shadowColor, radius, offset, and
// set masks to bounds to false
imageView.layer.shadowColor = color
imageView.layer.shadowRadius = 7.0
imageView.layer.shadowOffset = CGSizeZero
imageView.layer.masksToBounds = false
// Animate the shadow opacity to "fade it in"
let shadowAnim = CABasicAnimation()
shadowAnim.keyPath = "shadowOpacity"
shadowAnim.fromValue = NSNumber(float: 0.0)
shadowAnim.toValue = NSNumber(float: 0.9)
shadowAnim.duration = 2.0
imageView.layer.addAnimation(shadowAnim, forKey: "shadowOpacity")
imageView.layer.shadowOpacity = 0.9
}

Related

Swift image appear animation from bottom of its frame to top (wipe animation)

I just want to get some ideas on how to approach the situation I have in hand.
I have created some images which I want to animate, but the animation I want is not default given, so its giving me some hard time.
The animation I want is like this: https://i.stack.imgur.com/byGMC.gif (not from bottom of the screen, from the bottom of images' own frame)
When a button is pressed I want the button/image start appear from bottom of its frame to the top, like the wipe animation in powerpoint :)
So naturaly it will default as hidden and when a button is pressed it will animate in.
I did try a few methods but non of them is actually doing the job I want.
Like this one:
extension UIView{
func animShow(){
UIView.animate(withDuration: 2, delay: 5, options: [.transitionFlipFromBottom],
animations: {
self.center.y -= self.bounds.height
self.layoutIfNeeded()
}, completion: nil)
self.isHidden = false
}
func animHide(){
UIView.animate(withDuration: 1, delay: 0, options: [.curveLinear],
animations: {
self.center.y += self.bounds.height
self.layoutIfNeeded()
}, completion: {(_ completed: Bool) -> Void in
self.isHidden = true
})
}
}
so it slides in the image but this is not what I want, you may try the code, just add this and write image.animShow() in viewDidLoad, button is the button which I want to animate.
I appreciate every bit of help, and I am a newbie in swift programming
Thank you.
There are various ways to do a "soft wipe" animation... here is one.
We can add a gradient layer mask and then animate the gradient.
When using a layer mask, clear (alpha 0) areas hide what's under the mask, and opaque (alpha 1) areas show what's under the mask. This includes parts of the mask that are translucent - alpha 0.5 for example - so the content becomes "translucent".
To get a "soft wipe" we want the gradient to use only a portion of the frame, so if we set the starting Y point to 0.5 (halfway down), for example, we can set the ending Y point to 0.6 ... this would give us a horizontal "gradient band".
So, a yellow-to-red gradient at 0.5 to 0.6 would look like this:
If we set the starting Y to 1.0 and the ending Y to 1.1, the gradient band will start "off the bottom of the view" ... and we can animate it up until it's "off the top of the view" (note that converted to gif loses some of the smooth gradient property):
Now, if we instead use clear-to-red and set it as a layer mask, using the same animation it will "soft wipe" the view, it will look something like this:
Can't get the animated gif small enough to post here, so here's a link to the animation: https://i.imgur.com/jo2DH3Z.mp4
Here's some sample code for you to play with. Lots of comments in there:
class AnimatedGradientImageView: UIImageView {
let maskLayer = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
// vertical gradient
// start at bottom
maskLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
// to bottom + 1/10th
maskLayer.endPoint = CGPoint(x: 0.5, y: 1.1)
// use "if true" to see the layer itself
// use "if false" to see the image reveal
if false {
// yellow to red
maskLayer.colors = [UIColor.yellow.cgColor, UIColor.red.cgColor]
// add it as a sublayer
layer.addSublayer(maskLayer)
} else {
// clear to red
maskLayer.colors = [UIColor.clear.cgColor, UIColor.red.cgColor]
// set the mask
layer.mask = maskLayer
}
}
override func layoutSubviews() {
super.layoutSubviews()
// set mask layer frame
maskLayer.frame = bounds
}
func reveal() -> Void {
let anim1: CABasicAnimation = CABasicAnimation(keyPath: "startPoint.y")
// anim1 animates the gradient start point Y
// to -0.1 (1/10th above the top of the view)
anim1.toValue = -0.1
anim1.duration = 1.0
anim1.isRemovedOnCompletion = false
anim1.fillMode = .forwards
let anim2: CABasicAnimation = CABasicAnimation(keyPath: "endPoint.y")
// anim2 animates the gradient end point Y
// to 0.0 (the top of the view)
anim2.toValue = 0.0
anim2.duration = 1.0
anim2.isRemovedOnCompletion = false
anim2.fillMode = .forwards
maskLayer.add(anim1, forKey: nil)
maskLayer.add(anim2, forKey: nil)
}
}
class AnimatedGradientViewController: UIViewController {
let testImageView = AnimatedGradientImageView(frame: .zero)
override func viewDidLoad() {
super.viewDidLoad()
// replace with your image name
guard let img = UIImage(named: "sampleImage") else {
fatalError("Could not load image!!!")
}
// set the image
testImageView.image = img
testImageView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(testImageView)
// respect safe area
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
// size: 240 x 240
testImageView.widthAnchor.constraint(equalToConstant: 240.0),
testImageView.heightAnchor.constraint(equalToConstant: 240.0),
// centered
testImageView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
testImageView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
])
// tap anywhere in the view
let t = UITapGestureRecognizer(target: self, action: #selector(gotTap(_:)))
view.addGestureRecognizer(t)
}
#objc func gotTap(_ g: UITapGestureRecognizer) -> Void {
testImageView.reveal()
}
}
First, you will have to give the height constraint of the image from the storyboard and set the height to 0
and take the image height constraint into your file like below
#IBOutlet weak var imageHeight: NSLayoutConstraint!
Here is the animation code.
UIView.animate(withDuration: 2, delay: 2, options: [.transitionFlipFromBottom],
animations: {
self.image.frame = CGRect(x: self.image.frame.origin.x, y: self.image.frame.origin.y - 100, width: self.image.frame.size.width, height: 100)
self.imageHeight.constant = 100
self.image.layoutIfNeeded()
}, completion: nil)
Click here to see animation

Synchronously animate CALayer property and UIView with UIViewPropertyAnimator

I'm using a UIViewPropertyAnimator to animate the position of a view. But, I also want to animate CALayer properties like borderColor along with it. Currently, it doesn't animate and instantly changes at the start, like this:
Here's my code:
class ViewController: UIViewController {
var animator: UIViewPropertyAnimator?
let squareView = UIView(frame: CGRect(x: 0, y: 40, width: 80, height: 80))
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(squareView)
squareView.backgroundColor = UIColor.blue
squareView.layer.borderColor = UIColor.green.cgColor
squareView.layer.borderWidth = 6
animator = UIViewPropertyAnimator(duration: 2, curve: .easeOut, animations: {
self.squareView.frame.origin.x = 100
self.squareView.layer.borderColor = UIColor.red.cgColor
})
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
self.animator?.startAnimation()
}
}
}
I looked at this question, How to synchronously animate a UIView and a CALayer, and the answer suggested using "an explicit animation, like a basic animation." It said,
If the timing function and the duration of both animations are the same then they should stay aligned.
However, if I use CABasicAnimation, I lose all the benefits of UIViewPropertyAnimator, like timing and stopping in the middle. I will also need to keep track of both. Is there any way to animate CALayer properties with UIViewPropertyAnimator?
CABasicAnimation has timing as well as keyframe animation to stop in the middle. But, to replicate your animation above:
squareView.layer.transform = CATransform3DMakeTranslation(100, 0, 0)
let fromValue = squareView.transform
let toValue = 100
let translateAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.transform))
translateAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
translateAnimation.fromValue = fromValue
translateAnimation.toValue = toValue
translateAnimation.valueFunction = CAValueFunction(name: .translateX)
let fromColor = squareView.layer.borderColor
let toColor = UIColor.red.cgColor
let borderColorAnimation = CABasicAnimation(keyPath: "borderColor")
borderColorAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
borderColorAnimation.fromValue = fromColor
borderColorAnimation.toValue = toColor
let groupAnimation = CAAnimationGroup()
groupAnimation.animations = [translateAnimation, borderColorAnimation]
groupAnimation.duration = 5
squareView.layer.add(groupAnimation, forKey: nil)

Change animation speed on slider

If you scroll to the bottom you'll see a slider for changing the animation speed. What I'd like to do is create an animation speed on the slider based around the replicatorLayer animation2() part. Is this possible?
var player:AVAudioPlayer = AVAudioPlayer()
var meditationState: MeditationState?
var replicatorLayer = CAReplicatorLayer()
var dot = CALayer()
func updateTimer(){
seconds += 1
timerclock.text = "\(seconds)"
}
// Animation starts running
func animation2() {
// A layer that creates a specified number of copies of its sublayers (the source layer), each copy potentially having geometric, temporal, and color transformations applied to it.
replicatorLayer = CAReplicatorLayer()
// The layer’s bounds rectangle. Animatable.
replicatorLayer.bounds = CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0)
// The radius to use when drawing rounded corners for the layer’s background. Animatable.
replicatorLayer.cornerRadius = 10.0
// The background color of the receiver. Animatable.
replicatorLayer.backgroundColor = UIColor(white: 0.0, alpha: 0.0).cgColor
// The layer’s position in its superlayer’s coordinate space. Animatable.
replicatorLayer.position = view.center
// calling this method creates an array for that property and adds the specified layer to it.
view.layer.addSublayer(replicatorLayer)
// connectng the animation to the content
// An object that manages image-based content and allows you to perform animations on that content
dot = CALayer()
// The layer’s bounds rectangle. Animatable.
dot.bounds = CGRect(x: 0.0, y: 0.0, width: 12.0, height: 12.0)
//The layer’s position in its superlayer’s coordinate space. Animatable.
dot.position = CGPoint(x: 150.0, y: 40.0)
//The background color of the receiver. Animatable.
dot.backgroundColor = UIColor(white: 0.2, alpha: 1.0).cgColor
// The color of the layer’s border. Animatable.
dot.borderColor = UIColor(white: 1.0, alpha: 1.0).cgColor
// The width of the layer’s border. Animatable.
dot.borderWidth = 1.0
//The radius to use when drawing rounded corners for the layer’s background. Animatable.
dot.cornerRadius = 5.0
//Appends the layer to the layer’s list of sublayers.
replicatorLayer.addSublayer(dot)
// number of copies of layer is instanceCount
let nrDots: Int = 1000
//The number of copies to create, including the source layers.
replicatorLayer.instanceCount = nrDots
// The basic type for floating-point scalar values in Core Graphics and related frameworks.
let angle = CGFloat(2*M_PI) / CGFloat(nrDots)
// The transform matrix applied to the previous instance to produce the current instance. Animatable.
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0.0, 0.0, 1.0)
// Type used to represent elapsed time in seconds.
let duration: CFTimeInterval = 10.0
// animation capabilities for a layer property.
// An object that provides basic, single-keyframe animation capabilities for a layer property.
let shrink = CABasicAnimation(keyPath: "transform.scale")
// Defines the value the receiver uses to start interpolation.
shrink.fromValue = 1.0
// Defines the value the receiver uses to end interpolation.
shrink.toValue = 0.1
// Specifies the basic duration of the animation, in seconds.
shrink.duration = duration
// Determines the number of times the animation will repeat.
shrink.repeatCount = Float.infinity
// Add the specified animation object to the layer’s render tree.
dot.add(shrink, forKey: "shrink")
// Specifies the delay, in seconds, between replicated copies. Animatable.
replicatorLayer.instanceDelay = duration/Double(nrDots)
// The transform applied to the layer’s contents. Animatable.
dot.transform = CATransform3DMakeScale(0.01, 0.01, 0.01)
}
// connecting the breathe in label
#IBOutlet weak var label: UILabel!
// instant delay
#IBOutlet weak var instantDelay: UIButton!
#IBAction func delayBtn(_ sender: Any) {
dot.removeAnimation(forKey: "shrink")
timer1.invalidate()
seconds = 0
timer2.invalidate()
timerclock.text = "\(seconds)"
time = 0
timerLabel.text = "Breathe in"
timerisOn = false
pauseBtn.isHidden = true
playBtn.isHidden = false
label.isHidden = true
replicatorLayer.isHidden = true
instantDelay.isHidden = true
instantDelay1.isHidden = false
slider.isHidden = false
}
// Delay 1
#IBOutlet weak var instantDelay1: UIButton!
#IBAction func delayBtn1(_ sender: Any) {
instantDelay1.isHidden = true
instantDelay.isHidden = false
label.isHidden = false
slider.isHidden = true
}
//Slider for changing animation speed
#IBOutlet weak var slider: UISlider!
#IBAction func slider(_ sender: Any) {
}
CALayer conforms to the CAMediaTiming protocol, which means it has a speed property. When you change the speed property of a layer it alters the "frame of reference" of all child layers. (Speed == 1.0 is normal speed, speed 2.0 is double-speed, and speed 0.5 is half-speed.)
You can change the speed property of the parent layer that contains your replicator layer and it should alter the speed of your animation. Try making a valueChanged IBAction attached to your slider that changes the speed property of your animation's super layer to values ranging from 0.5 to 2.0.
CAAnimation objects also conform to the CAMediaTiming protocol, so you can change the speed on individual animations as well.
EDIT:
It's not complicated. You could make your slider IBAction method something like this:
#IBAction func slider(_ sender: UISlider) {
view.layer.speed = sender.value
}

iOS: Why the animation runs well with CABasicAnimation but looks weird with animateWithDuration?

Here's a simple demo for rotating an image view with animation.
class ViewController: UIViewController {
#IBOutlet weak var imageView: UIImageView!
#IBAction func left() {
animateWithTransform(CATransform3DMakeRotation(CGFloat(M_PI_4), 0, 0, 1))
}
#IBAction func right() {
animateWithTransform(CATransform3DMakeRotation(CGFloat(-M_PI_4), 0, 0, 1))
}
func animateWithTransform(transform: CATransform3D) {
UIView.animateWithDuration(1) {
self.imageView.layer.transform = transform
}
}
}
The animation runs smoothly.
Update right() to:
#IBAction func right() {
animateWithTransform(CATransform3DMakeRotation(CGFloat(-M_PI_4), 0, 1, 0))
}
Tap left then right, the animation is not smooth any more. The image view jumps to an angle before starting animation. Why's that?
Update animateWithTransform() to use CABasicAnimation instead:
func animateWithTransform(transform: CATransform3D) {
let animation = CABasicAnimation(keyPath: "transform")
animation.duration = 1
animation.fromValue = NSValue(CATransform3D: imageView.layer.transform)
animation.toValue = NSValue(CATransform3D: transform)
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
imageView.layer.addAnimation(animation, forKey: nil)
imageView.layer.transform = transform
}
The animation is fine again.
So the question is why I can't use animateWithDuration here. Is this a bug?
Thanks.
---- update ---------------------------------
BTW, the image view is centered by constraints. This could probably be a constraint issue, I'm not sure.
I had the same problem, the reason is that you are animating a CATransform, that is done on the layer not on the view, that is why UIView.animateWithDuration does not respond to it

Trying to restart UIBezierPath on button click

I'm trying to restart a UIBezierPath with the click of a button.
I tried to play around with the opacity.
Basically, I have 3 arrows that get drawn in an animation, and then if the user clicks on the animate button, I want them to re-animate.
This is what I have for drawing the arrows:
func animateArrow(firstPoint: CGPoint, endPoint:CGPoint) {
let arrow = UIBezierPath.bezierPathWithArrowFromPoint(firstPoint, endPoint: endPoint, tailWidth: 7.5, headWidth: 15, headLength: 15)
let arrowPath = CAShapeLayer()
arrowPath.path = arrow.CGPath
arrowPath.fillColor = UIColor.whiteColor().CGColor
arrowPath.strokeColor = UIColor.blackColor().CGColor
let opacityAnim = CABasicAnimation()
opacityAnim.keyPath = "opacity"
opacityAnim.fromValue = NSNumber(float: 0.0)
opacityAnim.toValue = NSNumber(float: 0.7)
opacityAnim.duration = 1.0
arrowPath.addAnimation(opacityAnim, forKey: "opacity")
arrowPath.opacity = 0.7
self.view.layer.addSublayer(arrowPath)
}
This is the animation part:
dispatch_after(time, dispatch_get_main_queue(), {
self.colorize(labelArray[b.toInt()!], color:self.cyan)
self.animateArrow(pointArray[a.toInt()!], endPoint: pointArray[b.toInt()!])
})
dispatch_after(time2, dispatch_get_main_queue(), {
self.colorize(labelArray[c.toInt()!], color:self.cyan)
self.animateArrow(pointArray[b.toInt()!], endPoint: pointArray[c.toInt()!])
})
dispatch_after(time3, dispatch_get_main_queue(), {
self.colorize(labelArray[d.toInt()!], color:self.red)
self.animateArrow(pointArray[c.toInt()!], endPoint: pointArray[d.toInt()!])
self.animateButton.enabled = true
})
You can clear all the sublayers you have added by removing the sublayer from view inside button click event.
Please make sure that you draw the paths in a separate overlay view and not the underlying view that contains the button and other UI. If you use the code below in the main view, the UIView layers will also get removed.
func clicked (button:UIButton) {
for layer in viewToClear.layer.sublayers as [CALayer]
{
layer.removeFromSuperlayer()
}
}

Resources