iOS UIView Block 动画- (基础动画, 关键帧动画, 动画组)

1、UIView本身对于基本动画和关键帧动画、转场动画都有相应的封装,在对动画细节没有特殊要求的情况下使用起来也要简单的多

#import "ViewController.h"

@interface ViewController ()<CAAnimationDelegate>
@property(nonatomic, strong) UIImageView *firstImgView;
@property(nonatomic, strong) UIImageView * secondImgView;
@property(nonatomic, strong) UIImageView * receiveImgView;
@property(nonatomic, strong) UILabel * titleLab;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    _firstImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 240*0.8, 295*0.8)];
    _firstImgView.center = self.view.center;
    _firstImgView.image = [UIImage imageNamed:@"2.png"];
    _firstImgView.alpha = 0.0;
    [self.view addSubview:_firstImgView];
    
    
    _secondImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 240*0.8, 295*0.8)];
    _secondImgView.center = self.view.center;
    _secondImgView.image = [UIImage imageNamed:@"1.png"];
    _secondImgView.hidden = YES;
    [self.view addSubview:_secondImgView];
    
    _titleLab = [[UILabel alloc] initWithFrame:CGRectMake(0, 40, 240*0.8, 30*0.8)];
    _titleLab.textAlignment = NSTextAlignmentCenter;
    _titleLab.text = @"恭喜获得15张试聊卡!";
//    _titleLab.font = [UIFont systemFontOfSize:18];
     [_titleLab setAdjustsFontSizeToFitWidth:YES];
   _titleLab.adjustsFontSizeToFitWidth = YES;
   _titleLab.baselineAdjustment = UIBaselineAdjustmentAlignCenters;
    _titleLab.textColor = [UIColor whiteColor];
    [_secondImgView addSubview:_titleLab];

    
    CGFloat x = _secondImgView.center.x;
    CGFloat y = CGRectGetMaxY(_secondImgView.bounds) +100 +_secondImgView.bounds.size.height ;
    _receiveImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 180, 48)];
    _receiveImgView.center = CGPointMake(x, y);
    _receiveImgView.image = [UIImage imageNamed:@"3.png"];
    _receiveImgView.alpha = 0.0;
    [self.view addSubview:_receiveImgView];
    
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

    
    // 设置透视变换矩阵
    CATransform3D perspectiveTransform = CATransform3DIdentity;
    perspectiveTransform.m34 = -1.f/700;
    // 绕y轴旋转π
    CATransform3D transform = CATransform3DRotate(perspectiveTransform, M_PI, 0, 1, 0);

    CABasicAnimation * animation_1 = [CABasicAnimation animation];
    animation_1.keyPath = @"transform";
    animation_1.duration = 0.083;
    animation_1.removedOnCompletion = NO;
    animation_1.fillMode = kCAFillModeForwards;
    animation_1.repeatCount = 10;
    animation_1.toValue = [NSValue valueWithCATransform3D:transform];

    [_firstImgView.layer addAnimation:animation_1 forKey:@"animation_1"];
    
    
   NSTimer *timer = [NSTimer timerWithTimeInterval:0.83 repeats:NO block:^(NSTimer * _Nonnull timer) {
       [_firstImgView.layer removeAnimationForKey:@"animation_1"];
       CABasicAnimation * animation_2 = [CABasicAnimation animation];
       animation_2.keyPath = @"transform";
       animation_2.duration = 0.21;
       animation_2.removedOnCompletion = NO;
       animation_2.fillMode = kCAFillModeForwards;
       animation_2.repeatCount = 2;
       animation_2.toValue = [NSValue valueWithCATransform3D:transform];
       [_firstImgView.layer addAnimation:animation_2 forKey:@"animation_2"];
   }];
   [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];

    [UIView animateKeyframesWithDuration:1.25 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.2 animations:^{
            _firstImgView.alpha = 1.0f;
        }];

    } completion:^(BOOL finish){
        [_firstImgView.layer removeAllAnimations];
        [_firstImgView removeFromSuperview];
        [self animateSeconde];
    }];


}

- (void)animateSeconde {
    _secondImgView.hidden = NO;
    CABasicAnimation * animation = [CABasicAnimation animation];
    animation.keyPath = @"transform";
    animation.duration = 0.25;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.repeatCount = 4;
    

    // 设置透视变换矩阵
    CATransform3D perspectiveTransform = CATransform3DIdentity;
    perspectiveTransform.m34 = -1.f/700;
    // 将透视变换复合到旋转变换中
    // 绕y轴旋转π
    CATransform3D transform = CATransform3DRotate(perspectiveTransform, M_PI, 0, 1, 0);

    animation.toValue = [NSValue valueWithCATransform3D:transform];
    [_secondImgView.layer addAnimation:animation forKey:@"secondLayer"];
//    [lab.layer addAnimation:animation forKey:@"secondLayer"];

    
    NSTimer *timer = [NSTimer timerWithTimeInterval:1.0 repeats:NO block:^(NSTimer * _Nonnull timer) {
        [_secondImgView.layer removeAnimationForKey:@"secondLayer"];
   
        [UIView animateKeyframesWithDuration:1.0 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{

            [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.125 animations:^{
                _secondImgView.transform = CGAffineTransformMakeScale(1.5, 1.5);

            }];
            [UIView addKeyframeWithRelativeStartTime:0.875 relativeDuration:0.875 animations:^{
                _secondImgView.transform = CGAffineTransformMakeScale(1.25, 1.25);

                
               
            }];
        } completion:^(BOOL finish){
             _receiveImgView.alpha = 1.0;
        }];
    }];
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];


}

@end

获得卡牌.gif

2、贝塞尔曲线

- (void)circleAnimationTypeOne
{
    
    //创建出CAShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = self.rect;
    self.shapeLayer.fillColor = [UIColor whiteColor].CGColor;
    
    //设置线条的宽度和颜色
    self.shapeLayer.lineWidth = self.lineWidth;
    self.shapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;
    
    
    //创建出圆形贝塞尔曲线
    
    UIBezierPath* circlePath=[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.rect.size.width / 2, self.rect.size.height / 2 )radius:self.rect.size.height / 2 startAngle:M_PI_2 endAngle:2.5*M_PI  clockwise:YES];

    
    //让贝塞尔曲线与CAShapeLayer产生联系
    self.shapeLayer.path = circlePath.CGPath;
    
    //添加并显示
    [self.layer addSublayer:self.shapeLayer];
    
    
    
    
    
    UIBezierPath* circlePath2=[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.rect.size.width / 2, self.rect.size.height / 2 )radius:self.rect.size.height / 2 startAngle:M_PI_2 endAngle:2*M_PI*_haveFinished+M_PI_2 clockwise:YES];
    
    
    
    //创建出CAShapeLayer
    self.shapeLayer2 = [CAShapeLayer layer];
    self.shapeLayer2.frame = self.rect;
    
    self.shapeLayer2.fillColor = [UIColor clearColor].CGColor;
    
    //设置线条的宽度和颜色
    self.shapeLayer2.lineWidth = self.lineWidth;
    self.shapeLayer2.strokeColor =  kCColor(0,174,239).CGColor;

    
    //让贝塞尔曲线与CAShapeLayer产生联系
    self.shapeLayer2.path = circlePath2.CGPath;
    
    //添加并显示
    [self.layer addSublayer:self.shapeLayer2];
    
    
    UIView* view=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 20, 20)];
    view.center = CGPointMake(self.rect.size.width / 2, self.rect.size.height);
    view.layer.cornerRadius=10;
    view.layer.masksToBounds=YES;
    view.backgroundColor= kCColor(0,174,239);
    _roundView=view;
    [self addSubview:view];
    
}
flowQuery.gif

demo下载:

更多详情请参考:
iOS动画,绝对够分量!
iOS开发系列--让你的应用“动”起来

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容