使用CoreAnimation 实现简单的嫦娥奔月效果

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

Talk is cheap,so 直接先看效果

CoreAnimation 简介

CoreAnimation是苹果提供的一组非常强大的API，用来实现动画效果，其调用简单使用方便，可以满足我们日常使用的大部分场景。并且它还是跨平台的，既可以支持iOS，也支持macOS,不得不感叹苹果的强大啊。

常用类型

• CABasicAnimation 一般用于点到点场景
• CAKeyframeAnimation 可用于多点或复杂路径
• CASpringAnimation 可实现阻尼弹窗效果
• CATransition 用于View转场
• CAAnimationGroup 多组动画一起实现

效果实现

今天这个场景就充分利用了CABasicAnimation、CAKeyframeAnimation、CAAnimationGroup 三种动画类型，下面来看具体实现效果：

月亮、嫦娥二位主角闪亮登场

    UIImageView *ylImage = [[UIImageView alloc]initWithFrame:CGRectMake(KscreenW - 200, 100, 100, 100)];
    ylImage.image = [UIImage imageNamed:@"yl"];
    [self.view addSubview:ylImage];
    // 添加blingbling效果
    [self.addFLashAnimation:ylImage];

    UIImageView *ceImage = [[UIImageView alloc]initWithFrame:CGRectMake(50, KscreenH - 100, 50, 80)];
    ceImage.contentMode = UIViewContentModeScaleAspectFill;
    ceImage.image = [UIImage imageNamed:@"ce"];
    [self.view addSubview:ceImage];

月亮的闪烁效果bling~bling

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = [NSNumber numberWithFloat:1.0f];
    animation.toValue = [NSNumber numberWithFloat:0.5f];
    animation.autoreverses = YES;
    animation.duration = 3;
    animation.repeatCount = MAXFLOAT;
    animation.removedOnCompletion = **NO**;
    animation.fillMode = kCAFillModeForwards;
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [img.layer addAnimation:animation forKey:**nil**];

嫦娥飞天过程

分以下三步：飞天---> 绕月 ----> 着陆

飞天

使用CABasicAnimation，边飞升，边缩放，用组动画将二者结合

/// 飞升
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, KscreenH - 100)];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(KscreenW - 80, 150)];
/// 缩放
CABasicAnimation *animation5 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation5.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation5.fromValue = [NSNumber numberWithFloat:1.f];
animation5.toValue = [NSNumber numberWithFloat:0.8f];

绕月，选择近月点

CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
/// 绕月
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(**self**.ylImage.center.x, self.ylImage.center.y) radius:110 startAngle:0.0f endAngle:M_PI*2 clockwise:YES];
animation1.duration = 2.0f;
animation1.path = path.CGPath;

着月宫，缩放、渐隐渐现

 /// 缩放
CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation3.fromValue = [NSNumber numberWithFloat:1.f];
animation3.toValue = [NSNumber numberWithFloat:0.1f];
/// 渐隐
CABasicAnimation *animation4 = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation4.fromValue = [NSNumber numberWithFloat:0.8f];
animation4.toValue = [NSNumber numberWithFloat:0.3f];

最后

以上就是整个效果大概实现逻辑，简单利用CoreAnimation几个常见类型，就可以实现这个趣味小动画，我相信里面还有更多更好玩的动画等着我们去发现。诸iOSer要一起努力发掘出其更大价值哦！