CODEWITHSUNDEEP
iosswiftcore-animation
rigdonmr
rigdonmr

Reputation: 2702

iOS: Animate color change from left to right

I want to animate the background color of a UITableViewCell from left to right (kinda like a progress bar) and I'm stumped. Is this possible?

Edit

Went with the suggestion to add a background view that periodically expands its width, but that is not working. here is the code I have right now:

// in viewDidLoad
self.tableView.reloadData()
self.beginWorkout()
...
// beginWorkout
private func beginWorkout() {
    let indexPath = NSIndexPath(forRow: 1, inSection: 0)
    let cell = self.tableView.cellForRowAtIndexPath(indexPath) as! MovementCell
    cell.animateProgressView()
}
...
// MovementCell animateProgressView
func animateProgressView() {
    UIView.animateWithDuration(15, animations: {
        self.progressViewWidth.constant = self.screenWidth
    })
}

but the animation doesn't execute over time. the progressViewWidth constant becomes the screen width immediately.

Upvotes: 0

Views: 2576

Answers (3)

MudOnTire
MudOnTire

Reputation: 506

- (IBAction)startProgress:(id)sender {
[self layoutIfNeeded];
self.progressViewWidth.constant = 300;
[UIView animateWithDuration:2 animations:^{
    [self layoutIfNeeded];
}];
}

and this is the expected output ,When I click go:

enter image description here

Upvotes: 1

Ketan Parmar
Ketan Parmar

Reputation: 27438

you can do like,

UIView * testView = [[UIView alloc] initWithFrame:CGRectMake(320.0f, 100.0f, 320.0f, 200.0f)];


[testView setBackgroundColor:[UIColor blueColor]];

[self.view addSubview:testView];  //In your case cell's content view

[UIView animateWithDuration:0.7f
                      delay:0.0f
                    options:UIViewAnimationOptionTransitionNone
                 animations:^{
                     [testView setFrame:CGRectMake(0.0f, 100.0f, 320.0f, 200.0f)];
                 }
                 completion:nil];

You can change different animation options. For example if you want auto reverse and repeat you can use UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse as option.

Hope this will help :)

Upvotes: 1

SauloT
SauloT

Reputation: 153

If you want it to behave just like a progress bar, put a UIView (blue background for example) in your cell with the lowest z-order.

Now animate its width relative to the cell width.

Upvotes: 0

Related Questions