最近一直在做汽车类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"];
好啦,这样效果就出来了,坚持记笔记。