iOS UIView Block 動(dòng)畫(huà)- (基礎(chǔ)動(dòng)畫(huà), 關(guān)鍵幀動(dòng)畫(huà), 動(dòng)畫(huà)組)

1、UIView本身對(duì)于基本動(dòng)畫(huà)和關(guān)鍵幀動(dòng)畫(huà)、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)都有相應(yīng)的封裝,在對(duì)動(dòng)畫(huà)細(xì)節(jié)沒(méi)有特殊要求的情況下使用起來(lái)也要簡(jiǎn)單的多

#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張?jiān)嚵目?";
//    _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
{

    
    // 設(shè)置透視變換矩陣
    CATransform3D perspectiveTransform = CATransform3DIdentity;
    perspectiveTransform.m34 = -1.f/700;
    // 繞y軸旋轉(zhuǎn)π
    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;
    

    // 設(shè)置透視變換矩陣
    CATransform3D perspectiveTransform = CATransform3DIdentity;
    perspectiveTransform.m34 = -1.f/700;
    // 將透視變換復(fù)合到旋轉(zhuǎn)變換中
    // 繞y軸旋轉(zhuǎn)π
    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
{
    
    //創(chuàng)建出CAShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = self.rect;
    self.shapeLayer.fillColor = [UIColor whiteColor].CGColor;
    
    //設(shè)置線條的寬度和顏色
    self.shapeLayer.lineWidth = self.lineWidth;
    self.shapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;
    
    
    //創(chuàng)建出圓形貝塞爾曲線
    
    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產(chǎn)生聯(lián)系
    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];
    
    
    
    //創(chuàng)建出CAShapeLayer
    self.shapeLayer2 = [CAShapeLayer layer];
    self.shapeLayer2.frame = self.rect;
    
    self.shapeLayer2.fillColor = [UIColor clearColor].CGColor;
    
    //設(shè)置線條的寬度和顏色
    self.shapeLayer2.lineWidth = self.lineWidth;
    self.shapeLayer2.strokeColor =  kCColor(0,174,239).CGColor;

    
    //讓貝塞爾曲線與CAShapeLayer產(chǎn)生聯(lián)系
    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下載:

更多詳情請(qǐng)參考:
iOS動(dòng)畫(huà),絕對(duì)夠分量!
iOS開(kāi)發(fā)系列--讓你的應(yīng)用“動(dòng)”起來(lái)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容