iOS技术点iOS键盘上的鼓手

ios动画实战运用 -(电量动态显示)(二)

2016-07-13  本文已影响1658人  mark666

前言

上一篇文章主要分享了动画的基础内容和加载等待动画的实际应用,一直考虑在写一篇动画的实战,但是苦于没有好的素材,所以一直没有动笔,这篇文章主要分享一篇电量动态显示的动画,首先看效果图:

效果图

第一眼看到这种动画感觉美轮美奂,心里特别想知道他是如何实现的,但是做动画动画,首先你得明白一个动画有几种效果,然后拆分,一步步来实现。这个动画有两种效果:
一.外边一个类似加载的过程。
二.内部类似波浪的过程。

对于效果一,你能想到的最简单的办法一张图片,让他旋转就可以了。为了让这个动画有停顿的感觉,我想到了至少两种办法,一种是系统封装好的方法,另一种是动画组,鉴于上一篇没有涉及到动画组,这里采用动画组,具体看代码:

   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];

以上需要补充说明的动画组的是使用步骤:

以上动画的效果已经写好,我们只需要将动画添加到图片的layer上即可。

[self.rotationIMG.layer addAnimation:group forKey:nil];

看第一个效果:

效果图

对于效果二,如果你认真仔细思考过,那你肯定会有思路,继续使用动画组,利用贝塞尔曲线画出过程曲线,然后添加到动画组里,就ok了,但是这个过程真的很复杂,亲自尝试过!其实有一个很简单的办法,我们只是需要一张图片而已!

我们只需要给这张图片的yleft做动画就能实现。
这里有个小技巧是,我们不能将图片添加到self.rotationIMG上,因为这样会挡住效果一的动画效果,为了显示波浪在这个圆里,我们需要创建一个UIViewself.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.topwaveImageView.lefttopleft是不可以直接获取的,需要给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

本文的demo地址
https://github.com/markdashi/CircleWaveAnimation

上一篇下一篇

猜你喜欢

热点阅读