动画效果:Animation

先创建一个图片imageView

 self.imageView =[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tara4.jpg"]];
    self.imageView.frame =CGRectMake(85, 400, 200, 200);
    self.imageView.layer.cornerRadius =100;
    self.imageView.layer.masksToBounds=YES;
    [self.view addSubview:self.imageView];

写几个button的点击方法

写在button的点击方法,点击触发效果

1. UIView提供的动画

(1).// UIView 提供的第一种动画

 // Duration 动画的时间间隔(double类型)
[UIView animateWithDuration:3 animations:^{
   // 动画内容写在block里
        self.imageView.frame =CGRectMake(100, 100, 100, 75);
    }];
使 imageView 移动到新的位置上,并且把size改为新的

(2).UIView 的第二种

使 imageView 移动到新的位置上,并且把size改为新的,最后又回到原位置

[UIView animateWithDuration:5 animations:^{
         self.imageView.frame =CGRectMake(30, 100, 300, 225);
        self.imageView.alpha =0;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:3 animations:^{
        self.imageView.frame =CGRectMake(85, 400, 200, 150);
            self.imageView.alpha =1;
        }];
    }];

(3).UIView的第三种方法

可以重复 第二个参数:延迟, 第三个参数:动画类型

只重复动画的内容

[UIView animateWithDuration:5 delay:0.1 options:UIViewAnimationOptionRepeat animations:^{
        self.imageView.frame =CGRectMake(30, 100, 300, 225);
        self.imageView.alpha =0;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:3 animations:^{
                    self.imageView.frame =CGRectMake(85, 400, 200, 150);
                        self.imageView.alpha =1;
                    }];
    }];

(4)UIView 第四种 颤抖动画

// 第三个参数:设置的越小,震动的越剧烈

// 第四个参数 :设置越大, 图片的初速度越大

   [UIView animateWithDuration:5 delay:0.1 usingSpringWithDamping:0.1 initialSpringVelocity:10 options:UIViewAnimationOptionRepeat animations:^{
        self.imageView.frame =CGRectMake(30, 100, 300, 225);
        self.imageView.alpha =0;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:3 animations:^{
                                self.imageView.frame =CGRectMake(85, 400, 200, 150);
                                    self.imageView.alpha =1;
                                }];
    }];

2.通过transform对视图进行操作

(1).对视图进行旋转的操作

// 第二个参数:设置旋转的弧度 (π /4)
    self.imageView.transform =CGAffineTransformRotate(self.imageView.transform, M_PI_4);

(2).对视图的缩放

// 第二, 三个参数:设置缩放的比例

 self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 0.9, 0.9);

(3).使视图偏移

设置视图的偏移量

    self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 50, 50);

3. layer动画

layer 主要负责显示控件的一些设置信息 ,比如边框 ,弧度等 ,layer动画的种类很多,我们看见的UIView的动画也是封装了几个layer动画

(1).创建一个动画的效果

    CATransition *transition =[CATransition animation];
设置动画种类 : cube (), rippleEffect (水波纹) suckEffect oglFlip
 transition.type [email protected]"rippleEffect";

   // 设置动画时长
    [transition setDuration:3];

    // 设置动画的重复次数
    // NSIntegerMax 整数的最大值
    [transition setRepeatCount:NSIntegerMax];

//向imageView 上添加动画效果, 添加到imageView的layer上
    [self.imageView.layer addAnimation:transition forKey:@"transistion"];

(2).layer 动画的第二种 (放大缩小)

CABasicAnimation *basic =[CABasicAnimation animationWithKeyPath:@"transform.scale"];
    // 对layer动画设置需要kvc的方式赋值 ,就是需要通过给定一个key,再去设置

    // 动画时长
    [basic setDuration:3];

    // 动画执行的次数
    [basic setRepeatCount:NSIntegerMax];

    // 这个动画设置的是一个缩放的效果,需要给一个开始的初始值
    缩放的初始倍数
    basic.fromValue =[NSNumber numberWithInt:1];

    // 在设置一个结束的值
   缩放的结束倍数
    basic.toValue = [NSNumber numberWithInt:2];
    // toValue 和fromvalue 需要一个id类型的对象(需要整数类型,0.5按0算)

    //把动画添加到视图上
    [self.imageView.layer addAnimation:basic forKey:@"basic"];

(3). 让图片旋转

 CABasicAnimation *basic =[CABasicAnimation animationWithKeyPath:@"transform.rotation"];

    // 设置角度
    basic.fromValue =[NSNumber numberWithInt:0.0];
    basic.toValue =[NSNumber numberWithFloat: -4 *M_PI_2];

    // 设置动画时长
    [basic setDuration:3];
    // 次数
    [basic setRepeatCount:NSIntegerMax];

    [self.imageView.layer addAnimation:basic forKey:@"basic"];

    // 是否回到原位
    [basic setAutoreverses:YES];

(4). 关键帧动画

    CAKeyframeAnimation *keyAnimation =[CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 给动画创建一个行走的路径, 用来记录移动的的关键坐标
    CGMutablePathRef path =CGPathCreateMutable();

    // 指定起始的坐标位置
    // 第一个参数 :用 path来保存起始的路径
    // 第二个参数 :NULL
    // 第三四个参数 :要移动的控件的起始坐标
    CGPathMoveToPoint(path,NULL, self.imageView.frame.origin.x, self.imageView.frame.origin.y);

    // 设置图片的移动轨迹
    CGPathAddLineToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 300, 20);
    CGPathAddLineToPoint(path, NULL, 50, 10);
    CGPathAddLineToPoint(path, NULL, 140, 200);

    // 给视图设置一条曲线路径
    CGPathAddCurveToPoint(path, NULL, 200, 200, 200, 100, 120, 40);
    CGPathAddCurveToPoint(path, NULL, 80, 10, 20, 100, 300, 100);
    CGPathAddCurveToPoint(path, NULL, 20, 90, 20, 100, 200, 150);
    CGPathAddCurveToPoint(path, NULL, 30, 70, 60, 90, 110, 50);

    // 设置动画的时长
    [keyAnimation setDuration:3];

    [keyAnimation setRepeatCount:NSIntegerMax];
    // 把设计好的路线放到动画中

    [keyAnimation setPath:path];

    // 最后,把动画添加到视图上
    [self.imageView.layer addAnimation:keyAnimation forKey:@"keyAnimation"];

版权声明：本文为博主原创文章，未经博主允许不得转载。