动画效果:Animation_html/css_WEB-ITnose

先创建一个图片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 =@"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"];

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