iOS_行驶的汽车动画

效果图

demo地址:
https://github.com/colourfulStar/CarDemo

1.车身上下颠簸动画

    UIImageView *carBody = [_carContainer viewWithTag:100];
    CGPoint point = CGPointMake(carBody.center.x, carBody.center.y+0.5);
    CABasicAnimation *joltAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    joltAnimation.toValue        = [NSValue valueWithCGPoint:point];
    joltAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    joltAnimation.duration       = 0.85;
    joltAnimation.repeatCount = HUGE_VALF;
    joltAnimation.removedOnCompletion = NO;
    joltAnimation.autoreverses = YES;
    [carBody.layer addAnimation:joltAnimation forKey:@"carShake"];

2.车轮动画

    UIImageView *carWheel1 = [_carContainer viewWithTag:101];
    UIImageView *carWheel2 = [_carContainer viewWithTag:102];
    CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    rotation.toValue = @(M_PI*2);
    rotation.removedOnCompletion = NO;
    rotation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    rotation.duration = 1;
    rotation.fillMode = kCAFillModeForwards;
    rotation.repeatCount = HUGE_VALF;
    [carWheel1.layer addAnimation:rotation forKey:@"wheelRotation"];
    [carWheel2.layer addAnimation:rotation forKey:@"wheelRotation"];

3.位移动画

    CGFloat carMoveViewWidth = 100;
    CGPoint moveEndPoint = CGPointMake(CGRectGetWidth(MAINSCREEN) - carMoveViewWidth/2.0 - 20, _carContainer.center.y);
    CABasicAnimation *carMoveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    carMoveAnimation.toValue        = [NSValue valueWithCGPoint:moveEndPoint];
    carMoveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    carMoveAnimation.duration       = 10;
    carMoveAnimation.removedOnCompletion = NO;
    carMoveAnimation.fillMode = kCAFillModeForwards;
    [_carContainer.layer addAnimation:carMoveAnimation forKey:@"carMove"];

4.汽车尾气动画

    //路径
    CAKeyframeAnimation *smokePathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    CGPoint point1 = carSmoke.center;
    CGPoint point2 = CGPointMake(5, CGRectGetMaxY(carBody.frame) - 10);
    CGPoint cp = CGPointMake(10, CGRectGetMaxY(carBody.frame) - 6);
    [movePath moveToPoint:point1];
    [movePath addQuadCurveToPoint:point2 controlPoint:cp];
    smokePathAnimation.path = movePath.CGPath;
    //透明度
    CABasicAnimation *smokeOpacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    smokeOpacityAnimation.toValue = @(0);
    //大小
    CABasicAnimation *smokeScaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    smokeScaleAnimation.toValue = @(2);
    
    CAAnimationGroup *smokeGroupAnimation = [CAAnimationGroup animation];
    smokeGroupAnimation.animations = @[smokePathAnimation,smokeScaleAnimation,smokeOpacityAnimation];
    smokeGroupAnimation.duration = 2;
    smokeGroupAnimation.removedOnCompletion = NO;
    smokeGroupAnimation.repeatCount = HUGE_VALF;
    smokeGroupAnimation.fillMode = kCAFillModeForwards;
    [carSmoke.layer addAnimation:smokeGroupAnimation forKey:@"smokeGroupAnimation"];
    [movePath closePath];