来来来,实现一个简单的扫描效果的动画

最近一直在做汽车类app，涉及到基础的登录，注册，定位等基础效果，也需要实现定制化的远程控制，车辆自检等功能，在做车辆自检的时候需要实现一个扫描车辆的效果，自身对动画这块不是很熟悉，其实扫描车身的时候就是位置移动的过程,如图：扫描动画也是图片，车身也是图片，我们实现一个效果就是 从下往上移动到上面，然后往下移动一点距离，然后在往上移动到顶端，然后在向下移动到底端，然后从下往上移动一点距离，然后在移动到底端，这就是一个过程。逻辑就是：下--》上--》中间--》上--》下--》中间--》下 。这样就算一个周期。于是我们可以这么实现效果：

效果图

代码如下：

CGFloat scan_hight = self.scanningImageView.frame.size.height;

    CGFloat scan_y = self.scanningImageView.center.y;

    CGFloat car_y=self.carImageView.frame.origin.y;

    CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    NSValue * bottomValue=[NSValue valueWithCGPoint:CGPointMake(self.scanningImageView.center.x,self.scanningImageView.center.y)];

    NSValue * topValue =[NSValue valueWithCGPoint:CGPointMake(self.scanningImageView.center.x,car_y)];

    NSValue * center_topValue =[NSValue valueWithCGPoint:CGPointMake(self.scanningImageView.center.x,car_y+scan_hight/2)];

    NSValue * center_bottomValue =[NSValue valueWithCGPoint:CGPointMake(self.scanningImageView.center.x,scan_y-scan_hight/2)];

    animation.values = @[bottomValue,topValue,center_topValue,topValue,bottomValue,center_bottomValue,bottomValue];

    NSLog(@"%@-->%@",bottomValue,topValue);

    animation.duration =3;//每个周期的时间

    animation.removedOnCompletion = NO;

    animation.fillMode = kCAFillModeForwards;

    animation.calculationMode = kCAAnimationCubicPaced;

    animation.keyTimes = @[@0,@1,@0.5,@0.5,@1,@0.5,@0.5];//每个点需要的时间的分配

    animation.repeatCount = HUGE_VALF;//相当于无形大

    [self.scanningImageView.layer addAnimation:animation forKey:@"keyframe"];

好啦，这样效果就出来了，坚持记笔记。