动画效果:Animation_html/css

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

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