How can I create an animation like in the following link?
Link
I'm using the below for animate cell from left in tableview delegate method willdisplaycell. Issue is all the cells are animating at a time not one after other, can anyone advice me how can I achieve that?
let direction:CGFloat = -1.0
cell?.layer.opacity = 0.4
cell?.transform = CGAffineTransform(translationX: (cell?.bounds.size.width)! * direction, y: 0)
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.85, initialSpringVelocity: 0.8, options: [], animations: {
cell?.transform = CGAffineTransform.identity
cell?.contentView.layer.opacity = 1.0
}) { _ in
self.isForExpand = false
}
Related
I am trying to implement following animation for my application onboarding and it needs to be play forever and reverse back every time it finishes.
I designed following image to accomplish that animation.
The image size is 880x335. So I wrote following code to animate the image.
func startAnimation(with duration: TimeInterval, afterDelay time: TimeInterval, horizontalConstantFirstPosition: CGFloat, horizontalConstantSecondPosition: CGFloat) {
switch animationOrder {
case .first:
self.animatedImageViewAnimatableConstraint.constant = 110
UIView.animate(withDuration: duration, delay: time, usingSpringWithDamping: 0.7, initialSpringVelocity: 0, options: [.curveEaseOut], animations: {
self.view.layoutIfNeeded()
self.animationOrder = .second
})
case .second:
self.animatedImageViewAnimatableConstraint.constant = -110
UIView.animate(withDuration: duration, delay: time, usingSpringWithDamping: 0.7, initialSpringVelocity: 0, options: [.curveEaseOut], animations: {
self.view.layoutIfNeeded()
self.animationOrder = .third
})
case .third:
self.animatedImageViewAnimatableConstraint.constant = -330
UIView.animate(withDuration: duration, delay: time, usingSpringWithDamping: 0.7, initialSpringVelocity: 0, options: [.curveEaseOut], animations: {
self.view.layoutIfNeeded()
self.animationOrder = .fourth
})
case .fourth:
self.animatedImageViewAnimatableConstraint.constant = 110
UIView.animate(withDuration: duration, delay: time, usingSpringWithDamping: 0.7, initialSpringVelocity: 0, options: [.curveEaseOut], animations: {
self.view.layoutIfNeeded()
self.animationOrder = .second
})
}
}
Basically, animatedImageViewAnimatableConstraint is the center X constraint that is initialized with 330 which is the position of first image I designed. Every time my animation method is called I changed center x anchor to the positions of value 330, 110, -110, -330 and so on.
However, when I applied it is not animating as expected. It returns back from fourth portion of the image to first one, it is excepted to go from fourth position to second one as shown above.
What should I do for the correct one, or which part is looking like wrong? Thanks in advance.
#IBOutlet weak var imageView: UIImageView!
let images = [#imageLiteral(resourceName: "img1"), #imageLiteral(resourceName: "img2"), #imageLiteral(resourceName: "img3")]
imageView.animationImages = images
imageView.animationDuration = 3.0 //1 sec for each image
imageView.animationRepeatCount = 0 //Set 0 for infinite
imageView.startAnimating()
To stop just call
imageView.stopAnimating()
I want hide/display a section for some conditions in code :
if condition == true{
section.hidden = false
}else{
section.hidden = true
}
section.evaluateHidden()
It's worked,But I want run some custom animation when Section display...
I find a callback name sectionsHaveBeenAdded :
override func sectionsHaveBeenAdded(_ sections: [Section], at indexes: IndexSet) {
}
Is that right???
Or how to do that and Where to write custom animation code???
Thanks!!!
Hope this code will help you to animate while hide,unhide view
UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.8, options: .curveEaseInOut, animations: {
self.section.transform = CGAffineTransform.identity
}) { (completed:Bool) in
// Completion block
self.section.backgroundColor = UIColor(displayP3Red: 0.0, green: 0.0, blue: 0.0, alpha: 0.3)
self.section.isOpaque = true
}
I am learning swift, I was successfully able to do popup animation of an UIView as below code but now i want to do reverse of it. i.e the way the UIView was animated should go back on a button click, Like the view is shrinking and then disappears.
popupView.isHidden = false
popupInnerView.isHidden = false
popupInnerView.transform = CGAffineTransform(scaleX: 0, y: 0)
UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
self.popupView.alpha = 1.0;
self.popupInnerView.transform = .identity
}, completion: nil)
Check if this one works for you. I have bound the showing and hiding of popup to buttons but you can bind them to anything.
For this to work
Drag and drop a uiview(your popup) into dock of view controller (see picture)
Make outlet of your uiview(popup) in your view controller. I am calling it popupView
For showing popup with Animation use the code
#IBAction func btnShowPopupTapped(_ sender: UIButton) {
popupView.center = view.center
popupView.alpha = 1
popupView.transform = CGAffineTransform(scaleX: 0.8, y: 1.2)
self.view.addSubview(popupView)
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: [], animations: {
//use if you want to darken the background
//self.viewDim.alpha = 0.8
//go back to original form
self.popupView.transform = .identity
})
}
And for hiding the popup
#IBAction func btnHideMeTapped(_ sender: Any) {
UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: [], animations: {
//use if you wish to darken the background
//self.viewDim.alpha = 0
self.popupView.transform = CGAffineTransform(scaleX: 0.2, y: 0.2)
}) { (success) in
self.popupView.removeFromSuperview()
}
}
Note: If you want to darken the background as in gif.
Drag and drop a uiview into your view heirarchy (view dim). see the pic
pin to 0, 0 , 0 ,0 to the main view
set its background color to black
set is alpha to 0
uncomment the line (self.viewDim.alpha = 0.8) in "btnShowPopupTapped" Action
uncomment the line (self.viewDim.alpha = 0) in "btnHideMeTapped" Action
Let me know if this helps.
Try This
For Zoom in
UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
self.popupInnerView.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
}, completion: { _ in
self.popupInnerView.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
})
For Zoom Out
UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
self.popupInnerView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
}, completion: nil)
This code worked for Pop Out
UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
self.popupView.alpha = 0.0;
self.popupInnerView.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
}, completion: { _ in
self.popupView.isHidden = true
self.popupInnerView.isHidden = true
})
Currently I am loading a new .Xib of class CreateAnAccount: UIView form a button pressed on another view.
At the moment it immediately switches to the Xib which is great, but is there a way of animating this? below is the code in the button.
#IBAction func createAnAccount(sender: AnyObject) {
let createAnAccountView = NSBundle.mainBundle().loadNibNamed("CreateAnAccount", owner: self, options: nil)[0] as! CreateAnAccount
createAnAccountView.frame = CGRectMake(0, 0, UIScreen.mainScreen().applicationFrame.size.width, UIScreen.mainScreen().applicationFrame.size.height + 20)
createAnAccountView.loginHandler = loginHandler
self.addSubview(createAnAccountView)
println("Create An Account Pressed")
}
Swift 4. Just place your animation code into layoutSubviews func. Works perfect for me.
override func layoutSubviews() {
super.layoutSubviews()
animate()
}
func animate() {
self.transform = CGAffineTransform(scaleX: 0.3, y: 2)
UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: [.allowUserInteraction, .curveEaseOut], animations: {
self.transform = .identity
})
self.alpha = 1
}
Swift 5. #coldembrace answer
func animate() {
self.view.transform = CGAffineTransform(scaleX: 0.3, y: 2)
UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: [.allowUserInteraction, .curveEaseOut], animations: {
self.view.transform = .identity
})
self.view.alpha = 1
}
You can try like this
UIView.transitionWithView(self.view, duration: 0.5, options:UIViewAnimationOptions.CurveEaseInOut,animations: {self.view.addSubview(createAnAccountView)}, completion: nil)
Moreover you change the UIViewAnimationOptions to have a desired effect.
I have a UIButton that I have placed in the center of the screen using Interface Builder.
I want to animate the UIButton to move up and down and repeat the animation forever.
So far I have this in my didMoveToView:
UIView.animateWithDuration(3, animations: { () -> Void in
self.playBtn.transform = CGAffineTransformMakeTranslation(0, 10)
self.playBtn.transform = CGAffineTransformMakeTranslation(0, -10)
self.playBtn.transform = CGAffineTransformMakeTranslation(0, -10)
self.playBtn.transform = CGAffineTransformMakeTranslation(0, 10)
UIView.setAnimationRepeatCount(-1)
})
However it only runs the first line and moves the button down 10.
You can't change the transform to multiple things simultaneously. I would expect your code to cause no animation at all, as changing the transform more than once would cancel the animation.
Another problem with your code is that what you're saying is not how you ask for a repeating animation.
Still another problem is that you won't ever bring the button back to its starting place; the transforms are not additive.
What you need to do is chain animations together. This will be easiest if you drop down to Core Animation and make a grouped animation.
Or can do it with view animation by doing a keyframe animation, perhaps; this is not identical to what you want, but it will get you started:
Swift 2
let opts = UIViewKeyframeAnimationOptions.Repeat
UIView.animateKeyframesWithDuration(3, delay: 0, options: opts, animations: {
UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.5, animations: {
self.playBtn.transform = CGAffineTransformMakeTranslation(0, 10)
})
UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.5, animations: {
self.playBtn.transform = CGAffineTransformIdentity
})
}, completion: nil)
Swift 3,4,5
let opts = UIView.KeyframeAnimationOptions.repeat
UIView.animateKeyframes(withDuration: 3, delay: 0, options: opts, animations: {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5, animations: {
self.playBtn.transform = CGAffineTransform(translationX: 0, y: 10)
})
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
self.playBtn.transform = CGAffineTransform.identity
})
}, completion: nil)
But really, it would be better if you learned how animation actually works before you get into this kind of thing. From your code, it appears to me you are just thrashing.