zoukankan      html  css  js  c++  java

  • iOS动画-扩散波纹效果

    最终效果

    1.png2.gif

    实现思路

    动画的表现形式是颜色以及大小的变化，整体效果可以看做多个单独的波纹效果的叠加。因此我们可以创建多个CALayer，分别赋予CABasicAnimation动画，组成最终的动画效果。

    因此我们先从单个波纹扩散效果来尝试，然后根据时间差将效果叠加起来。

    代码

    1.新建动画 View RippleAnimationView，动画效果在animationLayer上实现。

    新建RippleAnimationView类，继承自UIView，设置扩散倍数，然后重写- (void)drawRect:(CGRect)rect方法，在方法内部新建承载动画的animationLayer。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    #import
    @interface RippleAnimationView : UIView
    /**
     设置扩散倍数。默认1.423倍
     */
    @property (nonatomic, assign) CGFloat multiple;
    - (instancetype)initWithFrame:(CGRect)frame;
    @end
    @implementation RippleAnimationView
    - (instancetype)initWithFrame:(CGRect)frame {
        self = [super initWithFrame:frame];
         
        if (self) {
            self.backgroundColor = [UIColor clearColor];
           _multiple = 1.423;
        }
         
        return self;
    }
    - (void)drawRect:(CGRect)rect {
         
        CALayer *animationLayer = [CALayer layer];
         
        // 加入动画
         
        [self.layer addSublayer:animationLayer];
    }

    2.创建单个扩散的动画承载CALayer，实现扩散效果。

    首先实现缩放动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    - (CABasicAnimation *)scaleAnimation {
        CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
         
        scaleAnimation.fromValue = @1;
        scaleAnimation.toValue = @(_multiple);
        scaleAnimation.beginTime = CACurrentMediaTime();
        scaleAnimation.duration = 3;
        scaleAnimation.repeatCount = HUGE;// 重复次数设置为无限
        return scaleAnimation;
    }

    新建CALayer，并在layer上加载动画。然后将这个Layer放在animationLayer上。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    - (void)drawRect:(CGRect)rect {
         
        CALayer *animationLayer = [CALayer layer];
         
        // 新建缩放动画
        CABasicAnimation *animation = [self scaleAnimation];
         
        // 新建一个动画 Layer，将动画添加上去
        CALayer *pulsingLayer = [self pulsingLayer:rect animation:animation];
         
        //将动画 Layer 添加到 animationLayer
        [animationLayer addSublayer:pulsingLayer];
         
        [self.layer addSublayer:animationLayer];
    }
    - (CALayer *)pulsingLayer:(CGRect)rect animation:(CABasicAnimation *)animation {
        CALayer *pulsingLayer = [CALayer layer];
         
        pulsingLayer.borderWidth = 0.5;
        pulsingLayer.borderColor = [UIColor blackColor].CGColor;
        pulsingLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
        pulsingLayer.cornerRadius = rect.size.height / 2;
        [pulsingLayer addAnimation:animation forKey:@"plulsing"];
         
        return pulsingLayer;
    }

    可以看看现在的效果是这样的

    2.gif

    3. 加入背景色以及边框色的渐变效果，将单一的缩放动画合并为动画组CAAnimationGroup。

    （ps: 除了改变背景色，还要设置并改变边框色的更主要原因是去除锯齿）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    // 设置一个初始化颜色的宏
    #define ColorWithAlpha(r,g,b,a) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a]
    - (void)drawRect:(CGRect)rect {
         
        CALayer *animationLayer = [CALayer layer];
         
        // 这里同时创建[缩放动画、背景色渐变、边框色渐变]三个简单动画
        NSArray *animationArray = [self animationArray];
         
        // 将三个动画合并为一个动画组
        CAAnimationGroup *animationGroup = [self animationGroupAnimations:animationArray];
         
        //修改方法，将原先添加的动画由“简单动画”改为“动画组”
        CALayer *pulsingLayer = [self pulsingLayer:rect animation:animationGroup];
         
        //将动画 Layer 添加到 animationLayer
        [animationLayer addSublayer:pulsingLayer];
        [self.layer addSublayer:animationLayer];
    }
    - (NSArray *)animationArray {
        NSArray *animationArray = nil;
         
        CABasicAnimation *scaleAnimation = [self scaleAnimation];
        CAKeyframeAnimation *borderColorAnimation = [self borderColorAnimation];
        CAKeyframeAnimation *backgroundColorAnimation = [self backgroundColorAnimation];
        animationArray = @[scaleAnimation, backgroundColorAnimation, borderColorAnimation];
         
        return animationArray;
    }
    - (CAAnimationGroup *)animationGroupAnimations:(NSArray *)array {
        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
         
        animationGroup.beginTime = CACurrentMediaTime();
        animationGroup.duration = 3;
        animationGroup.repeatCount = HUGE;
        animationGroup.animations = array;
        animationGroup.removedOnCompletion = NO;
        return animationGroup;
    }
    - (CABasicAnimation *)scaleAnimation {
        CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
         
        scaleAnimation.fromValue = @1;
        scaleAnimation.toValue = @(_multiple);
        return scaleAnimation;
    }
    // 使用关键帧动画，使得颜色动画不要那么的线性变化
    - (CAKeyframeAnimation *)backgroundColorAnimation {
        CAKeyframeAnimation *backgroundColorAnimation = [CAKeyframeAnimation animation];
         
        backgroundColorAnimation.keyPath = @"backgroundColor";
        backgroundColorAnimation.values = @[(__bridge id)ColorWithAlpha(255, 216, 87, 0.5).CGColor,
                                            (__bridge id)ColorWithAlpha(255, 231, 152, 0.5).CGColor,
                                            (__bridge id)ColorWithAlpha(255, 241, 197, 0.5).CGColor,
                                            (__bridge id)ColorWithAlpha(255, 241, 197, 0).CGColor];
        backgroundColorAnimation.keyTimes = @[@0.3,@0.6,@0.9,@1];
        return backgroundColorAnimation;
    }
    - (CAKeyframeAnimation *)borderColorAnimation {
        CAKeyframeAnimation *borderColorAnimation = [CAKeyframeAnimation animation];
         
        borderColorAnimation.keyPath = @"borderColor";
        borderColorAnimation.values = @[(__bridge id)ColorWithAlpha(255, 216, 87, 0.5).CGColor,
                                        (__bridge id)ColorWithAlpha(255, 231, 152, 0.5).CGColor,
                                        (__bridge id)ColorWithAlpha(255, 241, 197, 0.5).CGColor,
                                        (__bridge id)ColorWithAlpha(255, 241, 197, 0).CGColor];
        borderColorAnimation.keyTimes = @[@0.3,@0.6,@0.9,@1];
        return borderColorAnimation;
    }
    - (CALayer *)pulsingLayer:(CGRect)rect animation:(CAAnimationGroup *)animationGroup {
        CALayer *pulsingLayer = [CALayer layer];
         
        pulsingLayer.borderWidth = 0.5;
        pulsingLayer.borderColor = ColorWithAlpha(255, 216, 87, 0.5).CGColor;
        pulsingLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
        pulsingLayer.cornerRadius = rect.size.height / 2;
        [pulsingLayer addAnimation:animationGroup forKey:@"plulsing"];
        return pulsingLayer;
    }

    现在就有种渐变的感觉了

    2.gif

    4. 同时创建三个扩散动画的CALyer，将开始动画的时间错开，同时添加到animationLayer上。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    // 设置静态常量 pulsingCount ，表示 Layer 的数量
    static NSInteger const pulsingCount = 3;
    // 设置静态常量 animationDuration ，表示动画时间
    static double const animationDuration = 3;
    - (void)drawRect:(CGRect)rect {
         
        CALayer *animationLayer = [CALayer layer];
         
        // 利用 for 循环创建三个动画 Layer
        for (int i = 0; i < pulsingCount; i++) {
            NSArray *animationArray = [self animationArray];
             
            // 通过传入参数 i 计算，错开动画时间
            CAAnimationGroup *animationGroup = [self animationGroupAnimations:animationArray index:i];
            CALayer *pulsingLayer = [self pulsingLayer:rect animation:animationGroup];
            [animationLayer addSublayer:pulsingLayer];
        }
        [self.layer addSublayer:animationLayer];
    }
    ... ...
    - (CAAnimationGroup *)animationGroupAnimations:(NSArray *)array index:(int)index {
        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
         
        animationGroup.beginTime = CACurrentMediaTime() + (double)(index * animationDuration) / (double)pulsingCount;
        animationGroup.duration = animationDuration;
        animationGroup.repeatCount = HUGE;
        animationGroup.animations = array;
        animationGroup.removedOnCompletion = NO;
        return animationGroup;
    }
    ... ...

    然后效果有点……一言难尽……

    2.gif

    真是很有纪律性的变化啊~~好吧，只需要加入动画曲线就好了

    5. 最后加入动画速度曲线

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ... ...
    - (CAAnimationGroup *)animationGroupAnimations:(NSArray *)array index:(int)index {
        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
         
        animationGroup.beginTime = CACurrentMediaTime() + (double)(index * animationDuration) / (double)pulsingCount;
        animationGroup.duration = animationDuration;
        animationGroup.repeatCount = HUGE;
        animationGroup.animations = array;
        animationGroup.removedOnCompletion = NO;
         
        // 添加动画曲线。关于其他的动画曲线，也可以自行尝试
        animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
        return animationGroup;
    }
    ... ...

    如果需要点扩散，那就设置 frame 极小，同时扩散倍数增大即可。

    将动画View垫在另一个圆形View之下即可实现最上方的效果。关闭背景色，重调边框色和边框宽度即可实现第二种效果。
  • 相关阅读:
    PHP中的类函数和类对象
    PHP魔术方法__clone()篇
    PHP魔术方法__tostring()篇
    PHP魔术方法__call()篇
    自己写的PHP的mql类
    PHP的分页
    ThinkPHP的调用css,js和图片的路径
    JavaScript作用域链
    在Eclipse中开发WEB项目
    eclipse官方网址、各个版本的下载
  • 原文地址：https://www.cnblogs.com/LifeTechnologySupporter/p/8661531.html
Copyright © 2011-2022 走看看