前言
在現(xiàn)在這個(gè)時(shí)候档悠，手機(jī)屏幕越來(lái)越大言沐，越來(lái)越多。手機(jī)屏幕從3.5->4-> 4.7 ->5.5伤锚，屏幕越來(lái)越大擅笔，適配這些也越來(lái)越麻煩，蘋(píng)果給出了一個(gè)很好的解決方案 Autolayout屯援。 目前Autolayout使用很廣也有很多第三方的替代方案 例如Masonry（自己使用覺(jué)得很不錯(cuò)）猛们。此處不多講Autolayout使用，此處主要講動(dòng)畫(huà)如何實(shí)現(xiàn)狞洋。
我們來(lái)看看當(dāng)前這個(gè)動(dòng)畫(huà)弯淘，這個(gè)動(dòng)畫(huà)是我在目前負(fù)責(zé)的一個(gè)SDK中實(shí)現(xiàn)的。
現(xiàn)在很多打的公司都會(huì)做一些步數(shù) 里程的捐贈(zèng)吉懊，這個(gè)是我 公益的項(xiàng)目庐橙，大家可以看下進(jìn)度條的動(dòng)畫(huà)。
進(jìn)度條都是根據(jù)Autolayout設(shè)置借嗽。
代碼如下：
[_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);
}];
這里不做多解釋?zhuān)@里使用Masonry設(shè)置控件的Autolayout态鳖。
這里有使用了幾個(gè)控件
progressAnimationView //用來(lái)承載動(dòng)畫(huà)
progressView //進(jìn)度條
progressImageView //進(jìn)度條上的指示點(diǎn)
progressCenterView //指示點(diǎn)應(yīng)該存在的位置
我們來(lái)看看它們的布局關(guān)系：
為何我們需要一個(gè)progressAnimationView？
根據(jù)描述蘋(píng)果的Auto Layout Guide描述了autoLayout搞動(dòng)畫(huà)的基本方法恶导，推薦的代碼如下：
[containerView layoutIfNeeded];
[UIView animateWithDuration:1.0 animations:^{
// Make all constraint changes here
[containerView layoutIfNeeded];
}];
可以看出做動(dòng)畫(huà)需要父View 去drewRect 中實(shí)現(xiàn)動(dòng)畫(huà)浆竭，用progressAnimationView的原因就是把進(jìn)度條的動(dòng)畫(huà)View都當(dāng)成子View然后去刷新布局開(kāi)始做動(dòng)畫(huà)。
那我們開(kāi)始實(shí)現(xiàn)動(dòng)畫(huà)吧 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);//通過(guò)設(shè)置進(jìn)度設(shè)置相對(duì)于progress進(jìn)度的位置點(diǎn)
}
make.centerY.equalTo(self.progressView.mas_centerY);
}];
[self.progressImageView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(_progressCenterView);
}];
這個(gè)就是設(shè)置動(dòng)畫(huà)的核心地方甲锡，我們來(lái)看看全部代碼
- (void)startProgressAnimationCompletion:(void (^)(void))finishBlcok{
//在這調(diào)用一下updateConstraintsIfNeeded 在動(dòng)畫(huà)開(kāi)始之前保證之前的約束更新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();
}
}];
}
然后跑起來(lái)羽戒，動(dòng)畫(huà)就開(kāi)始了缤沦。
如有疑問(wèn)可以直接留言，謝謝
接下來(lái)會(huì)分享下HealthKit 和 Coremotion 如何獲取運(yùn)動(dòng)數(shù)據(jù)
