For an app I'm currently working on, I would like to create an animation on a set of views, vertically aligned. When user taps on a button inside the view, the app should start an animation that translates and rotates te view offscreen, while fading it at the same time. At the same time, all the views below it, should react by translating up occupying the space left by the removed view.
This is the initial scenario:
To perform this effect, we need two different animations, one on the view to delete, and the other on the views below it.
This is the first one:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- (IBAction)deleteTapped:(id)sender { | |
[_delegate contentViewWillDelete:self]; | |
[UIView animateWithDuration:0.5 animations:^{ | |
self.alpha = 0.0f; | |
CGAffineTransform rotate = CGAffineTransformRotate(self.transform, 1); | |
CGAffineTransform translate = CGAffineTransformTranslate(self.transform, 300, -100); | |
self.transform = CGAffineTransformConcat(rotate, translate); | |
} completion:^(BOOL finished){ | |
[self removeFromSuperview]; | |
}]; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-(NSArray *)findAfterViewsAfter:(ContentView *)contentView{ | |
int viewIndex = contentView.tag; | |
NSMutableArray *afterViews = [NSMutableArray array]; | |
BOOL isBefore = YES; | |
for(int i=0; i < _views.count; i++){ | |
ContentView *currentView = [_views objectAtIndex:i]; | |
if(currentView.tag == viewIndex){ | |
isBefore = NO; | |
continue; | |
} | |
if(!isBefore) | |
[afterViews addObject:currentView]; | |
} | |
return afterViews; | |
} |
and then we can apply the translation to all of them:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-(void)translateUp:(NSArray *)views{ | |
[UIView animateWithDuration:0.5 animations:^{ | |
for(ContentView *contentView in views){ | |
contentView.transform = CGAffineTransformTranslate(contentView.transform, 0, -contentView.frame.size.height -_initialOffset); | |
} | |
}]; | |
} |
The complete sample project can be found here:
https://github.com/nalitzis/View-delete-animations
Great ! Very nice blog and excellent things exist in your blog content. thanks for sharing..
ReplyDeleteweb design and development company | custom website design services
Interesting tips and also easy to follow. Very nice blog. Thanks for Sharing.
ReplyDeleteapp development company || mobile apps development companies melbourne
I think I've found a nice informative blog after searching a long time. Thanks for your great articles and information, Its very Helpful for everyone.The contents are quiet interesting. I will be waiting for your next post.
ReplyDeleteandroid app development perth | android app development sydney
nice post,thanks for sharing this information
ReplyDeleteaws training in bangalore
aws training in btm layout
Amazon web services training in bangalore
amazon web services training in btm layout
best AWS Training institute in Bangalore
aws training institutes in bangalore
AWS certification course in BTM Layout
aws certification course in bangalore
I really enjoyed your blog Thanks for sharing such an informative post. Top 10 Makeup Artists in Kolkata
ReplyDelete