ios CAAnimation动画实践和SceneKit飞机小游戏

栏目: IOS · 发布时间: 5年前

内容简介：这篇主要介绍CAKeyframeAnimation关键帧动画的使用，scenekit实现的飞机游戏在下一篇详细介绍。先看看实现的动画效果，下面在逐个分析。1. 摇钱树

这篇主要介绍CAKeyframeAnimation关键帧动画的使用，scenekit实现的飞机游戏在下一篇详细介绍。传送门

先看看实现的动画效果，下面在逐个分析。 git项目地址

总体效果图.gif

动画分析和实现

1. 摇钱树

yqs.gif

这是我第一个app中的一个动画，看到需求后一头雾水，由于当时才接触ios，简直无从下手，经过各种百度后才找到一些头绪。从监听手机震动，到树干摇晃，最后掉落元宝，逐步理清了各个对象需要执行的行为动作。下面我会贴一些代码，具体的还请去项目中查看，代码注释也写得很详细。

手机摇晃监听

- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event
{
    NSLog(@"%@",NSStringFromSelector(_cmd));
}

- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event
{
    NSLog(@"%@",NSStringFromSelector(_cmd));
    AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);//系统震动

    [self ybAnimation];
    [self shakeYQS:yqsImage];
}

摇晃树干

- (void)shakeYQS:(UIImageView *)view
{
    //表示以z坐标轴为中心轴旋转
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation.values = @[@(0),@(-M_PI_4/2),@(0),@(M_PI_4/2),@(0),
                         @(-M_PI_4/3),@(0),@(M_PI_4/3),@(0),
                         @(-M_PI_4/4),@(0),@(M_PI_4/4),@(0),
                         @(-M_PI_4/5),@(0),@(M_PI_4/6),@(0)];//设置树的摇晃幅度,分母变大表示摇晃幅度越来越小，不断h衰减至0。
    animation.repeatCount = 1;
    animation.duration = 1;
    [view.layer addAnimation:animation forKey:@"shake"];

}

这里要理解keypath的意思，从代码中可以很直观的看出监听的是z轴旋转属性，判断旋转方向可以用握手定则，用手握住坐标轴，大拇指指向坐标轴方向，其余四指为旋转的方向，至于顺逆时针，需要视情况而定。

至于元宝掉落，就是简单的一个平移动画

//元宝掉落
- (void)ybAnimation
{
    for (int i = 0; i< ybArray.count; i++) {

        UIImageView * yb = ybArray[i];

        int x = rand()%215;
        int y = rand()%60 + 60;
        yb.frame = CGRectMake(x + MinX(yqsImage), y + MinY(yqsImage), yb.frame.size.width, yb.frame.size.height);

        yb.hidden = NO;
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
        animation.delegate = self;
        animation.values = @[@(yb.frame.origin.y), @(yb.frame.origin.y+200)];

        float startTime = 0;

        animation.repeatCount = 1;

        float endTime = (float)(arc4random()%100) / 100 + 0.5;

        animation.keyTimes = @[@(startTime), @(endTime)];
        animation.duration = endTime;
        animation.fillMode = kCAFillModeForwards;
        animation.removedOnCompletion = NO;
        [animation setValue:@"ybDrop" forKey:@"ybAnimation"];
        [animation setValue:yb forKey:@"animationView"];
        [yb.layer addAnimation:animation forKey:@"ybAnimation"];
    }
}

其实拿到一个动画需求后，首先要理清的就是整个动画过程中，每个对象执行了哪些行为。分析好后，然后就往基本动画上套就行了，比如，平移，缩放，旋转这些，再复杂点可能会加入路径，3D场景变换等等，当然这些也需要一定的知识积累。下面两个简单动画，我就不贴代码了，只写一些分析思路。

2. 唱片动画