汽车扫描动画之UIViewContentModeTop图片显示异常

心已赠人 2022-01-20 07:49 176阅读 0赞

需求：汽车车体扫描动画，扫描结束显示另一种颜色的遮罩，期望结果如下

\#\#\#\#\#\#这里有两个知识点：

*  一是利用约束来做扫描动画
 *  二是在4s和plus的机型上扫描图层和车体图层不能很好的重合（虽然两者的frame都是一致的），显示异常情况如下：

为方便行文，对几个图层进行命名： 车体的图层我们称之为CarView， 扫描的图层为ScanView 扫描时横线为LineView 图片： 有@2x和@3x两种图片 注：图片的大小是按屏幕宽按比例适配的

\#\#\#\#\#\#关于第一点： 将ScanView的contentMode设为UIViewContentModeTop, clipsToBounds 设为 YES，通过定时器，每隔一段时间去更新ScanView的height，将LineView始终挨着ScanView的底部，当ScanView的高度变化，LineView的纵坐标也会随之变化，从而有了很好的扫描效果。代码如下（默认有一定编程童鞋看了，视图的初始化什么的就展示了）：

初始约束
    [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));
     }];
    复制代码

动画部分
    - (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];
    }
    复制代码

动画结束
    - (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;
        }
    }
    复制代码

\#\#\#\#\#\#关于第二点： 排查下来，原因是做动画的图层的ScanView的contentMode设为UIViewContentModeTop, CarView的contentMode则是默认的， 在4s上ScanView的图片相较于CarView变大了，在plus上ScanView的图片相较于CarView却变小了。

由于图片的大小是随屏幕的宽按比例放大缩小的，所以在4s上图片的宽高都同步缩小了，图片相应的是被压缩了，而图片的contentMode是Top，并不能根据目标frame去自适应，所以ScanView自然就相对于已经自适应的CarView就显得大了。（plus上同理，至于Xr、Xs、Xs Max上没有这种情况，也许是系统做了某种处理） **解决办法**就是将Image进行重绘成目标frame大小，这样即便contentMode是Top，对图片进行裁剪，和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;
    }
    复制代码

就这么多啦???????

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关动画效果之文字显示效果（逐行显示和滚动显示）

文字逐行显示效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

谁借莪１个温暖的怀抱￠/ 2024年04月19日 15:41/ 0 赞/ 74 阅读

相关 Android P OpenGL之显示图片

用OpenGL显示一张图片。工程源码：https://github.com/sunxiaolin2016/OpenglOne GLImageHandler G...

「爱情、让人受尽委屈。」/ 2024年04月19日 08:01/ 0 赞/ 81 阅读

相关美化自己的对话框－－MFC显示GIF动画图片

如何让自己的对话框显得更加好看，增加一些动态元素，这是我专注于MFC之后忙着解决的问题。在本论坛的本版块里，我陆续的发了两个这方面的帖子，列举如下： 1.如何创

梦里梦外;/ 2023年10月18日 08:15/ 0 赞/ 136 阅读

相关 scrapy爬取汽车之家宝马5系图片

需求分析我们想在汽车之家官网上爬取宝马5系的部分图片，并根据分类保存到本地磁盘欣赏， ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

╰半橙微兮°/ 2023年10月08日 09:29/ 0 赞/ 11 阅读

相关扫描简单动画

ImageView mQrLineView = (ImageView) findViewById(R.id.scan_line); Transl

深碍√TFBOYSˉ_/ 2023年07月25日 14:11/ 0 赞/ 21 阅读

相关 iPhone开发基础之动画显示图片的实现

本文介绍一种动态显示多张图片效果的方法，示例代码和说明如下 //初始化UIImageview UIImageView\ animview=\[\[\[UIImageView

梦里梦外;/ 2022年09月30日 11:55/ 0 赞/ 55 阅读

相关 css3制作翻滚动画,css3之图片波浪翻滚动画

.pic1,.pic2,.pic3,.pic4,.pic5,.line1,.line2,.line3,.line4\_1,.line4\_2,.line4\_3,.line4\

冷不防/ 2022年09月02日 14:53/ 0 赞/ 251 阅读

相关资源图片文件命名规则--cocos动画异常

最近项目中发现有的动画播放会出现异常，后来找的的原因是因为读取动画PNG 和plist 文件时候，和程序中其他载入的资源重名在显示的时候就会出现错乱。解

ゝ一纸荒年。/ 2022年08月09日 14:40/ 0 赞/ 11 阅读

相关 Android 雷达扫描动画效果实现

在新浪微博上有一个雷达功能，感觉类似于微信附近的人。只是多了一个类似于雷达扫描效果的动画，某些知名安全软件也有这样的雷达效果，因此在这里学习一下。首先看一下效果图，有个整体

超、凢脫俗/ 2022年07月27日 15:57/ 0 赞/ 29 阅读

相关汽车扫描动画之UIViewContentModeTop图片显示异常

需求：汽车车体扫描动画，扫描结束显示另一种颜色的遮罩，期望结果如下 \\\\\\这里有两个知识点：一是利用约束来做扫描动画二是在4s和plus的机型上扫描图

心已赠人/ 2022年01月20日 07:49/ 0 赞/ 177 阅读