各效果动画主要是对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:self.flyView cache:NO];
[UIView commitAnimations];
// 翻页动画
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.flyView 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];
[self.flyView.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];
[self.flyView.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];