ios动画实战运用 -(电量动态显示)(二)
前言
上一篇文章主要分享了动画的基础内容和加载等待动画的实际应用,一直考虑在写一篇动画的实战,但是苦于没有好的素材,所以一直没有动笔,这篇文章主要分享一篇电量动态显示的动画,首先看效果图:
效果图第一眼看到这种动画感觉美轮美奂,心里特别想知道他是如何实现的,但是做动画动画,首先你得明白一个动画有几种效果,然后拆分,一步步来实现。这个动画有两种效果:
一.外边一个类似加载的过程。
二.内部类似波浪的过程。
对于效果一,你能想到的最简单的办法一张图片,让他旋转就可以了。为了让这个动画有停顿的感觉,我想到了至少两种办法,一种是系统封装好的方法,另一种是动画组,鉴于上一篇没有涉及到动画组,这里采用动画组,具体看代码:
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