12---UI高级第四课 iOS绘图与动画

1. CATransition动画

（1）获取一个动画对象

   CATransition *animation = [CATransition animation];

（2）设置动画时长

animation.duration = 1;

（3）设置动画的速率

    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

（4）设置动画的类型

/*

  kCATransitionFade

  kCATransitionMoveIn

  kCATransitionPush

  kCATransitionReveal

//私有API

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

  animation.type = @"suckEffect"       //收缩效果，如一块布被抽走

  animation.type = @"oglFlip"          //翻转效果

  animation.type = @"rippleEffect"     //滴水效果

  animation.type = @"pageCurl"         //向上翻一页

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

*/

  animation.type = @"pageUnCurl";

（5）设置动画的子类型---确定动画的方向

/*

  kCATransitionFromRight

  kCATransitionFromLeft

  kCATransitionFromTop

  kCATransitionFromBottom

*/

    animation.subtype = kCATransitionFromTop;

（6）UIView *myView = [self.viewviewWithTag:2015];

//给myView添加相应的动画属性,动画属性是添加到layer上的

   [myView.layer addAnimation:animation forKey:@

     "animation"];

2.绘图

（1）画线
- (void)drawLine
{
    //图像上下文,获取画布, 它是一个结构体指针
    CGContextRef context = UIGraphicsGetCurrentContext();
   
    //获取画笔，设置起点
    CGContextMoveToPoint(context, 10, 10);
   
    //移动画笔
    CGContextAddLineToPoint(context, 10, 200);
   
    //移动画笔
    CGContextAddLineToPoint(context, 200, 200);
   
    //设置画笔的宽度
    CGContextSetLineWidth(context, 1);

    

    //设置圆角
//    CGContextSetLineCap(context, kCGLineCapRound);
   
    //设置虚线
    /**
     *  设置虚线
     *
     *  @param context   画布
     *  @param 0         虚线开始填充的位置大小
     *  @param lengths#> 虚线排列的规则
     *  @param count#>   排列的个数
     *
     *  @return
     */
   

    CGFloat arr[] = {10, 10}; 

    CGContextSetLineDash(context, 0, arr, 2);

    //设置画笔的颜色
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
   
    //设置填充的颜色
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
   
    //设置画笔的宽度
    CGContextSetLineWidth(context, 10);

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

（2）画矩形

- (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);

}

（3）绘制曲线

- (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);

}

（4）绘制文字

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

（5）绘制图片

- (void)drawImage

{

   UIImage *img = [UIImage imageNamed:@"campFire02.gif"];

   [img drawInRect:self.bounds];

}

3.layer

（1）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];

（2）layer

    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];

4.关键帧动画、单一动画、组动画

- (void)viewDidLoad {

    [super viewDidLoad];

    MyView *myView = [[MyView alloc] initWithFrame:CGRectMake(10, 100, 300, 300)];
    myView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:myView];

   

           UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];

    view.backgroundColor = [UIColor redColor];

    [myView addSubview:view]; 

   

}

- (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"];

}