UI-动画

一丶动画使用场景

1,视图上的过度效果

2,合理利用动画能提高用户体验

分类:CALayer动画->UIView->(UIView的属性动画,UIViewTransition动画,UIView的Block动画)

二丶UIView 动画

设置

+ (void)setAnimationDuration:(NSTimeInterval)duration; 运营多次时间

+ (void)setAnimationDelay:(NSTimeInterval)delay; 开始延迟

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve; 速度曲线

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; 动画反转

+ (void)setAnimationRepeatCount:(float)repeatCount; 动画反转次数(执行多少次)

+ (void)setAnimationDelegate:(id)delegate; 设置动画的代理

+ (void)setAnimationWillStartSelector:(SEL)selector; 动画开始的代理方法

+ (void)setAnimationDidStopSelector:(SEL)selector; 动画结束的代理方法

+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; 动画从当前状态继续执行

代码:

//-(void)改变frame 的动画

- (IBAction)frameAnimationButton:(id)sender {
    //开始动画

    [UIView beginAnimations:@"frame" context:nil];
        //设置延迟时间
    [UIView setAnimationDuration:5];
    //反复执行N次
    [UIView setAnimationRepeatCount:2];
    //设置代理,执行另一个动画
    [UIView setAnimationDelegate:self];
//    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

    //动画反转 (五种)
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:_backImage cache:YES];


    //设置属性
    _backImage.frame = CGRectMake(10, 10, 50, 50);
    _backImage.alpha = 0.1; //改变透明度
//    _backImage.hidden = YES;




    //结束
    [UIView commitAnimations];

//旋转动画

- (IBAction)transformButton:(id)sender {
    [UIView beginAnimations:@"rotation" context:nil];
    [UIView setAnimationDuration:5];
//    _backImage.transform = CGAffineTransformMakeRotation(M);
    //连续旋转
//    _backImage.transform = CGAffineTransformRotate(_backImage.transform, M_PI_2);

    //改变中心点

    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];//移动速度 in,out inout
      _backImage.center = CGPointMake(50, 50);



    [UIView commitAnimations];

}

//使用Block实现动画

- (IBAction)blockAnimation:(id)sender {
    [UIView animateWithDuration:1 animations:^{
//        [UIView beginAnimations:@"1" context:nil]; //使用Bloc,不需要开始和提交
        //动画内容
        _backImage.center = CGPointMake(200, 200);


    }];

}

//回弹效果    参数3:回弹效果0-1.0,值大,效果弱     参数4:刷新视图像素比例
    [UIView animateWithDuration:3 delay:0.5 usingSpringWithDamping:0.05 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        _backImage.center = CGPointMake(200, 300);

}completion:nil];

//移动视图动画效果
- (IBAction)transtionAnimation:(id)sender {
[UIView beginAnimations:nil context:nil];
[UIView transitionFromView:aView toView:bView duration:2 options:UIViewAnimationOptionTransitionFlipFromBottom completion:nil];

三丶CALayer(图层)

layer绘制,提供View 展示的内容,是只读属性

view显示

cornerRadius 圆角

shadowColor 阴影颜色

shadowOpacity 阴影透明度

shadowOffset 阴影偏移距离

shadowRadius 阴影模糊程度

shadowPath

borderColor 描边颜色

borderWidth 描边粗细

anchorPoint 锚点

position 位置信息

zPosition 层级顺序

描点,position,父视图的点

frame.x = position - 描点*width frame.y = position - 描点*heigh

//自己的图层改变自己, 修改自己的图层
    CALayer *lager = _backImage.layer;
    lager.cornerRadius = 50;
    lager.borderWidth = 5;
    lager.borderColor = [UIColor grayColor].CGColor;
    lager.masksToBounds = YES;

修改外部
    //layer
    CALayer *subLayer = [CALayer layer];
    subLayer.frame = CGRectMake(0, 0, 280, 280);
    subLayer.cornerRadius = 100;

subLayer.borderWidth = 5;
//    subLayer.masksToBounds = YES;
    subLayer.borderColor = [UIColor redColor].CGColor;
    subLayer.backgroundColor = [UIColor blackColor].CGColor;
    subLayer.opacity = 0.5;

[_backImage.layer addSublayer:subLayer];

四丶CAAnimation动画

子类

//渐变
- (IBAction)frameButton:(id)sender {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    //从....开始变最小
    [animation setFromValue:[NSValue valueWithCGSize:CGSizeMake(1, 1)]];

    //结束     同样BackImage 大小
    [animation setToValue:[NSValue valueWithCGSize:self.backImage.bounds.size]];
    animation.duration = 10; //动画时间
    [self.backImage.layer addAnimation:animation forKey:nil];

}

//关键帧动画,变化的时候一帧一帧
- (IBAction)keyFrameButton:(id)sender {
        //背景颜色
//    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
//    NSArray *colorArray = @[(id)[UIColor blackColor].CGColor,(id)[UIColor grayColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor cyanColor].CGColor,(id)[UIColor redColor].CGColor];
//    animation.values = colorArray;
//    animation.duration = 4;
//    _backImage.layer.opacity = 1;

// [self.view.layer addAnimation:animation forKey:nil];

  //frame 的变化
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //点的位移    CGPoint结构体转为对象   valueWithCGPoint
    NSArray *positionArray = @[[NSValue valueWithCGPoint:CGPointMake(20, 20)],[NSValue valueWithCGPoint:CGPointMake(40, 60)],[NSValue valueWithCGPoint:CGPointMake(60, 80)],[NSValue valueWithCGPoint:CGPointMake(80, 120)],[NSValue valueWithCGPoint:CGPointMake(120, 120)],[NSValue valueWithCGPoint:CGPointMake(120, 150)],[NSValue valueWithCGPoint:CGPointMake(120, 200)]];
    animation.values = positionArray;
    animation.duration = 5;

[self.backImage.layer addAnimation:animation forKey:nil];

五丶CGAffineTransform 2D 仿射变换

- (IBAction)transFormButton:(id)sender {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(_backImage.layer.transform, M_PI, 1, 1, 1)];
    animation.duration = 5.0;
    [self.backImage.layer addAnimation:animation forKey:nil];

}

/私有API 无法上线APP Store

- (IBAction)transButton:(id)sender {
//transition动画和前面的类不一样注意观察
    //1,创建一个动画
    CATransition *transition = [CATransition animation];
    //2,指定动画类型,先看一个私有API的使用私有API就记住一个立方体变化,这个需要查一下一些固定字符串
    transition.type = @"suckEffect";
    //3,指定动画的过度类型
    transition.subtype = kCATransitionFromRight;
    //添加动画
    [self.backImage.layer addAnimation:transition forKey:nil];

/*
以下API效果可以安全使用
cube 方块
suckEffect 三角
rippleEffect 水波抖动
pageCurl 上翻页
pageUnCurl 下翻页
oglFlip 上下翻转
cameraIrisHollowOpen 镜头快门开
cameraIrisHollowClose 镜头快门开

posted on 2014-05-28 18:53 dev_周阅读(196) 评论(0) 编辑收藏举报