一.Transform 动画
Transform 动画分以下两种：
- view.transform：是 View二维的平移、旋转、缩放等，通常使用前缀 CGAffineTransform 的类。
- view.layer.transform：是在 3D 模式下面的变化，通常使用前缀为 CATransform3D 的类。
Transform 是一个变换，通过transform属性可以修改UIView对象的平移、旋转角度和缩放比例，一般要配合UIView动画一起使用，实现动画的效果
// Transform动画，需要配合UIView动画使用
[UIView animateWithDuration:1 animations:^{
// 平移
// 相对于上一次做形变， 使用Make,它是相对于最原始的位置做的形变.
// _transformView.transform = CGAffineTransformTranslate(_transformView.transform, 0, -100);
// _transformView.transform = CGAffineTransformMakeTranslation(0, -100);
// 旋转 2 * M_PI 一圈
// _transformView.transform = CGAffineTransformMakeRotation(M_PI);
// 缩放
_transformView.transform = CGAffineTransformMakeScale(0.5, 0.5);
// 自定义矩阵变换，需要掌握矩阵变换的知识才知道怎么用（下面所示是一个M_PI_4度的旋转）
// _transformView.transform = CGAffineTransformMake(cos(M_PI_4), sin(M_PI_4) , -sin(M_PI_4), cos(M_PI_4), 0, 0);
// 组合动画，带有旋转的组合后效果可能跟想象不一样
// _transformView.transform = CGAffineTransformConcat(CGAffineTransformConcat(CGAffineTransformMakeTranslation(0, -100),CGAffineTransformMakeRotation(M_PI)), CGAffineTransformMakeScale(0.5, 0.5));
// 3D 模式下面的变化
// _transformView.layer.transform = CATransform3DMakeScale(2, 2, 2);
} completion:^(BOOL finished) {
// 回到原来位置
_transformView.transform = CGAffineTransformIdentity;
}];
二：iOS核心动画
基本动画 CABasicAnimation
// 一些常用的animationWithKeyPath值
/*
position 中心点改变 position.x 沿X轴平移 position.y 沿Y轴平移 [NSValue valueWithCGPoint:CGPointMake(100, 100)];
transform.scale 整体缩放 transform.scale.x 宽缩放 transform.scale 高缩放 @(0.5);
transform.rotation.x 沿X轴旋转 transform.rotation.z 沿Y轴旋转 transform.rotation.z 沿Z轴旋转 @(M_PI_2);
cornerRadius 圆角 @(20);
backgroundColor 背景颜色变化 (id)[UIColor blueColor].CGColor;
bounds 大小改变，中心点不变 [NSValue valueWithCGRect:CGRectMake(0, 0, 100, 200)];
contents 内容改变 比喻图片 (id)[UIImage imageNamed:@"12121212"].CGImage;
opacity 透明度 @(0.5);
*/
CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
//动画时间
moveAnimation.duration = 1.8;
//动画起始值
// moveAnimation.fromValue = @(1.0);
//动画终止值
moveAnimation.toValue = @(0.5);
// 控制动画的显示节奏, 系统提供五种值选择，分别是：
/*
1.kCAMediaTimingFunctionDefault( 默认，中间快)
2.kCAMediaTimingFunctionLinear (线性动画)
3.kCAMediaTimingFunctionEaseIn (先慢后快 慢进快出）
4.kCAMediaTimingFunctionEaseOut (先块后慢快进慢出）
5.kCAMediaTimingFunctionEaseInEaseOut (先慢后快再慢)
*/
moveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
// 动画的重复次数 （MAXFLOAT 表示无限循环）
moveAnimation.repeatCount = MAXFLOAT;
// 动画的总时长
// moveAnimation.repeatDuration = 3;
// 如果想动画完成后不回到原来的位置，可以设置removedOnCompletion为NO，autoreverses为YES
// 完成后是否删除动画（默认YES，如果不设置成NO，切出这个界面在回来，动画不会继续）
moveAnimation.removedOnCompletion = NO;
// 执行的动画按照原动画返回执行
// moveAnimation.autoreverses = YES;
// 动画的运行场景
moveAnimation.fillMode = kCAFillModeForwards;
//添加动画，后面有可以拿到这个动画的标识
[_transformView.layer addAnimation:moveAnimation forKey:nil];
关键帧动画 CAKeyframeAnimation
- 和CABasicAnimation基本动画一样，也是CAPropertyAnimation的子类
- 与CABasicAnimation区别：
- CABasicAnimation：只能从一个数值（fromValue）变到另一个数值（toValue）
- CAKeyframeAnimation：会使用一个数组(values) 保存一组关键帧, 也可以给定一个路径(path)制作动画。
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
// 关键帧
// NSArray *rotationVelues = @[@(M_PI_2), @(-M_PI_2), @(M_PI_2)];
// animation.values = rotationVelues;
//创建曲线路径
UIBezierPath *bezierPath = [[UIBezierPath alloc] init];
[bezierPath moveToPoint:CGPointMake(100, 450)];
[bezierPath addCurveToPoint:CGPointMake(200, 500) controlPoint1:CGPointMake(350, 200) controlPoint2:CGPointMake(300, 600)];
// 中心点沿着这条曲线做动画
animation.path = bezierPath.CGPath;
// 对应时间（开始到第一个时间点之间是没有动画的）
animation.keyTimes = @[@0 ,@0.8 ,@1];
// 旋转的方向
// animation.rotationMode = kCAAnimationRotateAutoReverse;
// 剩下的属性和CABasicAnimation基本一样
animation.duration = 3.0f;
animation.repeatCount = 1;
[_transformView.layer addAnimation:animation forKey:nil];
动画组 CAAnimationGroup
- 是CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行
// 创建一个缩放的基本动画
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation1.fromValue = @(1);
animation1.toValue = @(0.5);
// 创建一个旋转的基本动画
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
animation2.toValue = @(M_PI_2);
// 2秒后在开始动画
animation2.beginTime = 2;
// 如果不在这个地方设置时间，直接用animationGroup的时间，动画会完成（animationGroup.duration - animation2.beginTime）/animationGroup.duration
animation2.duration = 2;
// 动画组
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
// 将基本动画添加进去
animationGroup.animations = @[animation1,animation2];
// 剩下的属性和CABasicAnimation基本一样
animationGroup.duration = 4;
animationGroup.autoreverses = YES;
[_transformImageView.layer addAnimation:animationGroup forKey:nil];
转场动画 CATransition
CATransition *caTransition = [CATransition animation];
caTransition.duration = 1.0;
// 动画切换风格
/*
系统自带：
kCATransitionFade 渐入渐出
kCATransitionMoveIn 覆盖
kCATransitionPush 推挤
kCATransitionReveal 揭开
自定义效果：
cube, 立方体
suckEffect, 吮吸
oglFlip, 翻转
rippleEffect, 波纹
pageCurl, 翻页
pageUnCurl, 反翻页
cameraIrisHollowOpen, 开镜头
cameraIrisHollowClose, 关镜头
*/
caTransition.type = kCATransitionFade;
// 动画切换方向
/*
kCATransitionFromRight 右侧
kCATransitionFromLeft 左侧
kCATransitionFromTop 顶部
kCATransitionFromBottom 底部
*/
caTransition.subtype = kCATransitionFromLeft;
[_transformImageView.layer addAnimation:caTransition forKey:nil];
模态跳转动画
- 自带动画
LoginSliderViewController *lvc = [[LoginSliderViewController alloc] init];
lvc.modalPresentationStyle = 0;
/*
系统支持的四种动画：
UIModalTransitionStyleCoverVertical=0, //默认方式，竖向上推
UIModalTransitionStyleFlipHorizontal, //水平反转
UIModalTransitionStyleCrossDissolve,//隐出隐现
UIModalTransitionStylePartialCurl,//部分翻页效果
*/
[lvc setModalTransitionStyle:UIModalTransitionStylePartialCurl];
[self presentViewController:lvc animated:YES completion:nil];
- 配合CATransition使用
LoginSliderViewController *lvc = [[LoginSliderViewController alloc] init];
// 转场动画——CATransition
CATransition *caTransition = [CATransition animation];
caTransition.duration = 1.0;
// 动画切换风格
caTransition.type = @"oglFlip";
caTransition.subtype = kCATransitionFromRight;
// 添加动作
[self.view.window.layer addAnimation:caTransition forKey:nil];
lvc.modalPresentationStyle = 0;
[self presentViewController:lvc animated:YES completion:nil];
导航栏跳转动画
LoginSliderViewController *lvc = [[LoginSliderViewController alloc] init];
// 转场动画——CATransition
CATransition *caTransition = [CATransition animation];
caTransition.duration = 1.0;
// 动画切换风格
caTransition.type = @"cube";
caTransition.subtype = kCATransitionFromRight;
// 添加动作（下面两种都可以）
// [self.view.window.layer addAnimation:caTransition forKey:nil];
[self.navigationController.view.layer addAnimation:caTransition forKey:nil];
[self.navigationController pushViewController:lvc animated:NO];
三：UIView动画
- 普通动画
/*
Duration ： 动画时长
delay：开始时间
options： 动画效果
{
UIViewAnimationOptionCurveEaseInOut //先加速后减速，默认
UIViewAnimationOptionCurveEaseIn //由慢到快
UIViewAnimationOptionCurveEaseOut //由快到慢
UIViewAnimationOptionCurveLinear //匀速
}
animations：动画
completion：动画结束回调
*/
[UIView animateWithDuration:10 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
NSLog(@"动画开始");
_transformView.frame = CGRectMake(50, 500, 50, 50);
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
- 过渡动画
/*
UIViewAnimationOptionTransitionNone //没有效果，默认
UIViewAnimationOptionTransitionFlipFromLeft //从左翻转效果
UIViewAnimationOptionTransitionFlipFromRight //从右翻转效果
UIViewAnimationOptionTransitionCurlUp //从上往下翻页
UIViewAnimationOptionTransitionCurlDown //从下往上翻页
UIViewAnimationOptionTransitionCrossDissolve //旧视图溶解过渡到下一个视图
UIViewAnimationOptionTransitionFlipFromTop //从上翻转效果
UIViewAnimationOptionTransitionFlipFromBottom //从上翻转效果
*/
[UIView transitionWithView:_transformImageView duration:10 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
NSLog(@"动画开始");
_transformImageView.image = [UIImage imageNamed:@"02"];
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
- 弹簧效果
/*
Duration ： 动画时长
delay：开始时间
usingSpringWithDamping ：范围为0.0f到1.0f，数值越小「弹簧」的振动效果越明显
initialSpringVelocity： 表示初始的速度，数值越大一开始移动越快
options：动画效果
*/
_transformView2.frame = CGRectMake(190, 200, 50, 50);
[UIView animateWithDuration:2 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:20 options:UIViewAnimationOptionCurveEaseIn animations:^{
_transformView2.frame = CGRectMake(190, 100, 50, 50);
} completion:^(BOOL finished) {
}];
- 关键帧动画
/*
UIViewKeyframeAnimationOptionCalculationModeLinear // 连续运算模式，线性
UIViewKeyframeAnimationOptionCalculationModeDiscrete // 离散运算模式，只显示关键帧
UIViewKeyframeAnimationOptionCalculationModePaced // 均匀执行运算模式，线性
UIViewKeyframeAnimationOptionCalculationModeCubic // 平滑运算模式
UIViewKeyframeAnimationOptionCalculationModeCubicPaced // 平滑均匀运算模式
*/
[UIView animateKeyframesWithDuration:10 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
__block CGPoint center = _transformView.center;
/*
StartTime ： 开始时间（StartTime * Duration 秒）
relativeDuration ： 动画时长（relativeDuration * Duration 秒）
*/
[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.3 animations: ^{
_transformView.center = (CGPoint){ center.x, center.y + 80 };
}];
[UIView addKeyframeWithRelativeStartTime:0.3 relativeDuration:0.7 animations: ^{
_transformView.center = (CGPoint){ center.x, center.y + 185 };
}];
// 这样就可以实现组合动画
[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations: ^{
_transformView.transform = CGAffineTransformMakeRotation(M_PI);
}];
} completion:^(BOOL finished) {
}];