需求：汽車(chē)車(chē)體掃描動(dòng)畫(huà)顾复，掃描結(jié)束顯示另一種顏色的遮罩贡耽，期望結(jié)果如下
這里有兩個(gè)知識(shí)點(diǎn)：
- 一是利用約束來(lái)做掃描動(dòng)畫(huà)
-
二是在4s和plus的機(jī)型上掃描圖層和車(chē)體圖層不能很好的重合（雖然兩者的frame都是一致的）侄刽，顯示異常情況如下：
dongtu.gif
為方便行文指黎，對(duì)幾個(gè)圖層進(jìn)行命名：
車(chē)體的圖層我們稱(chēng)之為CarView，
掃描的圖層為ScanView
掃描時(shí)橫線(xiàn)為L(zhǎng)ineView
圖片：
有@2x和@3x兩種圖片
注：圖片的大小是按屏幕寬按比例適配的
關(guān)于第一點(diǎn)：
將ScanView的contentMode設(shè)為UIViewContentModeTop,
clipsToBounds 設(shè)為 YES州丹，通過(guò)定時(shí)器醋安，每隔一段時(shí)間去更新ScanView的height，將LineView始終挨著ScanView的底部墓毒，當(dāng)ScanView的高度變化吓揪，LineView的縱坐標(biāo)也會(huì)隨之變化，從而有了很好的掃描效果所计。代碼如下（默認(rèn)有一定編程童鞋看了柠辞，視圖的初始化什么的就展示了）：
初始約束
[self.scanView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.right.equalTo(ws.carView);
make.height.mas_equalTo(@(0.f));
}];
[self.lineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(ws.scanView.mas_bottom).offset(6);
make.left.right.equalTo(ws);
make.size.mas_equalTo(CGSizeMake(kScreenWidth, 15));
}];
動(dòng)畫(huà)部分
- (void)startScanAnimation {
self.scanView.hidden = NO;
UIImage *image = [UIImage imageNamed:@"check_bg_scan"];
self.scanView.image = [self resizeImage:image NewHeight:kCarHeight];
self.lineView.hidden = NO;
[self stepAnimation];
}
- (void)stepAnimation {
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.03 target:self selector:@selector(scanCarAnimation) userInfo:nil repeats:YES];
NSRunLoop *main = [NSRunLoop currentRunLoop];
[main addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)scanCarAnimation {
WS(ws);
CGFloat carHeight = kCarHeight;
CGFloat perHeight = carHeight/100;
__block CGFloat maskHeight = self.scanView.height;
[ws.scanView mas_updateConstraints:^(MASConstraintMaker *make) {
maskHeight += perHeight;
if (maskHeight > carHeight) {
maskHeight = 0;
}
make.height.mas_equalTo(@(maskHeight));
}];
[self layoutIfNeeded];
}
動(dòng)畫(huà)結(jié)束
- (void)showScanResult:(BOOL)isNormal {
[self stopScanAnimation];
self.lineView.hidden = YES;
self.scanView.hidden = NO;
NSString *imgName = isNormal ? @"check_bg_success" : @"check_bg_error";
UIImage *image = [UIImage imageNamed:imgName];
self.scanView.image = [self resizeImage:image NewHeight:kCarHeight];
[self.scanView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@(kCarHeight));
}];
}
- (void)stopScanAnimation {
if (_timer != nil && [_timer isValid]) {
[_timer invalidate];
_timer = nil;
}
}
關(guān)于第二點(diǎn)：
排查下來(lái)，原因是做動(dòng)畫(huà)的圖層的ScanView的contentMode設(shè)為UIViewContentModeTop, CarView的contentMode則是默認(rèn)的主胧， 在4s上ScanView的圖片相較于CarView變大了钾腺，在plus上ScanView的圖片相較于CarView卻變小了。
由于圖片的大小是隨屏幕的寬按比例放大縮小的讥裤，所以在4s上圖片的寬高都同步縮小了放棒，圖片相應(yīng)的是被壓縮了，而圖片的contentMode是Top己英，并不能根據(jù)目標(biāo)frame去自適應(yīng)间螟，所以ScanView自然就相對(duì)于已經(jīng)自適應(yīng)的CarView就顯得大了。（plus上同理损肛，至于Xr厢破、Xs、Xs Max上沒(méi)有這種情況治拿，也許是系統(tǒng)做了某種處理）
解決辦法就是將Image進(jìn)行重繪成目標(biāo)frame大小摩泪，這樣即便contentMode是Top，對(duì)圖片進(jìn)行裁剪劫谅，和CarView可以很好的重合见坑。
重繪圖片的代碼如下：
- (UIImage *)resizeImage:(UIImage *)originImage
NewHeight:(CGFloat)newHeight {
CGFloat scale = newHeight / originImage.size.height;
CGFloat newWidth = originImage.size.width * scale;
CGSize newSize = CGSizeMake(newWidth, newHeight);
UIGraphicsBeginImageContext(newSize);
[originImage drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
就這么多啦??????????????
