http://blog.youkuaiyun.com/xiaofansong/article/details/8282636
引言:最近学习了一些页面的跳转动画效果。使用的是UIview的animateWithDuration方法。当然之前的beginAnimations也是可以实现的。
比如一:从屏幕下部往上渐渐弹出一个图片
- -(void) fadeIn
- {
- CGRect rect = [[UIScreen mainScreen] bounds];
- self.view.center = CGPointMake(rect.size.width/2, 720);
- [UIView animateWithDuration:0.5f animations:^{
- self.view.center = CGPointMake(rect.size.width/2, 240+10);
- } completion:^(BOOL finished) {
- // [imageView setImageURL:[NSURL URLWithString:imgUrl]];
- }];
- }
-(void) fadeIn
{
CGRect rect = [[UIScreen mainScreen] bounds];
self.view.center = CGPointMake(rect.size.width/2, 720);
[UIView animateWithDuration:0.5f animations:^{
self.view.center = CGPointMake(rect.size.width/2, 240+10);
} completion:^(BOOL finished) {
// [imageView setImageURL:[NSURL URLWithString:imgUrl]];
}];
}
比如二:再渐渐退回去
- -(void) fadeOut
- {
- CGRect rect = [[UIScreen mainScreen] bounds];
- [UIView animateWithDuration:0.5f animations:^{
- self.view.center = CGPointMake(rect.size.width/2, 720);
- } completion:^(BOOL finished) {
- [imageView cancelImageLoad];
- [imageView release];
- //[imgUrl release];
- // imageView = nil;
- //imgUrl = nil;
- // [self.view removeFromSuperview];
- }];
- }
-(void) fadeOut
{
CGRect rect = [[UIScreen mainScreen] bounds];
[UIView animateWithDuration:0.5f animations:^{
self.view.center = CGPointMake(rect.size.width/2, 720);
} completion:^(BOOL finished) {
[imageView cancelImageLoad];
[imageView release];
//[imgUrl release];
// imageView = nil;
//imgUrl = nil;
// [self.view removeFromSuperview];
}];
}
如果使用beginAnimations就是下面这样的。。。。
- CGRect rect = [[UIScreen mainScreen] bounds];
- self.myimg.center = CGPointMake(rect.size.width/2, 720);
- [UIView beginAnimations:nil context:NULL];
- [UIView setAnimationDuration:1.0];
- self.myimg.center = CGPointMake(rect.size.width/2, 720);
- [UIView commitAnimations];
CGRect rect = [[UIScreen mainScreen] bounds];
self.myimg.center = CGPointMake(rect.size.width/2, 720);
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
self.myimg.center = CGPointMake(rect.size.width/2, 720);
[UIView commitAnimations];
备注:其实掌握了 self.view.center = CGPointMake(rect.size.width/2, 240+10);
设置其中心点坐标即可。
下面是可以设置动画效果的属性:
- frame
- bounds
- center
- transform
- alpha
- backgroundColor
- contentStretch
例如一个视图淡出屏幕,另外一个视图出现的代码:- <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">[</span>UIView animateWithDuration<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">:</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">1.0</span> animations<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">:^</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">{</span>
- firstView.alpha <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">=</span> <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">0.0</span>;
- secondView.alpha <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">=</span> <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">1.0</span>;
- <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">}</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">]</span>;
<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">[</span>UIView animateWithDuration<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">:</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">1.0</span> animations<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">:^</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">{</span> firstView.alpha <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">=</span> <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">0.0</span>; secondView.alpha <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">=</span> <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">1.0</span>; <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">}</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">]</span>;
- completion为动画执行完毕以后执行的代码块
- options为动画执行的选项。可以参考这里
- delay为动画开始执行前等待的时间