iOS 连续动画效果（让APP动起来） - 好文

近期工作不忙，来一个需求感觉棒棒的，是一个比较简单的页面，如下图（图1）

作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要这是一个我的iOS交流群：687528266，不管你是小白还是大牛欢迎入驻
，分享BAT,阿里面试题、面试经验，讨论技术，大家一起交流学习成长！

应该很简单吧，没什么大的功能，就是一个展示，一个拨打电话，拨打电话不需要说，几行代码搞定，基本UI也不用说了，刚培训完的孩子们都能做，但是如果让这个页面动起来呢，会不会很漂亮呢（方然，这不是屁话么，先看看我做的效果吧，图2）

正题

会动得有云彩在飘，对号的缩放，添加绿色线条，我们一个一个的看
云彩的飘动
要做到这个会飘动的云彩，其实很简单，他是一个平移动画，我画了一个简单的图，可以看一下，便于理解嘛

只要云彩有透明部分，就可以了，但是当云彩向右移动的时候，屏幕上会有一快没有云彩试图覆盖的区域，尤其是当X等于屏幕的宽的时候

思路：

其实解决这个问题也是很简单的，我用两个imageView,imageView2的初始X值只要为负的屏幕宽，当imageView1移动的时候，让imageView2也跟着一起移动，他们两个以同样的速度来移动就可以了，等到imageView1的x等于屏幕的宽的时候，把imageView1的x值变成0然后继续执行这个动画，同时，当imageView2的X等于屏幕的宽的时候，把它的X变成初始的坐标

789.gif

这样就可以了吧，代码如下：
+ (void)translationAnimationView:(UIView *)view animationDuration:(
NSTimeInterval)timer animationBlock:(QuitRentAnimationBlock)block { [
UIView animateWithDuration:timer animations:^{ view.x = view.x +
SCREEN_WIDTH; } completion:^(BOOL finished) { if
(finished) { block(); } }]; }
然后两个imageview分别调用，在完成的block里面继续调用自己
//给云彩1做平移动画 - (void)cloudImageView_1Animation { [QuitRentAnimation
translationAnimationView:self.cloudImageView_1 animationDuration:10
animationBlock:^{ self.cloudImageView_1.x = 0; [self
cloudImageView_1Animation]; }]; }//给云彩2做平移动画 - (void
)cloudImageView_2Animation { [QuitRentAnimation translationAnimationView:
self.cloudImageView_2 animationDuration:10 animationBlock:^{ self
.cloudImageView_2.x = -SCREEN_WIDTH; [self
cloudImageView_2Animation]; }]; } 加好缩放以及绘制绿色虚线
由上面的效果gif可以看出来，加好缩放以及绘制绿色虚线是一个动画完成的
思路：
加好缩放以及绘制绿色虚线，他们是有先后顺序的，UIView动画有一个回调，我们在一个动画完成后再进行另外一个
第一，加号试图是一个缩放动画，做这个缩放动画其实很简单，按照上面的思路，先把他放大一下，再缩小一下，再放大，复原即可，demo如下：
+ (void)scalingAnimationView:(UIView *)view
animationBlock:(QuitRentAnimationBlock)block { view.transform =
CGAffineTransformMakeScale(1.0, 1.0); [UIView animateWithDuration:0.3
animations:^{ view.transform = CGAffineTransformMakeScale(1.2,
1.2); }completion:^(BOOL finish){ [UIView
animateWithDuration:0.3 animations:^{ view.transform
= CGAffineTransformMakeScale(0.9, 0.9); }completion:^(BOOL
finish){ [UIView animateWithDuration:0.3
animations:^{ view.transform =
CGAffineTransformMakeScale(1.1, 1.1); }completion:^(
BOOL finish){ [UIView animateWithDuration:0.3
animations:^{ view.transform =
CGAffineTransformMakeScale(1, 1);
}completion:^(BOOL finish){ block();
}]; }];
}]; }]; }

然后是绘制绿色虚线，这地方我遇到了挺多的坑，在现在的放慢gif中可以看出很大的缺点，就是绿色的线没有完全按照灰色的点上走，我目前还没有想到更好的优化方法，先把这个给大家分享出来，大家看一下吧
先创建一个绘制虚线试图
- (void)drawRect:(CGRect)rect{ [super drawRect:rect];
CGContextRef currentContext = UIGraphicsGetCurrentContext(); //设置虚线颜色
CGContextSetStrokeColorWithColor(currentContext, self.lineColor.CGColor);
//设置虚线宽度 CGContextSetLineWidth(currentContext, 2);
//设置虚线绘制起点 CGContextMoveToPoint(currentContext, 2 * 0.5, 0.0);
//设置虚线绘制终点 CGContextAddLineToPoint(currentContext, 2 * 0.5,
CGRectGetHeight(self.bounds)); //设置虚线排列的宽度间隔:下面的arr中的数字表示先绘制3个点再绘制1个点
CGFloat arr[] = {2,2}; //下面最后一个参数“2”代表排列的个数。
CGContextSetLineDash(currentContext,0, arr, 2);
CGContextDrawPath(currentContext, kCGPathStroke);
CGContextStrokePath(currentContext); }
然后继承于这个view，做宽度为1，高度为我们想要的动画，动画代码如下：
//垂直移动动画+ (void)verticalAnimationView:(UIView *)view
animationDuration:(NSTimeInterval)timer
animationDistance:(CGFloat)animationDistance
animationBlock:(QuitRentAnimationBlock)block { [UIView
animateWithDuration:timer animations:^{ view.height = view.height
+ animationDistance; } completion:^(BOOL finished) {
if (finished) { block(); } }]; }
结合上面的思路，把每个动画点起来
//给对号线条，垂直虚线做动画 - (void)quitRentSucessImageViewAnimation { int i = 2;
// int i =2; // int i = 3; CGFloat greenLine_1_Distance;
CGFloat greenLine_2_Distance; if (i == 0) {
greenLine_1_Distance =30 * KHeight_Scale; }else if (i == 1){
greenLine_1_Distance =60 * KHeight_Scale;
greenLine_2_Distance =55 * KHeight_Scale; }else if (i == 2){
greenLine_1_Distance =60 * KHeight_Scale;
greenLine_2_Distance =110 * KHeight_Scale; } WEAKSELF
[QuitRentAnimation scalingAnimationView:weakSelf.quitRentSucessImageView
animationBlock:^{ [self addSubview:self.greenLine1];
[self.greenLine1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(weakSelf.quitRentSucessImageView.mas
_bottom); make.centerX.mas_equalTo(weakSelf
.detainMoneyAccountTitleLabel.mas_right).offset(25/2+5);
make.width.mas_equalTo(2); make.height.mas
_equalTo(greenLine_1_Distance); }];
[QuitRentAnimation verticalAnimationView:weakSelf.greenLine1 animationDuration:
0.8 animationDistance:greenLine_1_Distance animationBlock:^{ if (i ==
0) return ; weakSelf.houseConnectSucessImageView.image
= [UIImage imageNamed:@"icon_pay_money_duihao"];
[QuitRentAnimation scalingAnimationView:weakSelf.houseConnectSucessImageView
animationBlock:^{ [weakSelf
addSubview:weakSelf.greenLine2]; [weakSelf
.greenLine2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(weakSelf.houseConnectSucessImageView
.mas_bottom); make.centerX.mas
_equalTo(weakSelf.detainMoneyAccountTitleLabel.mas_right).offset(25/2+5);
make.width.mas_equalTo(2);
make.height.mas_equalTo(greenLine_2_Distance);
}]; [QuitRentAnimation
verticalAnimationView:weakSelf.greenLine2 animationDuration:1
animationDistance:greenLine_2_Distance animationBlock:^{
weakSelf.detainMoneyAccountSucessImageView.image = [UIImage
imageNamed:@"icon_pay_money_duihao"];
[QuitRentAnimation scalingAnimationView:weakSelf
.detainMoneyAccountSucessImageView animationBlock:^{ //
}]; }];
}]; }]; }]; }
我的这个是根据不同的情况让绿色线条到不同的位置，所以比较繁琐，也可能是本人代码风格一向比较乱的原因吧

总结

其实技术都是一些很基本的技术，想做出漂亮的动画根据运动轨迹时间慢慢调整就好。

文／齐广东（简书作者）
原文链接：http://www.jianshu.com/p/9c3ccd2eeafe
<http://www.jianshu.com/p/9c3ccd2eeafe>
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

如果需要以下书籍，加QQ群687528266免费分享

喜欢晓雯！记得关注晓雯哟！

热门工具换一换