Layer动画(一)

layer动画

控件可以拆成两部分,一部分是控件的样式,比如边框,文字等这些都是通过操作控件layer层完成的.另一部分是控件的功能,比如button的点击方法,这些都是通过自己的功能.layer动画主要就是给控件的layer层添加动画来实现效果

一:

1.旋转rotate

 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    // 设置动画起始值
    animation.fromValue = [NSNumber numberWithFloat:0];
    // 设置最终旋转的角度
    animation.toValue = [NSNumber numberWithFloat:M_PI * 2];

2.缩放scale

 // 缩放
//    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//    // 设置起始的缩放比例
//    animation.fromValue = [NSNumber numberWithInt:1];
//    //
//    animation.toValue = [NSNumber numberWithInt:2];

3.设置动画的属性

   // 设置动画的播放时长
    animation.duration = 10;
    // 设置动画的执行次数,NSIntegerMax整数的最大值
    animation.repeatCount = NSIntegerMax;
    // 旋转之后是否要回到原来的位置
    animation.autoreverses = NO;
    // 是否按照结束位置继续旋转
    animation.cumulative = YES;

4.把动画加到imageView的layer上

[self.imageView.layer addAnimation:animation forKey:@"transform.rotation"];

5.给图片加一个轻点手势,实现轻点一下,旋转暂停

 // 给imageView上添加一个轻点的手势
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
    self.isRotation = NO;
    [self.imageView addGestureRecognizer:tap];

6.点击事件,实现功能

- (void)tapAction:(UITapGestureRecognizer *)tap{
    if (self.isRotation == NO) {
        // 每一个view的layer层系统都有一个记录时间的属性,通过改变view的动画时间来控制动画效果
        // 获取播放旋转的时间点
        CFTimeInterval stop = [self.imageView.layer convertTime:CACurrentMediaTime() fromLayer:nil];
        // 为了暂停,把播放速度设置为0
        self.imageView.layer.speed = 0;
        // 记录当前时间的偏移量
        self.imageView.layer.timeOffset = stop;
    } else {
        // 先找到上一次停止的时间偏移量
        CFTimeInterval time = self.imageView.layer.timeOffset;
        // 让动画旋转的速度恢复
        self.imageView.layer.speed = 1;
        // 把偏移量清零
        self.imageView.layer.timeOffset = 0;
        // 开始时间清零
        self.imageView.layer.beginTime = 0;
        // 接下来以停止时间作为开始,继续旋转
        self.imageView.layer.beginTime = [self.imageView.layer convertTime:CACurrentMediaTime() fromLayer:nil] - time;
    }
#warning 状态记得要取反
    self.isRotation = !self.isRotation;

}

二:

各种动画效果

<span style="font-weight: normal;"><span style="font-size:14px;"> self.secImageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 500, 200, 200)];
    [self.view addSubview:self.secImageView];
    self.secImageView.image = [UIImage imageNamed:@"3.jpg"];
    
    self.button = [UIButton buttonWithType:UIButtonTypeSystem];
    self.button.frame = CGRectMake(200, 0, 150, 50);
     [self.view addSubview:self.button];
    [self.button addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];
    self.button.backgroundColor = [UIColor redColor];
    [self.button setTitle:@"动画" forState:UIControlStateNormal];</span></span>

2.动画效果的实现

<span style="font-weight: normal;"><span style="font-size:14px;">/** type
 *
 *  各种动画效果  其中除了'fade', `moveIn', `push' , `reveal' ,其他属于私有的API.
 *  ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用.
 *  @"cube"                     立方体翻滚效果
 *  @"moveIn"                   新视图移到旧视图上面
 *  @"reveal"                   显露效果(将旧视图移开,显示下面的新视图)
 *  @"fade"                     交叉淡化过渡(不支持过渡方向)             (默认为此效果)
 *  @"pageCurl"                 向上翻一页
 *  @"pageUnCurl"               向下翻一页
 *  @"suckEffect"               收缩效果，类似系统最小化窗口时的神奇效果(不支持过渡方向)
 *  @"rippleEffect"             滴水效果,(不支持过渡方向)
 *  @"oglFlip"                  上下左右翻转效果
 *  @"rotate"                   旋转效果
 *  @"push"
 *  @"cameraIrisHollowOpen"     相机镜头打开效果(不支持过渡方向)
 *  @"cameraIrisHollowClose"    相机镜头关上效果(不支持过渡方向)
 */
- (void)click:(UIButton *)button{
    CATransition *transition = [CATransition animation];
    // 设置一下动画类型
    transition.type = @"rippleEffect";
    // 设置动画时长
    transition.duration = 3;
    // 设置动画的播放次数
    transition.repeatCount = NSIntegerMax;
    [self.secImageView.layer addAnimation:transition forKey:@"transition"];
}</span></span>