IOS動畫與繪圖

目錄:UIView動畫 子視圖翻轉動畫

UIImageView動畫
CATransition動畫
Core Graphics繪圖:(線、矩形、曲

線、文字、圖片)

CALayer

       核心動畫:(關鍵幀動畫、
            單一動畫、

組動畫)


1.UIView動畫

(1)設置代理(viewController)

動畫開始: beginAnimations

設置動畫加減速方式: setAnimationCurve

設置持續時長: setAnimationDuration

設置動畫重複次數: setAnimationRepeatCount

設置動畫是否做反向操作: setAnimationRepeatAutoreverses:YES

設置視圖的變化,提交動畫 :[UIView commitAnimations];


(2)Block動畫

eg:

[UIView animateWithDuration:2

                     animations:^{

                        baseView.alpha = 0;

                     } completion:^(BOOL finished) {

                         NSLog(@"end");

                     }];


2.UIImage動畫

①創建 UIImageView對象

②創建一個數組,存放多個UIImage對象

③爲UIImageView對象設置動畫數組:imgView.animationImagesmArr;

④設置時長,開始動畫:startAnimating


3.CATransition動畫

①創建 CATransition對象

②設置對象屬性(時長Duration、速率TimingFunction、類型type、方向subType)

類型有私有API:

//    animation.type = @"cube"             //立方體效果

//    animation.type = @"suckEffect"       //收縮效果,如一塊布被抽走
//    animation.type = @"oglFlip"          //翻轉效果
//    animation.type = @"rippleEffect"     //滴水效果
//    animation.type = @"pageCurl"         //向上翻一頁

//    animation.type = @"pageUnCurl"       //向下翻一頁


③爲UIView對象添加動畫,添加到它的Layer上

爲導航欄添加動畫(立方體旋轉效果)

[self.navigationController.view.layer addAnimation:transition forKey:@"animation"];


4.繪圖

調用父類方法,程序運行時自動調用

- (void)drawRect:(CGRect)rect{   

    [super drawRect:rect];

繪畫不同圖形,都需要先獲取畫布

//圖像上下文,獲取畫布,他是一個結構體指針

    CGContextRef context = UIGraphicsGetCurrentContext();

都可以設置畫筆屬性:

//設置虛線
   
CGFloat arr[] = {10,5};
   
CGContextSetLineDash(context, 0, arr, 2);
   
   
//設置畫筆的寬度
   
CGContextSetLineWidth(context, 2);
   
   
//設置畫筆顏色
   
CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor);
   
   
//設置填充色

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);

最後都要保存,添加到畫布

    //保存路徑,添加繪圖
   
CGContextDrawPath(context, kCGPathEOFillStroke);

(1)畫直線

//獲取畫筆,設置起點
   
CGContextMoveToPoint(context, 20, 20);
   
   
//移動畫筆(可多次移動,連接成不同圖形)

    CGContextAddLineToPoint(context, 220, 20);

(2)畫矩形

//繪製矩形

    CGContextAddRect(context, CGRectMake(20, 20, 100, 100));

(3)畫曲線

//    //繪製貝塞爾曲線1
//    CGContextMoveToPoint(context, 10, 100);

//    CGContextAddCurveToPoint(context, 55, 0, 145, 200, 200, 100);

//    //繪製貝塞爾曲線2
//    CGContextMoveToPoint(context, 10, 200);
//    CGContextAddQuadCurveToPoint(context, 105, 0,200, 200)  ;

   

//繪製扇形

    CGContextAddArc(context, 100, 100, 100, arc(90), arc(0), 1);


(4)畫圖像(Image)

可使用PrintCode軟件畫,自動生成代碼,粘貼過去


5.繪製陰影

創建UIView對象

設置圓角(必須是layer層)

////    view.layer.cornerRadius = 10;

////    view.layer.masksToBounds = YES;

***設置圓角時不會顯示陰影

可以設置邊框,陰影顏色( view.layer.shadowColor)、陰影透明度( view.layer.shadowOpacity)、圖片( view.layer.contents

6.關鍵幀動畫

創建路徑,在路徑上添加運動軌跡

//路徑
   
CGMutablePathRef path = CGPathCreateMutable();
   
   
//爲路徑添加一個運動軌跡

    CGPathAddRect(path, nil, CGRectMake(10, 10, 200, 200));

創建關鍵幀動畫

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

設置動畫的加減速方式、時長、重複次數、路徑( animation.path = path;

創建單一動畫 CABasicAnimation對象,旋轉

basicAnimation.fromValue = @0;

    basicAnimation.toValue = @(2 * M_PI);



設置組動畫,可以將上面創建的關鍵幀動畫和單一動畫添加進去,如下,實現兩種動畫同時進行

//組動畫
   
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
   
   
//往組裏添加兩個動畫
    animationGroup.
animations = @[animation,basicAnimation];
   
    animationGroup.
duration = 2;
    animationGroup.
repeatCount = 1000;
   
    [
lView.layer addAnimation:animationGroup forKey:@"animationGroup"];



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章