博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
核心动画——CAAnimation
阅读量:7124 次
发布时间:2019-06-28

本文共 6323 字,大约阅读时间需要 21 分钟。

1.什么是核心动画?

核心动画——CAAnimation,采用了CAMediaTiming协议,可以调整时间,包括持续时间,速度,重复次数;采用了CAAction协议,可以通过响应动作的方式来显示动画,CAAnimation又分为隐式动画和显示动画。

CAAnimation的一些派生类:

CAPropertyAnimation:属性动画,通过改变属性值产生动画效果

   <1>CABasicAnimation:基础动画,只能是两个点之间的变化 提供了对单一动画的实现

     CASpringAnimation:弹簧动画 (弹动效果)

   <2>CAKeyframeAnimation:关键帧动画, 可以添加多个点的变化或者添加路径可以定义行动路线

CAAnimationGroup:动画组,可以同时添加多种动画达到预期效果

CATransition:转场动画, 给视图切换的时候添加动画效

下面给大家画一个结构图,可以让大家更容易的了解

 CALayer:图层 隐式动画

 UIView:视图 可以跟用户交互,rootLayer 发生改变子图层也会发生改变,rootLayer没有动画效果

 CALayer: 不可以跟用户交互 只能显示内容,当发生改变子图层不会跟随发生改变,本身自带动画效果(改变属性效果的时候),属于隐式动画 

 CALayer可以设置的属性

 @property CGRect bounds;边境范围

 @property CGPoint position;中心点

 @property CGFloat zPosition;z轴中心点

 @property CGPoint anchorPoint;anchorPoint 锚点   

 @property CGFloat anchorPointZ;Z轴锚点

 @property CATransform3D transform;转换形态

 @property CGRect frame;NO. Animatable 坐标

 @property(getter=isHidden) BOOL hidden;隐藏

 @property(getter=isDoubleSided) BOOL doubleSided;图层背面是否显示

 @property(getter=isGeometryFlipped) BOOL geometryFlipped;翻转 颠倒

 @property BOOL masksToBounds;裁切边境

 @property(nullable, strong) id contents;内容

 @property(getter=isOpaque) BOOL opaque;不透明度

 @property BOOL allowsEdgeAntialiasing;是否使用 变形后的抗锯齿

 @property(nullable) CGColorRef backgroundColor;背景颜色

 @property CGFloat borderWidth;边框宽

 @property(nullable) CGColorRef borderColor;边框颜色

 @property float opacity;不透明度

 @property(nullable) CGColorRef shadowColor;阴影颜色

 @property float shadowOpacity;阴影不透明度

 @property CGFloat rasterizationScale;防止Retina屏幕像素化

 @property CGSize shadowOffset;阴影偏移量

 @property CGFloat shadowRadius;阴影的半径

 ✮✮锚点的最大值是1,1 最小值是0,0 默认值是0.5,0.5当视图改变的时候是以锚点为基点去改变的

 锚点的值与位置 

   0,0 = 在图层的左上角  

   0,1 = 图层的左下角  

   1,0 = 图层的右上角

   1,1 = 在图层的右下角 

 锚点的计算公式:锚点值 = 锚点在视图上的位置.x.y/视图的宽高

下面就钟表为例介绍一下核心动画:

#import "ViewController.h"#define Angle(a) (a)*M_PI/180#define SAngle 6 //每秒旋转多少度@interface ViewController (){    CALayer *layer;    float s;}@property(nonatomic,strong)CALayer *pointLayer;@property(nonatomic,strong)CALayer *minuteLayer;@property(nonatomic,strong)CALayer *SecondtLayer;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        //**图层不能跟用户交互,不能添加响应事件    //初始化CALayer  addSubLayer:添加到父图层的方法    /*    layer = [CALayer layer];    layer.frame = CGRectMake(0, 0, 100, 100);    layer.cornerRadius = 50;    layer.backgroundColor = [UIColor yellowColor].CGColor;    [self.view.layer addSublayer:layer];    */            UIImageView *image = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width)];    image.image = [UIImage imageNamed:@"biaopan"];    image.contentMode = UIViewContentModeScaleAspectFit;    image.center = self.view.center;    [self.view addSubview:image];            self.SecondtLayer.anchorPoint = CGPointMake(0.5, 0.9);    self.SecondtLayer.contents = (id)[UIImage imageNamed:@"miaozhen"].CGImage;        self.minuteLayer.anchorPoint = CGPointMake(0.5, 0.9);    self.minuteLayer.contents = (id)[UIImage imageNamed:@"fenzhen"].CGImage;        self.pointLayer.anchorPoint = CGPointMake(0.5, 0.9);    //图层上要的是颜色CGColorRef 图片CGImageRef    self.pointLayer.contents = (id)[UIImage imageNamed:@"shizhen"].CGImage;    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(start) userInfo:nil repeats:YES];}- (void)start{        //日历的一个类NSCalendar 获得年月日时分秒    //NSDateComponents 组件        NSCalendar *calendar = [NSCalendar currentCalendar];    ///(NSCalendarUnit)需要的组件  获得哪个日期的组件    NSDateComponents *component = [calendar components:NSCalendarUnitHour|NSCalendarUnitMinute|NSCalendarUnitSecond fromDate:[NSDate date]];        s = component.second*SAngle;    self.SecondtLayer.transform = CATransform3DMakeRotation(Angle(s),0, 0, 1);    self.SecondtLayer.anchorPoint = CGPointMake(0.5, 0.9);    self.SecondtLayer.contents = (id)[UIImage imageNamed:@"miaozhen"].CGImage;        float m = component.minute*SAngle;    self.minuteLayer.transform = CATransform3DMakeRotation(Angle(m),0, 0, 1);    self.minuteLayer.anchorPoint = CGPointMake(0.5, 0.9);    self.minuteLayer.contents = (id)[UIImage imageNamed:@"fenzhen"].CGImage;        float h = component.hour*SAngle;    self.pointLayer.transform = CATransform3DMakeRotation(Angle(h), 0, 0, 1);    self.pointLayer.anchorPoint = CGPointMake(0.5, 0.9);    self.pointLayer.contents = (id)[UIImage imageNamed:@"shizhen"].CGImage;}- (CALayer *)pointLayer{    if (_pointLayer) {        return _pointLayer;    }    _pointLayer = [CALayer layer];    _pointLayer.bounds = CGRectMake(0, 0, 29, 200);    _pointLayer.position = self.view.center;    [self.view.layer addSublayer:_pointLayer];    return _pointLayer;}- (CALayer *)minuteLayer{    if (_minuteLayer) {        return _minuteLayer;    }    _minuteLayer = [CALayer layer];    _minuteLayer.bounds = CGRectMake(0, 0, 21, 210);    _minuteLayer.position = self.view.center;    [self.view.layer addSublayer:_minuteLayer];    return _minuteLayer;}- (CALayer *)SecondtLayer{    if (_SecondtLayer) {        return _SecondtLayer;    }    _SecondtLayer = [CALayer layer];    _SecondtLayer.bounds = CGRectMake(0, 0, 21, 230);    _SecondtLayer.position = self.view.center;    [self.view.layer addSublayer:_SecondtLayer];    return _SecondtLayer;}- (void)touchesBegan:(NSSet
*)touches withEvent:(UIEvent *)event{ /* UITouch *touch = [touches anyObject]; layer.position = [touch locationInView:self.view]; CGFloat width = CGRectGetWidth(layer.bounds)!= 100?100:25; layer.bounds = CGRectMake(0, 0, width, width); CGColorRef color = [UIColor lightGrayColor].CGColor != layer.backgroundColor?[UIColor lightGrayColor].CGColor:[UIColor yellowColor].CGColor; layer.backgroundColor = color; layer.shadowColor = [UIColor blackColor].CGColor; layer.geometryFlipped = YES; layer.cornerRadius = layer.cornerRadius != 50?50:0; //图层的透明度 layer.opacity = 0; */ //緢点 self.SecondtLayer.transform = CATransform3DMakeRotation(Angle(Angle(60)), 0, 0, 1); self.minuteLayer.transform = CATransform3DMakeRotation(Angle(s/60), 0, 0, 1); self.pointLayer.transform = CATransform3DMakeRotation(Angle(s/360), 0, 0, 1); }- (void)touchesEnded:(NSSet
*)touches withEvent:(UIEvent *)event{ //layer.opacity = 1; self.pointLayer.transform = CATransform3DIdentity; }@end

效果如下:

 

转载于:https://www.cnblogs.com/chengy134/p/5396181.html

你可能感兴趣的文章
Vue / keep-alive使用
查看>>
SQL学习之使用常用函数处理数据
查看>>
JavaScript之面向对象学九(原型式继承和寄生式继承)
查看>>
memcached(五)--源码分析,启动
查看>>
实践2
查看>>
Shell命令_smem
查看>>
CHUI类
查看>>
C++ sizeof的内存计算(2)
查看>>
《构建之法》阅读笔记3
查看>>
python练习题总结
查看>>
多线程编程之保护性暂挂模式
查看>>
传统的Web开发技术和Ajax技术有什么区别?
查看>>
Linux Shell 编程学习笔记
查看>>
Python基础之基本数据类型
查看>>
Debian升级
查看>>
Git之忽略文件(ignore file)
查看>>
mysql-8.0.11-winx64安装
查看>>
你最喜欢做什么--兴趣问题清单
查看>>
P1379 八数码难题
查看>>
核心动画中的几种layer
查看>>