前言
上一篇文章主要分享了动画的基础内容和加载等待动画的实际应用，一直考虑在写一篇动画的实战，但是苦于没有好的素材，所以一直没有动笔，这篇文章主要分享一篇电量动态显示的动画，首先看效果图:
效果图
第一眼看到这种动画感觉美轮美奂，心里特别想知道他是如何实现的，但是做动画动画，首先你得明白一个动画有几种效果，然后拆分，一步步来实现。这个动画有两种效果：
一.外边一个类似加载的过程。
二.内部类似波浪的过程。
对于效果一，你能想到的最简单的办法一张图片，让他旋转就可以了。为了让这个动画有停顿的感觉，我想到了至少两种办法，一种是系统封装好的方法，另一种是动画组，鉴于上一篇没有涉及到动画组，这里采用动画组，具体看代码：
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
basic.beginTime = 0;
basic.toValue = @(M_PI);
basic.duration = 1.0;
basic.autoreverses = NO;
basic.fillMode = kCAFillModeForwards;
CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
basic1.beginTime = basic.beginTime + basic.duration;
basic1.fromValue = @(M_PI);
basic1.toValue = @(M_PI *2);
basic1.duration = 1.0;
basic1.autoreverses = NO;
basic1.fillMode = kCAFillModeForwards;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration = 2;
group.repeatCount = 2;
group.animations = @[basic,basic1];
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
以上需要补充说明的动画组的是使用步骤：
- 1.创建基本动画，可以设置每个动画的起始时间，以及持续时间
- 2.将基本动画添加到组动画数组中，设置持续时间
这里需要解释的是每个单独动画持续时间是占动画组的比例，例如动画组持续2秒，每个单独动画个持续1秒，那么每个单独动画占总时长50%。
以上动画的效果已经写好，我们只需要将动画添加到图片的layer上即可。
[self.rotationIMG.layer addAnimation:group forKey:nil];
看第一个效果：
效果图
对于效果二，如果你认真仔细思考过，那你肯定会有思路，继续使用动画组，利用贝塞尔曲线画出过程曲线，然后添加到动画组里，就ok了，但是这个过程真的很复杂，亲自尝试过！其实有一个很简单的办法，我们只是需要一张图片而已！
我们只需要给这张图片的y和left做动画就能实现。
这里有个小技巧是，我们不能将图片添加到self.rotationIMG上，因为这样会挡住效果一的动画效果，为了显示波浪在这个圆里，我们需要创建一个UIView比self.rotationIMG尺寸小一点即可。
UIImageView *waveImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"wave"]];
waveImageView.frame = CGRectMake(0, 0, 450, 300);
waveImageView.alpha = 1;
waveImageView.top = 115;
waveImageView.left = -300;
[self.bgView addSubview:waveImageView];
这里需要解释的是，waveImageView图片的尺寸是随便定的，为了动画效果试出来的一个合适的尺寸,waveImageView.top和waveImageView.left中top和left是不可以直接获取的，需要给UIView添加一个分类，才能做到。
添加图片后的效果如下：
这不是我们想要的效果，我们需要做的就是把不在
self.bgView范围内的图片裁掉
self.bgView.layer.cornerRadius = 115 /2.0;
self.bgView.clipsToBounds = YES;
接下就是做动画的时刻，利用系统封装的方法
[UIView animateWithDuration:4.0 animations:^{
waveImageView.top = 115 - (([self.electric intValue]/100.0) * 115);
if ([self.electric intValue] ==100) {
waveImageView.top = -30;
}
waveImageView.left = 0;
}];
看一下运行效果:
效果图
另一种动画效果
[UIView animateWithDuration:1.0 animations:^{
waveImageView.top = 0;
waveImageView.left = -200;
} completion:^(BOOL finished) {
[UIView animateWithDuration:3.0 animations:^{
waveImageView.top = 115 - (([self.electric intValue]/100.0) * 115);
if ([self.electric intValue] ==100) {
waveImageView.top = -30;
}
waveImageView.left = 0;
}];
}];
效果图可以看开头演示第一个动画。
这里需要解释一下self.electric是电量，waveImageView.top大小是这样计算的：图片的尺寸高为115，self.electric占100得多少，进而确定占图片高度的的多少，而坐标系x``y轴是向下的。
waveImageView.left设置为0即可。当电量为100的时候，其实是显示不满的，我们需要做判断，只要让它的高度占满即可。
像演示中总电量和百分数，其实就是两个label，加上即可，不在赘述，完整的程序在demo中细细品味吧！
结尾
其实这篇文章是想写CAShapeLayer的，但是真的没有找到好素材，敬请谅解，简书上有一篇根据CAShapeLayer封装很好的动画，大家可以去学习
[地址]http://www.jianshu.com/p/658641c77f51
网友评论