需求：汽車車體掃描動(dòng)畫，掃描結(jié)束顯示另一種顏色的遮罩，期望結(jié)果如下

dongtu.gif

這里有兩個(gè)知識(shí)點(diǎn)：

• 一是利用約束來(lái)做掃描動(dòng)畫

• 二是在4s和plus的機(jī)型上掃描圖層和車體圖層不能很好的重合（雖然兩者的frame都是一致的），顯示異常情況如下：

  
  
  dongtu.gif

為方便行文，對(duì)幾個(gè)圖層進(jìn)行命名：
車體的圖層我們稱之為CarView，
掃描的圖層為ScanView
掃描時(shí)橫線為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)畫部分
- (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)畫結(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)畫的圖層的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;
}

就這么多啦??????????????