zoukankan      html  css  js  c++  java
  • ios核心动画(基础动画)

    一、简单介绍

    CAPropertyAnimation的子类

    属性解析:

    fromValue:keyPath相应属性的初始值

    toValue:keyPath相应属性的结束值

    随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue

    如果fillMode=kCAFillModeForwards和removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态。但在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。

    比如,CALayer的position初始值为(0,0),CABasicAnimation的fromValue为(10,10),toValue为(100,100),虽然动画执行完毕后图层保持在(100,100)这个位置,实质上图层的position还是为(0,0)

    二、平移动画

    代码示例:

    复制代码
     1 //
     2 //  YYViewController.m
     3 //  07-核心动画(基础动画)
     4 //
     5 //  Created by apple on 14-6-21.
     6 //  Copyright (c) 2014年 itcase. All rights reserved.
     7 //
     8 
     9 #import "YYViewController.h"
    10 
    11 @interface YYViewController ()
    12 @property(nonatomic,strong)CALayer *myLayer;
    13 @end
    14 
    15 @implementation YYViewController
    16 
    17 - (void)viewDidLoad
    18 {
    19     [super viewDidLoad];
    20     
    21     //创建layer
    22     CALayer *myLayer=[CALayer layer];
    23     //设置layer的属性
    24     myLayer.bounds=CGRectMake(0, 0, 50, 80);
    25     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    26     myLayer.position=CGPointMake(50, 50);
    27     myLayer.anchorPoint=CGPointMake(0, 0);
    28     myLayer.cornerRadius=20;
    29     //添加layer
    30     [self.view.layer addSublayer:myLayer];
    31     self.myLayer=myLayer;
    32 }
    33 
    34 //设置动画(基础动画)
    35 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    36 {
    37     //1.创建核心动画
    38     //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
    39     CABasicAnimation *anima=[CABasicAnimation animation];
    40     
    41     //1.1告诉系统要执行什么样的动画
    42     anima.keyPath=@"position";
    43     //设置通过动画,将layer从哪儿移动到哪儿
    44     anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
    45     anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
    46     
    47     //1.2设置动画执行完毕之后不删除动画
    48     anima.removedOnCompletion=NO;
    49     //1.3设置保存动画的最新状态
    50     anima.fillMode=kCAFillModeForwards;
    51 
    52     //2.添加核心动画到layer
    53     [self.myLayer addAnimation:anima forKey:nil];
    54 
    55 }
      @end
    复制代码

    代码说明:

     第42行设置的keyPath是@"position",说明要修改的是CALayer的position属性,也就是会执行平移动画

     第44,45行,这里的属性接收的时id类型的参数,因此并不能直接使用CGPoint这种结构体类型,而是要先包装成NSValue对象后再使用。

     默认情况下,动画执行完毕后,动画会自动从CALayer上移除,CALayer又会回到原来的状态。为了保持动画执行后的状态,可以加入第48,50行代码

    byValue和toValue的区别,前者是在当前的位置上增加多少,后者是到指定的位置。

    执行效果:

      

    设置代理:设置动画的代理,可以监听动画的执行过程,这里设置控制器为代理。

    代码示例:

    复制代码
     1 #import "YYViewController.h"
     2 
     3 @interface YYViewController ()
     4 @property(nonatomic,strong)CALayer *myLayer;
     5 @end
     6 
     7 @implementation YYViewController
     8 
     9 - (void)viewDidLoad
    10 {
    11     [super viewDidLoad];
    12     
    13     //创建layer
    14     CALayer *myLayer=[CALayer layer];
    15     //设置layer的属性
    16     myLayer.bounds=CGRectMake(0, 0, 50, 80);
    17     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    18     myLayer.position=CGPointMake(50, 50);
    19     myLayer.anchorPoint=CGPointMake(0, 0);
    20     myLayer.cornerRadius=20;
    21     //添加layer
    22     [self.view.layer addSublayer:myLayer];
    23     self.myLayer=myLayer;
    24 }
    25 
    26 //设置动画(基础动画)
    27 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    28 {
    29     //1.创建核心动画
    30     //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
    31     CABasicAnimation *anima=[CABasicAnimation animation];
    32     
    33     //1.1告诉系统要执行什么样的动画
    34     anima.keyPath=@"position";
    35     //设置通过动画,将layer从哪儿移动到哪儿
    36     anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
    37     anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
    38     
    39     //1.2设置动画执行完毕之后不删除动画
    40     anima.removedOnCompletion=NO;
    41     //1.3设置保存动画的最新状态
    42     anima.fillMode=kCAFillModeForwards;
    43     anima.delegate=self;
    44     //打印
    45     NSString *str=NSStringFromCGPoint(self.myLayer.position);
    46     NSLog(@"执行前:%@",str);
    47     
    48     //2.添加核心动画到layer
    49     [self.myLayer addAnimation:anima forKey:nil];
    50 
    51 }
    52 
    53 -(void)animationDidStart:(CAAnimation *)anim
    54 {
    55     NSLog(@"开始执行动画");
    56 }
    57 
    58 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
    59 {
    60     //动画执行完毕,打印执行完毕后的position值
    61     NSString *str=NSStringFromCGPoint(self.myLayer.position);
    62     NSLog(@"执行后:%@",str);
    63 }
    64 
    65 @end
    复制代码

    打印position的属性值,验证图层的属性值还是动画执行前的初始值{50,50},并没有真正被改变为{200,300}。

    三、缩放动画

    实现缩放动画的代码示例:

    复制代码
     1 //
     2 //  YYViewController.m
     3 //  08-核心动画平移
     4 //
     5 //  Created by apple on 14-6-21.
     6 //  Copyright (c) 2014年 itcase. All rights reserved.
     7 //
     8 
     9 #import "YYViewController.h"
    10 
    11 @interface YYViewController ()
    12 @property(nonatomic,strong)CALayer *myLayer;
    13 @end
    14 
    15 @implementation YYViewController
    16 
    17 - (void)viewDidLoad
    18 {
    19     [super viewDidLoad];
    20     
    21     //创建layer
    22     CALayer *myLayer=[CALayer layer];
    23     //设置layer的属性
    24     myLayer.bounds=CGRectMake(0, 0, 150, 60);
    25     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    26     myLayer.position=CGPointMake(50, 50);
    27     myLayer.anchorPoint=CGPointMake(0, 0);
    28     myLayer.cornerRadius=40;
    29     //添加layer
    30     [self.view.layer addSublayer:myLayer];
    31     self.myLayer=myLayer;
    32 }
    33 
    34 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    35 {
    36     //1.创建动画
    37     CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];
    38     //1.1设置动画执行时间
    39     anima.duration=2.0;
    40     //1.2设置动画执行完毕后不删除动画
    41     anima.removedOnCompletion=NO;
    42     //1.3设置保存动画的最新状态
    43     anima.fillMode=kCAFillModeForwards;
    44     //1.4修改属性,执行动画
    45     anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
    46     //2.添加动画到layer
    47     [self.myLayer addAnimation:anima forKey:nil];
    48 }
    49 
    50 @end
    复制代码

    实现效果:

      

    四、旋转动画

    代码示例:

    复制代码
     1 //
     2 //  YYViewController.m
     3 //  09-核心动画旋转
     4 //
     5 //  Created by apple on 14-6-21.
     6 //  Copyright (c) 2014年 itcase. All rights reserved.
     7 //
     8 
     9 #import "YYViewController.h"
    10 
    11 @interface YYViewController ()
    12 @property(nonatomic,strong)CALayer *myLayer;
    13 @end
    14 
    15 @implementation YYViewController
    16 - (void)viewDidLoad
    17 {
    18     [super viewDidLoad];
    19     
    20     //创建layer
    21     CALayer *myLayer=[CALayer layer];
    22     //设置layer的属性
    23     myLayer.bounds=CGRectMake(0, 0, 150, 60);
    24     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    25     myLayer.position=CGPointMake(50, 50);
    26     myLayer.anchorPoint=CGPointMake(0, 0);
    27     myLayer.cornerRadius=40;
    28     //添加layer
    29     [self.view.layer addSublayer:myLayer];
    30     self.myLayer=myLayer;
    31 }
    32 
    33 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    34 {
    35     //1.创建动画
    36     CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"transform"];
    37     //1.1设置动画执行时间
    38     anima.duration=2.0;
    39     //1.2修改属性,执行动画
    40     anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];
    41     //1.3设置动画执行完毕后不删除动画
    42     anima.removedOnCompletion=NO;
    43     //1.4设置保存动画的最新状态
    44     anima.fillMode=kCAFillModeForwards;
    45     
    46     //2.添加动画到layer
    47     [self.myLayer addAnimation:anima forKey:nil];
    48 }
    49 @end
    复制代码

    实现效果:

       

    提示:如果要让图形以2D的方式旋转,只需要把CATransform3DMakeRotation在z方向上的值改为1即可。

    anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];

    四、补充

    可以通过transform(KVC)的方式来进行设置。

    代码示例(平移):

    复制代码
     1 #import "YYViewController.h"
     2 
     3 @interface YYViewController ()
     4 @property(nonatomic,strong)CALayer *myLayer;
     5 @end
     6 
     7 @implementation YYViewController
     8 - (void)viewDidLoad
     9 {
    10     [super viewDidLoad];
    11     
    12     //创建layer
    13     CALayer *myLayer=[CALayer layer];
    14     //设置layer的属性
    15     myLayer.bounds=CGRectMake(0, 0, 150, 60);
    16     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    17     myLayer.position=CGPointMake(50, 50);
    18     myLayer.anchorPoint=CGPointMake(0, 0);
    19     myLayer.cornerRadius=40;
    20     //添加layer
    21     [self.view.layer addSublayer:myLayer];
    22     self.myLayer=myLayer;
    23 }
    24 
    25 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    26 {
    27     //1.创建动画
    28     CABasicAnimation *anima=[CABasicAnimation animation];
    29     anima.keyPath=@"transform";
    30     //1.1设置动画执行时间
    31     anima.duration=2.0;
    32     //1.2修改属性,执行动画
    33   
    34     anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];
    35     //1.3设置动画执行完毕后不删除动画
    36     anima.removedOnCompletion=NO;
    37     //1.4设置保存动画的最新状态
    38     anima.fillMode=kCAFillModeForwards;
    39     
    40     //2.添加动画到layer
    41     [self.myLayer addAnimation:anima forKey:nil];
    42 }
    复制代码

    实现效果:

    绘制的图形在y的方向上移动100个单位。

        

     
     
  • 相关阅读:
    XML错误信息Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-4.0.xsd). For more information, right click on the message in the Problems View ...
    Description Resource Path Location Type Cannot change version of project facet Dynamic Web Module to 2.3.
    maven创建web报错Cannot read lifecycle mapping metadata for artifact org.apache.maven.plugins:maven-compiler-plugin:maven-compiler-plugin:3.5.1:runtime Cause: error in opening zip file
    AJAX跨域
    JavaWeb学习总结(转载)
    JDBC学习笔记
    Java动态代理之JDK实现和CGlib实现
    (转)看懂UML类图
    spring boot配置使用fastjson
    python3下django连接mysql数据库
  • 原文地址:https://www.cnblogs.com/allencelee/p/4991918.html
Copyright © 2011-2022 走看看