动画特效五：灌水动画

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

前面几个章节，已经介绍了几个动画实例，如果感兴趣的话，大家可以查看我以前的博客。今天给大家介绍一下灌水动画。先看效果图。

咋一看，好像这不是动画，好像使用了GIF图片似的。但是它的的确确是动画效果。通过这个实例，我想告诉大家一个事实：很多复杂的动画效果其实都是假象！

需求分析：

1. 圆圈外围有一个类似于指示器的东西，一直在转圈圈。

2. 根据你输入的数字的大小，水位也会对应的上升到指定的地方。

一、先看看XIB中的搭建：

请注意，我使用了一个UIImageView，名字叫做“Rotating Image”，那它为什么会绕着中心转呢？ 因为它是一个方形的图片，只是一小部分是转圈圈的那块，其他的都是透明的。

二、代码说明：

有了上图的说明，我们可以很快得写出转圈圈代码了。

CABasicAnimation *rotateAction = [CABasicAnimation animation];
    rotateAction.byValue = @(2 * M_PI);
    rotateAction.keyPath = @"transform.rotation";
    rotateAction.duration = 2;
    rotateAction.repeatCount = CGFLOAT_MAX;
    
    [self.rotateImage.layer addAnimation:rotateAction forKey:kRotateAnimationKey];

接着，我们分析水位的上涨，秘密就是它其实也是一张图片，只是图片的顶部是参差不齐的。水位的上升其实就是不停的改变图片的left和top的值，这样看起来就有波浪效果了。

当水位上升到指定的高度，我们让图片不停的执行关键帧动画，让水面看起来在不停的波动。废话不多说，直接上代码。

[self.scoreTextField resignFirstResponder];
    CGFloat avgScore = [self.scoreTextField.text floatValue];
    __weak typeof(self) wself = self;
    [UIView animateWithDuration:10.0 animations:^{
        // 根据数据上升到指定位置
        self.waveImage.top = 115 - ((avgScore/100.0) * 115);
        if (avgScore == 100) {
            self.waveImage.top = -20;
        }
        self.waveImage.left = 0;
    }completion:^(BOOL finished) {
        // 到达指定位置无限动画
        CAKeyframeAnimation * moveAction = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
        moveAction.values = @[@(-60),@(0),@(60),@(0),@(-60)];
        moveAction.duration = 4;
        moveAction.repeatCount = MAXFLOAT;
        [wself.waveImage.layer addAnimation:moveAction forKey:kMoveAnimationKey];
    }];

至此，这个动画效果就实现了！！！

最后，记得移除动画，因为这两个动画一直驻留在内存中，所以当他们的载体销毁后，他们也应该释放内存。

-(void)dealloc{
    [self.rotateImage.layer removeAnimationForKey:kRotateAnimationKey];
    [self.waveImage.layer removeAnimationForKey:kMoveAnimationKey];
}