iOS 动画

iOS UIView动画 和 CALayer动画

iOS4之前如果想要做动画, 必须放在开始动画和提交动画中间, 而 iOS4之后使用基于 Block 的动画效果

//开始动画
[UIView beginAnimations:nil context:nil];
//1. 设置动画持续时间 -- 以秒为单位
[UIView setAnimationDuration:2];//默认0.2秒
//2. 设置动画代理 -- 但不需要服从协议
[UIView setAnimationDelegate:self];
//3. 设置动画结束后会触发的方法
[UIView setAnimationDidStopSelector:@selector(handleDidStopAnimation)];
//4. 设置动画延迟的时间 -- 以秒为单位
[UIView setAnimationDelay:0];
//5. 设置动画从当前状态发生变化
[UIView 色图AnimationBeginsFromCurrentState:NO];
//6. 设置动画是否反转
[UIView setAnimationRepeatAutoreverses:YES];
//7. 设置动画重复次数
[UIView setAnimationRepeatCount:10];//0和1时效果相同
//8. 设置动画变化的曲线
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
/*对相关的属性进行设置*/
//提交动画
[UIView commitAnimations];

1. UIView动画

UIView 中能够做动画的属性有: frame, center, bounds, alpha, transform, backgroundColor.

对 UIView 视图属性的更改是有效地, 最终会对视图作出修改

一 Block 动画效果

1 . 最简单的 Block 动画

[UIView animateWithDuration:4 animations:^{
        //center -- 视图位置
        CGPoint center = self.redView.center;
        center.y += 350;
        self.redView.center = center;
        //alpha -- 透明度
        self.redView.alpha = 0.2;
        //transform -- 旋转和缩放
        self.redView.transform = CGAffineTransformRotate(self.redView.transform, 1);
        self.redView.transform = CGAffineTransformScale(self.redView.transform, 0.25, 0.25);
    }];

2 . 可以检测到动画结束的 Block 动画

[UIView animateWithDuration:4 animations:^{
        //center -- 视图位置
        CGPoint center = self.redView.center;
        center.y += 200;
        self.redView.center = center;
        //alpha -- 透明度
        self.redView.alpha = 0.2;
        //transform -- 旋转和缩放
        self.redView.transform = CGAffineTransformRotate(self.redView.transform, 1);
        self.redView.transform = CGAffineTransformScale(self.redView.transform, 0.25, 0.25);
    } completion:^(BOOL finished) {
        [self handleDidStopAnimation];
    }];

3 . 在第二种 block 动画的基础上还可以配置多个参数

[UIView animateWithDuration:4 delay:1 options:UIViewAnimationOptionAutoreverse animations:^{
        //center -- 视图位置
        CGPoint center = self.redView.center;
        center.y += 200;
        self.redView.center = center;
        //alpha -- 透明度
        self.redView.alpha = 0.2;
        //transform -- 旋转和缩放
        self.redView.transform = CGAffineTransformRotate(self.redView.transform, 1);
        self.redView.transform = CGAffineTransformScale(self.redView.transform, 0.25, 0.25);
    } completion:^(BOOL finished) {
        [self handleDidStopAnimation];
    }];

4 . 弹簧效果

//参数分别是: 持续时间, 延迟时间,弹簧强度(0.0~1.0), 开始变化速度, 动画效果参数, 动画代码(Block), 结束代码(Block)
[UIView animateWithDuration:4 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        //更改 BounceButton 属性
        //center -- 视图位置
        CGPoint center = self.effectBtn.center;
        center.y += 50;
        self.effectBtn.center = center;
        //transform -- 旋转和缩放
        self.effectBtn.transform = CGAffineTransformScale(self.effectBtn.transform, 1.2, 1.2);
    } completion:nil];

二 过渡动画(界面间过渡)

1 . 只产生动画效果, 界面没有切换

[UIView transitionWithView:self.redView duration:4 options:UIViewAnimationOptionTransitionCurlUp animations:^{
        self.redView.transform = CGAffineTransformRotate(self.redView.transform, M_PI_2);//M_PT_2 旋转90° M_PI_4 旋转45°
        self.redView.backgroundColor = [UIColor blueColor];
    } completion:nil];

2 . 从一个视图切换到另外一个视图

[UIView transitionFromView:self.redView toView:self.yellowView duration:1 options:UIViewAnimationOptionTransitionCurlDown completion:^(BOOL finished) {
        //改变指针指向
        UIView *tempView = [self.redView retain];
        self.redView = self.yellowView;
        self.yellowView = tempView;
        [tempView release];
    }];

2. UIView动画和 CALayer动画的区别

UIView 和 CALayer 的区别 :

UIView 其实是 CALayer 层的简单封装, 真正来绘制显示内容的还是 CALayer, 每一个视图对象都会有一个 layer 属性可以访问到自己层的 layer 层, UIView 只是简单的封装了常用的属性, 不常用的属性还得设置 CALayer

CALayer 层的相关属性设置都是在某视图下的 layer 层下进行配置的.

3. CALayer动画

1 . CALayer 属性动画(基本属性动画)

//keypath : 要做动画的属性名
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"opacity"];//opacity : 透明度
//变化的开始值
basic.fromValue = @(1.0);
//变化的结束值
basic.toValue = @(0.2);
//设置持续时间
basic.duration = 2;
//设置重复次数
basic.repeatCount = 1000;
//添加到视图的 layer 层
[self.redView.layer addAnimation:basic forKey:nil];

2 . CALayer 属性动画(关键帧动画)

CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGPoint point1 = self.cloudView.center;
    CGPoint point2 = CGPointMake([UIScreen mainScreen].bounds.size.width / 2, self.cloudView.bounds.size.height / 2);
    CGPoint point3 = CGPointMake([UIScreen mainScreen].bounds.size.width - self.cloudView.bounds.size.width / 2, self.cloudView.frame.origin.y);
    keyFrame.values = @[[NSValue valueWithCGPoint:point1], [NSValue valueWithCGPoint:point2], [NSValue valueWithCGPoint:point3]];
    //设置持续时间
    keyFrame.duration = 10;
    //次数
    keyFrame.repeatCount = 10;
    //添加到视图的 layer 层
    [self.cloudView.layer addAnimation:keyFrame forKey:nil];

3 . CALayer 过渡动画

CATransition *transition = [CATransition animation];
    //配置过渡动画类型
    transition.type = @"rippleEffect";
    //配置过渡动画方向
//    transition.subtype = kCATransitionFromLeft;
    //添加
    [self.view.layer addAnimation:transition forKey:nil];

4 . CALayer 分组动画

//1. 关键帧动画 -- 沿圆形规矩移动
    CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //绘制半圆路径
    CGFloat r = [UIScreen mainScreen].bounds.size.height / 2;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.balloonView.center.x
, r) radius:r startAngle:-(M_PI_2) endAngle:M_PI_2 clockwise:YES];
    //关键帧动画给上圆形轨迹
    keyframe.path = path.CGPath;//让贝塞尔曲线作为移动轨迹
    //时间
    keyframe.duration = 10;
    //2. 关键帧动画 -- 气球缩放
    CAKeyframeAnimation *keyframeBalloon = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    keyframeBalloon.values = @[@(1.0), @(1.2), @(1.4), @(1.6), @(1.8), @(2.0), @(1.8), @(1.6), @(1.4), @(1.2), @(1.0)];
    keyframeBalloon.duration = 10;
    //3. 创建分组动画
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[keyframe, keyframeBalloon];
    group.duration = 10;
    group.repeatCount = 1000;
    [self.balloonView.layer addAnimation:group forKey:nil];

注意 : 关于过渡效果, 过渡方向

/* 过渡效果
 fade     //交叉淡化过渡(不支持过渡方向) kCATransitionFade
 push     //新视图把旧视图推出去  kCATransitionPush
 moveIn   //新视图移到旧视图上面   kCATransitionMoveIn
 reveal   //将旧视图移开,显示下面的新视图  kCATransitionReveal
 cube     //立方体翻滚效果
 oglFlip  //上下左右翻转效果
 suckEffect   //收缩效果，如一块布被抽走(不支持过渡方向)
 rippleEffect //滴水效果(不支持过渡方向)
 pageCurl     //向上翻页效果
 pageUnCurl   //向下翻页效果
 cameraIrisHollowOpen  //相机镜头打开效果(不支持过渡方向)
 cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)
*/

/* 过渡方向
 kCATransitionFromRight
 kCATransitionFromLeft
 kCATransitionFromBottom
*/