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

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

#import "ViewController.h"

@interface ViewController ()
@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 *)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开发系列--让你的应用“动”起来