分享六

IOS绘图与动画

1、UIView设置动画

  view =[[ UIView alloc ] initWithFrame : CGRectMake ( 100 , 100 , 200 , 200 )];
    [ self . view addSubview : view ];
    view . backgroundColor =[ UIColor magentaColor ];
   
     view . alpha = 1.0 ;
//    [UIView beginAnimations:nil context:nil];
//    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
//    [UIView setAnimationDuration:1];
//    // 设置动画的代理
//    [UIView setAnimationDelegate:self];
//    // 动画的重复次数
//    [UIView setAnimationRepeatCount:2];
//    // 设置动画是否反向执行
//    [UIView setAnimationRepeatAutoreverses:YES];
//   
//    view.alpha=0.0;
//   
//    [UIView animateWithDuration:1 animations:^{
//        view.alpha=0.0;
//    } completion:^(BOOL finished) {
//        NSLog(@" 酷 ");
//    }];

    // 创建连个 view
    UIView *view1=[[ UIView alloc ] initWithFrame : view . bounds ];
    view1. backgroundColor =[ UIColor redColor ];
    [ view addSubview :view1];
   
    UIView *view2=[[ UIView alloc ] initWithFrame : view . bounds ];
    view2. backgroundColor =[ UIColor orangeColor ];
    [ view addSubview :view2];
   
   
    // 创建图片动画
    UIImageView *imgView=[[ UIImageView alloc ] initWithFrame : CGRectMake ( 100 , 300 , 100 , 100 )];
    [ self . view addSubview :imgView];
    NSMutableArray *imgArray=[ NSMutableArray array ];
    for ( int i = 0 ; i < 17 ; i ++) {
        NSString *nameStr=[ NSString stringWithFormat : @"campFire%02d.gif" ,i + 1 ];
        UIImage *image=[ UIImage imageNamed :nameStr];
       
        // 安全判断
        if (image) {
             [imgArray addObject :image];
        }
      
    }
   
   
    //[UIView beginAnimations:nil context:nil];

    imgView. animationImages =imgArray;
   
    imgView. animationDuration = 1 ;
   
    [imgView startAnimating ];
   

   
   
    [ UIView commitAnimations ];
   
   
   }
// 当使用 block 动画的时候代理方法失效
- ( void ) animationWillStart:( NSString *)animationID context:( void *)context{
    NSLog ( @" 动画开始 " );
}

- ( void ) animationDidStop:( NSString *)animationID finished:( NSNumber *)finished context:( void *)context{
    NSLog ( @" 动画结束 " );
}

-( void )touchesBegan:( NSSet *)touches withEvent:( UIEvent *)event{
    [ UIView transitionWithView : view duration : 1 options : UIViewAnimationOptionTransitionCurlDown   animations :^{
        [ view exchangeSubviewAtIndex : 0 withSubviewAtIndex : 1 ];
    } completion :^( BOOL finished) {
        NSLog ( @" 太炫了 " );
    }];
}

2、CATransition动画

- ( void )viewDidLoad {
    [ super viewDidLoad ];
    view =[[ UIView alloc ] initWithFrame : CGRectMake ( 100 , 100 , 200 , 200 )];
    view . backgroundColor =[ UIColor colorWithRed : arc4random () % 10 * 0.1 green : arc4random () % 10 * 0.1 blue : arc4random () % 10 * 0.1 alpha : 1 ];
    [ self . view addSubview : view ];
   
    UIView *view1=[[ UIView alloc ] initWithFrame : view . bounds ];
    view1. backgroundColor =[ UIColor colorWithRed : arc4random () % 10 * 0.1 green : arc4random () % 10 * 0.1 blue : arc4random () % 10 * 0.1 alpha : 1 ];
    [ view addSubview :view1];
   
    UIView *view2=[[ UIView alloc ] initWithFrame : view . bounds ];
    view2. backgroundColor =[ UIColor orangeColor ];
    [ view addSubview :view2];
}

-( void )touchesBegan:( NSSet *)touches withEvent:( UIEvent *)event{
   
    // 获取一个动画对象
    CATransition *animation=[ CATransition animation ];
    animation. duration = 1 ;
    // 设置动画的速率
    animation. timingFunction =[ CAMediaTimingFunction functionWithName : kCAMediaTimingFunctionEaseInEaseOut ];
    animation. type = @"cube" ;
    animation. subtype = kCATransitionFromBottom ;
    [ view . layer addAnimation :animation forKey : nil ];
    [ view exchangeSubviewAtIndex : 0 withSubviewAtIndex : 1 ];

}

3、绘制线条

- ( void )drawRect:( CGRect )rect{
    // 获取画布
   CGContextRef context = UIGraphicsGetCurrentContext ();
    // 获取画笔
    CGContextMoveToPoint (context, 10 , 10 );
    // 移动画布
    CGContextAddLineToPoint (context, 10 , 100 );

    // 再次移动滑步
     CGContextAddLineToPoint (context, 100 , 100 );
    // 设置画笔的颜色
    CGContextSetStrokeColorWithColor (context, [ UIColor whiteColor ]. CGColor );
    CGContextSetFillColorWithColor (context, [ UIColor redColor ]. CGColor );
    // 设置虚线
    CGFloat array[]={ 10 , 10 };
    CGContextSetLineDash (context, 0 , array, 2 );
   
    // 保存路径，绘制
    CGContextDrawPath (context,   kCGPathFillStroke );

}

知识补充，如何打印视图的rect、bounds

 
    NSLog ( @"rect: %@" , NSStringFromCGRect (rect));
    NSLog ( @"frame: %@" , NSStringFromCGRect ( self . frame ));

    NSLog(@"bounds: %@", NSStringFromCGRect(self.bounds));

// 画矩形
- ( void )drawRectangle
{
    // 图像上下文 , 获取画布 , 它是一个结构体指针
    CGContextRef context = UIGraphicsGetCurrentContext ();
   
    // 绘制矩形
    CGContextAddRect (context, CGRectMake ( 20 , 20 , 100 , 100 ));
   
    // 设置虚线
    CGFloat arr[] = { 10 , 10 };
    CGContextSetLineDash (context, 0 , arr, 2 );

    // 设置画笔的颜色
    CGContextSetStrokeColorWithColor (context, [ UIColor greenColor ]. CGColor );
   
    // 设置填充的颜色
    CGContextSetFillColorWithColor (context, [ UIColor redColor ]. CGColor );
   
    // 保存路径，绘图
    CGContextDrawPath (context, kCGPathFillStroke );

}

// 绘制曲线
- ( void )drawArc
{
    // 图像上下文 , 获取画布 , 它是一个结构体指针
    CGContextRef context = UIGraphicsGetCurrentContext ();

    // 设置画笔的颜色
    CGContextSetStrokeColorWithColor (context, [ UIColor greenColor ]. CGColor );
   
    // 设置填充的颜色
    CGContextSetFillColorWithColor (context, [ UIColor redColor ]. CGColor );
   
    // 绘制曲线
    // 绘制贝塞尔曲线 1
    // 设置起始点
//    CGContextMoveToPoint(context, 10, 50);
//    // 添加一条曲线
//    CGContextAddCurveToPoint(context, 105, 0, 105, 100, 200, 50);
   
    // 绘制贝塞尔曲线 2
    // 设置起始点
//    CGContextMoveToPoint(context, 10, 50);
//    CGContextAddQuadCurveToPoint(context, 105, 200, 200, 50);
   
    /**
     *  绘制扇形
     *
     *  @param c#>          <#c#> 画布 #>
     *  @param x#>          <#x#> 圆心 x#>
     *  @param y#>          <#y#> 圆心 y#>
     *  @param radius#>     <#radius#> 半径 #>
     *  @param startAngle#> <#startAngle#> 起始角度 #>
     *  @param endAngle#>   <#endAngle#> 结束角度 #>
     *  @param clockwise#>  <#clockwise#> 顺逆时针 #>
     *
     *  @return
     */
    CGContextAddArc (context, self . frame . size . width / 2 , self . frame . size . height / 2 , 100 , arc ( 90 ), arc (- 90 ), 0 );


   

   
    // 保存路径，绘图
    CGContextDrawPath (context, kCGPathFillStroke );

}


// 绘制文字
- ( void )drawText
{
    NSString *text = @"hello, 你好 " ;
   
    [text drawInRect : CGRectMake ( 10 , 10 , 100 , 50 ) withAttributes : nil ];
}


// 绘制图片
- ( void )drawImage
{
//    UIImage *img = [UIImage imageNamed:@"campFire02.gif"];
//    [img drawInRect:self.bounds];
   

4、 view.layer的用法

    UIView *view = [[ UIView alloc ] initWithFrame : CGRectMake ( 100 , 100 , 100 , 100 )];
    view. backgroundColor = [ UIColor redColor ];
   
    // 设置圆角
    view. layer . cornerRadius = 10 ;
    view. layer . masksToBounds = YES ;
   
    // 设置边框
    view. layer . borderWidth = 5 ;
    view. layer . borderColor = [ UIColor greenColor ]. CGColor ;
   
    // 设置阴影的颜色
    view. layer . shadowColor = [ UIColor darkGrayColor ]. CGColor ;
   
    // 设置阴影大小
    view. layer . shadowOffset = CGSizeMake ( 50 , 20 );
   
    // 设置阴影的透明度
    view. layer . shadowOpacity = 1 ;
   
    // 设置阴影的路径
    view. layer . shadowPath = [ UIBezierPath bezierPathWithRect : CGRectMake ( 50 , 20 , 200 , 200 )]. CGPath ;
   
   
    // 设置图片
    view. layer . contents = ( __bridge id )([ UIImage imageNamed : @"image" ]. CGImage );
   
   
   

    [self.view addSubview:view];

    CALayer *layer = [[ CALayer alloc ] init ];
    layer. frame = CGRectMake ( 10 , 100 , 300 , 300 );
    layer. backgroundColor = [ UIColor redColor ]. CGColor ;
    [ self . view . layer addSublayer :layer];
   
    CALayer *subLayer = [[ CALayer alloc ] init ];
    subLayer. frame = CGRectMake ( 10 , 10 , 100 , 100 );
    subLayer. backgroundColor = [ UIColor greenColor ]. CGColor ;

    [layer addSublayer:subLayer];

   注意： CALayer除了不能添加事件外，其他的功能都和view一样

5、

- ( instancetype )initWithFrame:( CGRect )frame
{
    self = [ super initWithFrame :frame];
    if ( self ) {
        lView = [[ UIView alloc ] initWithFrame : CGRectMake ( 10 , 10 , 20 , 20 )];
        lView . backgroundColor = [ UIColor redColor ];
        [ self addSubview : lView ];

    }
    return self ;
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

- ( void )drawRect:( CGRect )rect
{
    [ super drawRect :rect];
   
    // 绘画运动轨迹
    CGContextRef context = UIGraphicsGetCurrentContext ();
    CGContextAddRect (context, CGRectMake ( 10 , 10 , 200 , 200 ));
    CGContextSetStrokeColorWithColor (context, [ UIColor greenColor ]. CGColor );
    CGContextDrawPath (context, kCGPathStroke );
   
   
    // 给出运动轨迹
    CGMutablePathRef path = CGPathCreateMutable ();
   
    // 给当前路径添加一个运动轨迹
    CGPathAddRect (path, nil , CGRectMake ( 10 , 10 , 200 , 200 ));
   
   
    // 创建关键帧动画
    CAKeyframeAnimation *keyAnimation = [ CAKeyframeAnimation animationWithKeyPath : @"position" ];
   
    // 设置动画属性
   
    // 设置加减速方式
    keyAnimation. timingFunction = [ CAMediaTimingFunction functionWithName : kCAMediaTimingFunctionEaseInEaseOut ];
   
    // 设置动画时长
//    keyAnimation.duration = 3;
   
    // 设置动画的重复次数
//    keyAnimation.repeatCount = 10;
   
    // 设置路径
    keyAnimation. path = path;
   
//    [lView.layer addAnimation:keyAnimation forKey:@"keyAnimation"];
   
    // 单一动画 -- 旋转
    CABasicAnimation *baseAnimation = [ CABasicAnimation animationWithKeyPath : @"transform.rotation.z" ];
    // 设置动画时长
//    baseAnimation.duration = 3;
   
    // 设置动画的重复次数
//    baseAnimation.repeatCount = 10;
   
    baseAnimation. fromValue = @0 ;
    baseAnimation. toValue = @(2 * M_PI ) ;
//    [lView.layer addAnimation:baseAnimation forKey:@"baseAnimation"];
   
   
    // 组动画
    CAAnimationGroup *animationGroup = [ CAAnimationGroup animation ];
   
    // 添加两个动画组合为一个动画
    animationGroup. animations = @[ keyAnimation, baseAnimation ] ;
    animationGroup. duration = 2 ;
    animationGroup. repeatCount = 1000 ;
   
    [ lView . layer addAnimation :animationGroup forKey : @"animationGroup" ];


}