How to animate UIView from top to bottom and vice versa? - ios

Question

I'm trying to animate UIImageView from top to bottom and vice versa.
I tried the code:
Previous value was(y == 0):
laserImageView.frame = CGRect(x: 0, y: 0.0, width: 300.0, height: 300.0)
and want to animate it to 500.0:
UIView.animate(withDuration: 3.0, delay: 0.2, options: [.curveEaseInOut], animations: {
laserImageView.frame = CGRect(x: 0, y: 500.0, width: 300.0, height: 300.0)
}) { (finished) in
if finished {
// Repeat animation from bottom to top
}
}
but when I run my app the UIImageView appears at the last point(y == 500) without any animation, like the initial position was 500.0 but not 0.0.
I do not understand why animation does not work. Any idea?

Answer 1

Try this code:
class ViewController: UIViewController {
let laserImageView = UIImageView(frame: CGRect(x: 0, y: 0.0, width: 300.0, height: 300.0))
override func viewDidLoad() {
super.viewDidLoad()
laserImageView.backgroundColor = UIColor.blue
self.view.addSubview(laserImageView)
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
bottom()
}
func bottom() {
UIView.animate(withDuration: 3.0, delay: 0.2, options: [.curveEaseInOut], animations: {
self.laserImageView.frame = CGRect(x: 0, y: 500.0, width: 300.0, height: 300.0)
}) { (finished) in
if finished {
// Repeat animation from bottom to top
self.Up()
}
}
}
func Up() {
UIView.animate(withDuration: 3.0, delay: 0.2, options: [.curveEaseInOut], animations: {
self.laserImageView.frame = CGRect(x: 0, y: self.laserImageView.bounds.origin.y, width: 300.0, height: 300.0)
}) { (finished) in
if finished {
// Repeat animation to bottom to top
self.bottom()
}
}
}
}

Answer 2

One way to do so is take a IBOutlet of top constraint of view which you want to animate and update the value of constraint using the below method:-
- (IBAction)animateButton:(UIButton *)sender {
[UIView transitionWithView:_topView duration:0.8 options:UIViewAnimationOptionRepeat animations:^{
_headerViewTopConstraint.constant = self.view.frame.size.height - 20;
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
}];
}

Answer 3

For those who wants to do it using code inspite of interface builder can use below answer:-
__weak FirstViewController *weakSelf = self;
[UIView transitionWithView:_topView duration:0.4 options:UIViewAnimationOptionCurveEaseIn animations:^{
//
_topView.frame = CGRectMake(0, 300, _topView.frame.size.width, _topView.frame.size.height);
[weakSelf.view layoutIfNeeded];
} completion:^(BOOL finished) {
//
}];
Please try to post complete question inspite of downvoting the answer :) Thanks