欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

动画效果:Animation_html/css_WEB-ITnose

程序员文章站 2022-05-13 08:58:30
...

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

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

相关标签: 动画效果:Animation