iOS-Autolayout控件执行动画

前言
在现在这个时候，手机屏幕越来越大，越来越多。手机屏幕从3.5->4-> 4.7 ->5.5，屏幕越来越大，适配这些也越来越麻烦，苹果给出了一个很好的解决方案 Autolayout。 目前Autolayout使用很广也有很多第三方的替代方案 例如Masonry（自己使用觉得很不错）。此处不多讲Autolayout使用，此处主要讲动画如何实现。

---

我们来看看当前这个动画，这个动画是我在目前负责的一个SDK中实现的。

2017-02-22 11_10_04.gif

现在很多打的公司都会做一些步数 里程的捐赠，这个是我 公益的项目，大家可以看下进度条的动画。

进度条都是根据Autolayout设置。
代码如下：

    [_progressAnimationView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@10);
        make.left.equalTo(self.contentView).with.offset(15);
        make.right.equalTo(self.contentView).with.offset(-56);
        make.top.equalTo(_titleLabel.mas_bottom).with.offset(5);
    }];
    
    [_progressView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@5);
        make.left.equalTo(self.progressAnimationView);
        make.right.equalTo(self.progressAnimationView);
        make.centerY.equalTo(self.progressAnimationView);
    }];

这里不做多解释，这里使用Masonry设置控件的Autolayout。

这里有使用了几个控件

progressAnimationView //用来承载动画
progressView //进度条
progressImageView //进度条上的指示点
progressCenterView //指示点应该存在的位置

我们来看看它们的布局关系：

Paste_Image.png Paste_Image.png

为何我们需要一个progressAnimationView？

根据描述苹果的Auto Layout Guide描述了autoLayout搞动画的基本方法，推荐的代码如下：

  [containerView layoutIfNeeded];
[UIView animateWithDuration:1.0 animations:^{
  // Make all constraint changes here
  [containerView layoutIfNeeded];
}];

可以看出做动画需要父View 去drewRect 中实现动画，用progressAnimationView的原因就是把进度条的动画View都当成子View然后去刷新布局开始做动画。

那我们开始实现动画吧 Do it

 [self.progressCenterView mas_remakeConstraints:^(MASConstraintMaker *make) {
            if (self.progressView.progress > 0) {
               make.centerX.equalTo(self.progressView.mas_centerX).multipliedBy(2 * self.progressView.progress);//通过设置进度设置相对于progress进度的位置点
            }
            make.centerY.equalTo(self.progressView.mas_centerY);
 }];
  [self.progressImageView mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.center.equalTo(_progressCenterView);
 }];

这个就是设置动画的核心地方，我们来看看全部代码

- (void)startProgressAnimationCompletion:(void (^)(void))finishBlcok{
    //在这调用一下updateConstraintsIfNeeded 在动画开始之前保证之前的约束更新UI完成。
    [self.progressAnimationView updateConstraintsIfNeeded];
    [UIView animateWithDuration:1 animations:^{
        [self.progressCenterView mas_remakeConstraints:^(MASConstraintMaker *make) {
            if (self.progressView.progress > 0) {
                make.centerX.equalTo(self.progressView.mas_centerX).multipliedBy(2 * self.progressView.progress);
            }
            make.centerY.equalTo(self.progressView.mas_centerY);
        }];
        [self.progressImageView mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.center.equalTo(_progressCenterView);
        }];
        [self.progressAnimationView layoutIfNeeded];
    } completion:^(BOOL finished) {
        if(finishBlcok){
            finishBlcok();
        }
    }];
}

然后跑起来，动画就开始了。

如有疑问可以直接留言，谢谢

接下来会分享下HealthKit 和 Coremotion 如何获取运动数据