您的位置:首页 > 其它

各种效果动画操作展示(放大、缩小、旋转、翻转等)

2016-08-01 15:57 323 查看
各效果动画主要是对UIView,或UIView的layer进行操作。

动画效果有放大、缩小、旋转、翻转等操作;以及还有私有API的方法,如立方体旋转、相机开或关、抽纸、涟漪等。

1、各种动画效果 
其中除了'fade', `moveIn', `push' , `reveal' ,其他属于似有的API(我是这么认为的,可以点进去看下注释).可以分别使用'kCATransitionFade',
'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用.

 @"cube"                  立方体翻滚效果

 @"moveIn"                新视图移到旧视图上面

 @"reveal"                显露效果(将旧视图移开,显示下面的新视图)

 @"fade"                  交叉淡化过渡(不支持过渡方向)(默认为此效果)

 @"pageCurl"              向上翻一页

 @"pageUnCurl"            向下翻一页

 @"suckEffect"            收缩效果,类似系统最小化窗口时的神奇效果(不支持过渡方向)

 @"rippleEffect"          滴水效果,(不支持过渡方向)

 @"oglFlip"               上下左右翻转效果

 @"rotate"                旋转效果

 @"push"

 @"cameraIrisHollowOpen"  相机镜头打开效果(不支持过渡方向)

 @"cameraIrisHollowClose" 相机镜头关上效果(不支持过渡方向)

 kCATransitionFade        交叉淡化过渡

 kCATransitionMoveIn      新视图移到旧视图上面

 kCATransitionPush        新视图把旧视图推出去

 kCATransitionReveal      将旧视图移开,显示下面的新视图

 2、subType 各种动画方向

 kCATransitionFromRight; 同字面意思(下同)

 kCATransitionFromLeft;

 kCATransitionFromTop;

 kCATransitionFromBottom;

 当type为@"rotate"(旋转)的时候,它也有几个对应的subtype,分别为:

 90cw   逆时针旋转90°

 90ccw  顺时针旋转90°

 180cw  逆时针旋转180°

 180ccw 顺时针旋转180°

 3、timingFunction
用于变化起点和终点之间的插值计算,形象点说它决定了动画运行的节奏,比如是均匀变化(相同时间变化量相同)还是先快后慢,先慢后快还是先慢再快再慢.

 动画的开始与结束的快慢,有五个预置分别为(下同):

 kCAMediaTimingFunctionLinear       
线性,即匀速

 kCAMediaTimingFunctionEaseIn       
先慢后快

 kCAMediaTimingFunctionEaseOut      
先快后慢

 kCAMediaTimingFunctionEaseInEaseOut
先慢后快再慢

 kCAMediaTimingFunctionDefault      
实际效果是动画中间比较快

self.flyView = [[UIView alloc] initWithFrame:CGRectMake(0, 200, 120, 60)];
[self.flyView setBackgroundColor:[UIColor lightGrayColor]];
[self.view addSubview:self.flyView];
// 放大缩小动画
[UIView animateWithDuration:0.3 animations:^{
// 放大
self.flyView.transform = CGAffineTransformMakeScale(2.0, 2.0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3 animations:^{
// 缩小
self.flyView.transform = CGAffineTransformMakeScale(0.6, 0.6);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3 animations:^{
// 还原
self.flyView.transform = CGAffineTransformMakeScale(1.0, 1.0);
}];
}];
}];
// 旋转动画
[UIView animateWithDuration:0.3 animations:^{
self.flyView.transform = CGAffineTransformMakeRotation(0.3);
}];
// 翻转动画
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:<span style="font-family: Arial, Helvetica, sans-serif;">self.flyView</span><span style="font-family: Arial, Helvetica, sans-serif;"> cache:NO];</span>
[UIView commitAnimations];
// 翻页动画
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:<span style="font-family: Arial, Helvetica, sans-serif;">self.flyView</span> cache:NO];
[UIView commitAnimations];

// 推动动画(从上往下推)
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:kCATransitionPush];// 移动kCATransitionMoveIn
[animation setSubtype:kCATransitionFromBottom];
[self.flyView.layer addAnimation:animation forKey:nil];
// 缩放动画
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.0];
scaleAnimation.duration = 0.35f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[<span style="font-family: Arial, Helvetica, sans-serif;">self.flyView</span>.layer addAnimation:scaleAnimation forKey:nil];
// 旋转动画
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:(2 * M_PI) * 2];
rotationAnimation.duration = 0.35f;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[<span style="font-family: Arial, Helvetica, sans-serif;">self.flyView</span>.layer addAnimation:rotationAnimation forKey:nil];
// 旋转缩小再放大动画
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:(2 * M_PI) * 2];
rotationAnimation.duration = 0.35f;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.0];
scaleAnimation.duration = 0.35f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 0.35f;
animationGroup.autoreverses = YES;
animationGroup.repeatCount = 1;
animationGroup.animations =[NSArray arrayWithObjects:rotationAnimation, scaleAnimation, nil];
[self.flyView.layer addAnimation:animationGroup forKey:@"animationGroup"];


// 翻转动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"oglFlip"];
[animation setSubtype:@"fromTop"];
[self.flyView.layer addAnimation:animation forKey:nil];
// 立方体动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cube"];
[animation setSubtype:@"fromRight"];
[self.flyView.layer addAnimation:animation forKey:nil];
// 抽纸动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"suckEffect"];
[self.flyView.layer addAnimation:animation forKey:nil];
// 涟漪动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"rippleEffect"];
[self.flyView.layer addAnimation:animation forKey:nil];
// 相机动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cameraIrisHollowOpen"]; // 相机关cameraIrisHollowClose;相机开cameraIrisHollowOpen
[animation setSubtype:@"fromRight"];
[self.flyView.layer addAnimation:animation forKey:nil];
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐