• iOS开发CABasicAnimation动画理解


    1、CALayer简介

    CALayer是个与UIView很类似的概念,同样有backgroundColor、frame等相似的属性,我们可以将UIView看做一种特殊的CALayer。但实际上UIView是对CALayer封装,在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。
    我们同样可以跟新建view一样新建一个layer,然后添加到某个已有的layer上,同样可以对layer调整大小、位置、透明度等。
    一般来说,layer可以有两种用途:一是对view相关属性的设置,包括圆角、阴影、边框等参数;二是实现对view的动画操控。因此对一个view进行动画,本质上是对该view的.layer进行动画操纵。

    2.CAAnimation的分类

    (1) CABasicAnimation

    基础动画,通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation

    (2) CAKeyframeAnimation
    关键帧动画

    (3) CAAnimationGroup
    组动画,支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行

    基本动画代码:

        /**创建CALayer*/
        CALayer * testLayer = [[CALayer alloc] init];
        testLayer.backgroundColor = [UIColor greenColor].CGColor;
        testLayer.frame = CGRectMake(100, 100, 100, 100);
        testLayer.cornerRadius = 10;
        [self.view.layer addSublayer:testLayer];
        /**创建动画*/
        CABasicAnimation * testAnimiation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        testAnimiation.fromValue = [NSNumber numberWithFloat:1.0];
        testAnimiation.toValue = [NSNumber numberWithFloat:1.5];
        testAnimiation.autoreverses = YES;
        testAnimiation.fillMode = kCAFillModeBackwards;
        testAnimiation.removedOnCompletion = NO;
        testAnimiation.repeatCount = MAXFLOAT;
        testAnimiation.duration = 1;
        [testLayer addAnimation:testAnimiation forKey:@"testAnimiation"];

    参数解释:

    1.animationWithKeyPath的值如下:

    anchorPoint 
    backgroundColor 
    backgroundFilters 
    borderColor 
    borderWidth 
    bounds 
    compositingFilter 
    contents 
    contentsRect 
    cornerRadius 
    doubleSided 
    filters 
    frame :This property is not animatable. You can achieve the same results by animating theboundsandpositionproperties. 
    hidden 
    mask 
    masksToBounds 
    opacity 
    position 
    shadowColor 
    shadowOffset 
    shadowOpacity 
    shadowPath 
    shadowRadius 
    sublayers 
    sublayerTransform 
    transform 翻转包含scale rotation 
    zPosition

    大部分我们常用的是:

    transform.scale = 比例缩放动画 
    transform.scale.x = 宽的比例动画 
    transform.scale.y = 高的比例动画 
    transform.rotation.z = 平面的旋转 
    opacity = 透明度

    2.fromValue: 动画的起始状态值,虽然iOS文档给出的类型是id,不过这里应该传NSValue对象,比如NSNumber(NSNubmer继承自NSValue)。其具体含义

    3.autoreverse: 当动画执行到toValue指定的状态时是从toValue的状态逆回去,还是直接跳到fromValue的状态再执行一遍

    4.fileMode: fillMode的作用就是决定当前对象过了非active时间段的行为. 非active时间段是指动画开始之前以及动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用. 下面来讲各个fillMode的意义:

    kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态

    kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态

    kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态。因为有可能出现fromValue不是目前layer的初始状态的情况,如果fromValue就是layer当前的状态,则这个参数就没太大意义。

    kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

    CAAnimationGroup实现动画

     /**创建CALayer*/
    //    CALayer * testLayer = [[CALayer alloc] init];
    //    testLayer.backgroundColor = [UIColor greenColor].CGColor;
    //    testLayer.frame = CGRectMake(100, 100, 100, 100);
    //    testLayer.cornerRadius = 10;
    //    [self.view.layer addSublayer:testLayer];
        UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
        label.backgroundColor = [UIColor greenColor];
        [self.view addSubview:label];
        /**创建动画*/
        /**缩放*/
        CABasicAnimation * testAnimiation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        testAnimiation.fromValue = [NSNumber numberWithFloat:1.0];
        testAnimiation.toValue = [NSNumber numberWithFloat:1.5];
        testAnimiation.autoreverses = YES;
        testAnimiation.fillMode = kCAFillModeBackwards;
        testAnimiation.removedOnCompletion = NO;
        testAnimiation.repeatCount = MAXFLOAT;
        testAnimiation.duration = 1;
    //    [label.layer addAnimation:testAnimiation forKey:@"testAnimiation"];
        /**移动*/
        CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
        moveAnimation.fromValue = [NSValue valueWithCGPoint:label.layer.position];
        moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80, label.layer.position.y)];
        moveAnimation.autoreverses = YES;
        moveAnimation.repeatCount = MAXFLOAT;
        moveAnimation.duration = 2;
        /**旋转*/
        CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
        rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
        rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];
        rotateAnimation.autoreverses = YES;
        rotateAnimation.repeatCount = MAXFLOAT;
        rotateAnimation.duration = 2;
        /**动画组合*/
        CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
        groupAnnimation.duration = 2;
        groupAnnimation.autoreverses = YES;
        groupAnnimation.animations = @[moveAnimation, testAnimiation, rotateAnimation];
        groupAnnimation.repeatCount = MAXFLOAT;
        
        [label.layer addAnimation:groupAnnimation forKey:@"groupAnnimation"];
  • 相关阅读:
    js图片轮换
    PHP如何打造一个高可用高性能的网站呢?
    php中浮点数计算问题
    jQuery ajax()使用serialize()提交form数据
    js最新手机号码、电话号码正则表达式
    swoole是如何实现任务定时自动化调度的?
    Facebook的“零售吸引力”,互联网营销 狼人:
    Google勇敢新世界,互联网营销 狼人:
    Facebook的成功之道,互联网营销 狼人:
    李彦宏分享百度危机中如何“弯道超车”,互联网营销 狼人:
  • 原文地址:https://www.cnblogs.com/WJJ-Dream/p/5799025.html
Copyright © 2020-2023  润新知