核心動畫——CAAnimation,核心caanimation

來源:互聯網
上載者:User

核心動畫——CAAnimation,核心caanimation

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<UITouch *> *)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<UITouch *> *)touches withEvent:(UIEvent *)event{        //layer.opacity = 1;    self.pointLayer.transform = CATransform3DIdentity;    }@end

效果如下:

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.