前言
在现在这个时候，手机屏幕越来越大，越来越多。手机屏幕从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 如何获取运动数据
