我自己的总结:
// 第一种: Duration 时间 animations:动画体 /* [UIView animateWithDuration:4 animations:^{ CGRect rect = redView.frame; rect.origin.y += 25; redView.frame = rect; }]; */ // 第二种: Duration 时间 animations:动画体 动画优点卡顿 相比第一种动画结束增加了一个回调 /* [UIView animateWithDuration:4 animations:^{ CGRect rect = redView.frame; rect.origin.y += 25; redView.frame = rect; } completion:^(BOOL finished) { //动画结束 CGRect rect = redView.frame; rect.origin.y -= 25; redView.frame = rect; }]; */ //第三种:相比前两种增加一个延时, /* [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ CGRect rect = redView.frame; rect.origin.y += 100; redView.frame = rect; } completion:^(BOOL finished) { }]; */ //第四种: 弹簧效果动画 //usingSpringWithDamping:弹簧动画的阻尼值,也就是相当于摩擦力的大小,该属性的值从0.0到1.0之间,越靠近0,阻尼越小,弹动的幅度越大,反之阻尼越大,弹动的幅度越小,如果大道一定程度,会出现弹不动的情况。 // initialSpringVelocity:弹簧动画的速率,或者说是动力。值越小弹簧的动力越小,弹簧拉伸的幅度越小,反之动力越大,弹簧拉伸的幅度越大。这里需要注意的是,如果设置为0,表示忽略该属性,由动画持续时间和阻尼计算动画的效果。 /* [UIView animateWithDuration:2 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveLinear animations:^{ CGRect rect = redView.frame; rect.origin.y += 100; redView.frame = rect; } completion:^(BOOL finished) { }]; */ /** UIViewAnimationOptionTransitionNone = 0 << 20, // default UIViewAnimationOptionTransitionFlipFromLeft = 1 << 20, UIViewAnimationOptionTransitionFlipFromRight = 2 << 20, UIViewAnimationOptionTransitionCurlUp = 3 << 20, UIViewAnimationOptionTransitionCurlDown = 4 << 20, UIViewAnimationOptionTransitionCrossDissolve = 5 << 20, UIViewAnimationOptionTransitionFlipFromTop = 6 << 20, UIViewAnimationOptionTransitionFlipFromBottom = 7 << 20, */ //第五种: 翻页,旋转 /* [UIView transitionWithView:redView duration:2 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ } completion:^(BOOL finished) { }]; */ //第六种: 页面反动 /* [UIView transitionFromView:blueView toView:redView duration:5 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) { [UIView transitionFromView:redView toView:blueView duration:5 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) { }]; }]; */ //第六种: 页面反动,系统动画performSystemAnimation只有一种删除动画,不知道为什么 /* [UIView performSystemAnimation:UISystemAnimationDelete onViews:@[redView] options:UIViewAnimationOptionTransitionNone animations:^{ } completion:^(BOOL finished) { }]; */ [UIView animateKeyframesWithDuration:5 delay:0 options:UIViewKeyframeAnimationOptionAutoreverse animations:^{ [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations:^{ CGRect rect = redView.frame; rect.origin.y += 500; redView.frame = rect; }]; [UIView addKeyframeWithRelativeStartTime:1 relativeDuration:3 animations:^{ CGRect rect = redView.frame; rect.origin.y -= 700; redView.frame = rect; }]; [UIView addKeyframeWithRelativeStartTime:3 relativeDuration:5 animations:^{ CGRect rect = redView.frame; rect.origin.y += 1000; redView.frame = rect; }]; } completion:^(BOOL finished) { }];
别人转载:http://www.cocoachina.com/ios/20160727/17199.html
一.大小动画(改变frame)
1.展示效果
fram大小变化
2.Show Code
1
2
3
4
5
6
7
8
9
10
11
|
-(void)changeFrame{ CGRect originalRect = self.anView.frame; CGRect rect = CGRectMake(self.anView.frame.origin.x-20, self.anView.frame.origin.y-120, 160, 80); [UIView animateWithDuration:1 animations:^{ self.anView.frame = rect; } completion:^(BOOL finished) { [UIView animateWithDuration:1 animations:^{ self.anView.frame = originalRect; }]; }]; } |
二.拉伸动画(改变bounds)
1.展示效果
bounds变化
2.Show Code
1
2
3
4
5
6
7
8
9
10
11
12
|
-(void)changeBounds{ CGRect originalBounds = self.anView.bounds; //尽管这个rect的x,y跟原始的不同,动画也只是改变了宽高 CGRect rect = CGRectMake(0, 0, 300, 120); [UIView animateWithDuration:1 animations:^{ self.anView.bounds = rect; } completion:^(BOOL finished) { [UIView animateWithDuration:1 animations:^{ self.anView.bounds = originalBounds; }]; }]; } |
三.转移动画(改变center)
1.展示效果
center变化.gif
2.Show Code
1
2
3
4
5
6
7
8
9
10
11
|
-(void)changeCenter{ CGPoint originalPoint = self.anView.center; CGPoint point = CGPointMake(self.anView.center.x, self.anView.center.y-170); [UIView animateWithDuration:0.3 animations:^{ self.anView.center = point; } completion:^(BOOL finished) { [UIView animateWithDuration:1 animations:^{ self.anView.center = originalPoint; }]; }]; } |
谢谢二爷的示范,经典的表情也勾起很多人的回忆。好,我们回到现实,以上的3个例子,大家不难发现共同的特点和重复性。
1.都是改变UIView的属性就可以产生动画
2.都是带有block做结束回调,对结束监控
3.动画大小和位置变化可以通过多种方式实现
“佛爷,是不是很好奇我们并没有使用Tom先生很多图片组逐一显示?来,也请您下矿一走!”。“哈哈,好!不过那碗河水我还是要倒的”,“行,随你翻腾~”。
四.旋转动画(改变transform)
1.展示效果
transform变化.gif
2.Show Code
1
2
3
4
5
6
7
8
9
10
11
12
|
-(void)transform{ CGAffineTransform originalTransform = self.anView.transform; [UIView animateWithDuration:2 animations:^{ //self.anView.transform = CGAffineTransformMakeScale(0.6, 0.6);//缩放 //self.anView.transform = CGAffineTransformMakeTranslation(60, -60); self.anView.transform = CGAffineTransformMakeRotation(4.0f); } completion:^(BOOL finished) { [UIView animateWithDuration:2 animations:^{ self.anView.transform = originalTransform; }]; }]; } |
五.透明度动画(改变alpha)
1.展示效果
alpha变化.gif
2.Show Code
1
2
3
4
5
6
7
8
9
|
-(void)alpha{ [UIView animateWithDuration:2 animations:^{ self.anView.alpha = 0.3; } completion:^(BOOL finished) { [UIView animateWithDuration:2 animations:^{ self.anView.alpha = 1; }]; }]; } |
卓先生,停停停,来,回到我们舞台中间来。就以上5中都能让您玩的这么愉快,以上都是仅仅修改本身的属性值,我再介绍剩下三种基于UIView特别的动画,一个是Keyframe,一个Spring和Transition动画。一人一个轮着来,卓先生你先。
六.背景颜色Keyframes动画(改变background)
1.展示效果
background变化.gif
2.Show Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
-(void)changeBackground{ [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{ [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0]; }]; [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0]; }]; [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0]; }]; [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0]; }]; [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor whiteColor]; }]; } completion:^(BOOL finished) { NSLog(@ "动画结束" ); }]; } |
七.Spring动画(iOS 7.0起)
1.展示效果
spring动画.gif
2.Show Code
1
2
3
4
5
6
7
8
9
10
11
12
|
-(void)springAnimation{ CGRect originalRect = self.anView.frame; CGRect rect = CGRectMake(self.anView.frame.origin.x-80, self.anView.frame.origin.y, 120, 120); [UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{ self.anView.frame = rect; } completion:^(BOOL finished) { [UIView animateWithDuration:1 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{ self.anView.frame = originalRect; } completion:^(BOOL finished) { }]; }]; } |
八.transition动画
1.展示效果
transition动画.gif
2.Show Code
1
2
3
4
5
6
7
8
9
10
|
-(void)transitionAnimation{ [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{ //self.anView.backgroundColor = [UIColor blueColor]; } completion:^(BOOL finished) { [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{ //self.anView.backgroundColor = [UIColor greenColor]; } completion:^(BOOL finished) { }]; }]; } |
九.关于参数option选择说明
1.UIViewAnimationOptions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件 UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互 UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 UIViewAnimationOptionRepeat //无限重复执行动画 UIViewAnimationOptionAutoreverse //执行动画回路 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置 UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套动画的曲线设置 UIViewAnimationOptionAllowAnimatedContent //转场:进行动画时重绘视图 UIViewAnimationOptionShowHideTransitionViews //转场:移除(添加和移除图层的)动画效果 UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置 UIViewAnimationOptionCurveEaseInOut //时间曲线,慢进慢出(默认值) UIViewAnimationOptionCurveEaseIn //时间曲线,慢进 UIViewAnimationOptionCurveEaseOut //时间曲线,慢出 UIViewAnimationOptionCurveLinear //时间曲线,匀速 UIViewAnimationOptionTransitionNone //转场,不使用动画 UIViewAnimationOptionTransitionFlipFromLeft //转场,从左向右旋转翻页 UIViewAnimationOptionTransitionFlipFromRight //转场,从右向左旋转翻页 UIViewAnimationOptionTransitionCurlUp //转场,下往上卷曲翻页 UIViewAnimationOptionTransitionCurlDown //转场,从上往下卷曲翻页 UIViewAnimationOptionTransitionCrossDissolve //转场,交叉消失和出现 UIViewAnimationOptionTransitionFlipFromTop //转场,从上向下旋转翻页 UIViewAnimationOptionTransitionFlipFromBottom //转场,从下向上旋转翻页 |
2.UIViewKeyframeAnimationOptions
1
2
3
4
5
6
7
8
9
10
11
12
|
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件 UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互 UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 UIViewAnimationOptionRepeat //无限重复执行动画 UIViewAnimationOptionAutoreverse //执行动画回路 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置 UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置 UIViewKeyframeAnimationOptionCalculationModeLinear //运算模式 :连续 UIViewKeyframeAnimationOptionCalculationModeDiscrete //运算模式 :离散 UIViewKeyframeAnimationOptionCalculationModePaced //运算模式 :均匀执行 UIViewKeyframeAnimationOptionCalculationModeCubic //运算模式 :平滑 UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀 |
就UIView的动画而言,UIViewKeyframeAnimationOptions紧在Keyframes,其余的都是UIViewAnimationOptions。
十.总结和扩展
1.UIView动画主要是变化UIView的自带属性
2.UIView动画可以有很多种方式实现同一效果
3.Spring动画iOS 7.0以上才有
4.UIViewKeyframeAnimationOptions用着Keyframes动画,其余都用UIViewAnimationOptions枚举