iOS 动画大全(附带gif图片效果)
2016-07-11 16:50
405 查看
iOS 动画大全(附带gif图片效果), 在实际的开发当中为了达到界面美化的效果,我们经常需要在项目中使用各种动画,在增强界面的动感。总结了个人的开发经验,下面介绍最常用的动画打全(根据图片效果自行选用吧):
UIImage类似美团袋鼠奔跑的动画
NSTimer定时器动画
UIGestureRecognizer动画
UIBezierPath关键帧动画
CABasicAnimation动画
CABasicAnimation动画
UISnapBehavior/UIDynamicAnimator 闪烁动画
UIImage类似美团袋鼠奔跑的动画
-(UIImageView *)imageView{ if (!_imageView) { _imageView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 30, 100, 100)]; _imageView.center = self.view.center; } return _imageView; } - (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.imageView]; //会自动查找loading_1,loading_2直到找不到图片为止 UIImage *image = [UIImage animatedImageNamed:@"loading_" duration:1]; self.imageView.image = image; }
NSTimer定时器动画
-(UIImageView *)imageView{ if (!_imageView) { _imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0,100,50,50)]; UIImage *image = [UIImage animatedImageNamed:@"loading_" duration:0.5]; _imageView.image = image; } return _imageView; } - (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.imageView]; [NSTimer scheduledTimerWithTimeInterval:0.02 target:self selector:@selector(changeLocationTimer:) userInfo:nil repeats:YES];// 方式一 [self changeLocation];// 方式二 } -(void)changeLocationTimer:(id)timer{ CGRect frame = self.imageView.frame; frame.origin.x += 1; if (frame.origin.x >= self.view.bounds.size.width) { frame.origin.x = -frame.size.width; } self.imageView.frame = frame; } -(void)changeLocation{ //当动画结束后 自动进入completion块 [UIView animateWithDuration:3 animations:^{ CGRect frame = self.imageView.frame; frame.origin.x = self.view.frame.size.width; self.imageView.frame = frame; }completion:^(BOOL finished) { CGRect frame = self.imageView.frame; frame.origin.x = -frame.size.width; self.imageView.frame = frame; [self changeLocation]; }]; }
UIGestureRecognizer动画
- (void)viewDidLoad { [super viewDidLoad]; //添加点击手势self.view上,点击某个位置就让图片移动到对应位置 UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)]; [self.view addGestureRecognizer:tapGR]; } -(void)tap:(UITapGestureRecognizer *)gr{ CGPoint location = [gr locationInView:self.view]; //对于Block参数 一定要切换焦点到提示位置 回车自动生成 [UIView animateWithDuration:1 animations:^{ _imageView.center = location; }]; }
- (void)viewDidLoad { [super viewDidLoad]; //为商品图片添加点击手势 //tips:图片默认是不接受用户操作的 _imageView.userInteractionEnabled = YES; UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)]; [self.imageView addGestureRecognizer:tapGR]; } -(void)tap:(UITapGestureRecognizer *)gr{ //商品落入购物车中 但是原来的图片不消失 UIImageView *imageView = [[UIImageView alloc]initWithFrame:_imageView.frame]; imageView.image = [UIImage imageNamed:@"snow"]; [self.view addSubview:imageView]; [UIView animateWithDuration:1 animations:^{ imageView.center = _label.center; } completion:^(BOOL finished) { //落入购物车之后 把商品图片清除掉 //removeFromSuperview 这个方法 是把视图从他的父视图中移除 [imageView removeFromSuperview]; }]; }
UIBezierPath关键帧动画
//1.让飞机圆形运动 UIBezierPath *path = [UIBezierPath bezierPath]; [path addArcWithCenter:CGPointMake(160, 240) radius:100 startAngle:3*M_PI_2 endAngle:3*M_PI_2 + 2*M_PI clockwise:YES]; //2.创建关键帧动画 //keyPath一共三个 position transform opacity //分别代表位置,变形,透明度 CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; //设置关键帧的动画路径为圆形的 moveAnimation.path = path.CGPath; //设置动画时长 moveAnimation.duration = 3; //定义动画执行完毕后 是否自动删除 默认是yes moveAnimation.removedOnCompletion = YES; [self.imageView.layer addAnimation:moveAnimation forKey:nil];
CABasicAnimation动画
//缩放动画 CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"]; scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1)]; scaleAnimation.duration = 1; scaleAnimation.autoreverses = YES;//自动反向 scaleAnimation.repeatCount = MAXFLOAT;//重复的次数 [self.imageView.layer addAnimation:scaleAnimation forKey:nil];
//透明度动画 CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"]; alphaAnimation.fromValue = @1.0; alphaAnimation.toValue = @0; alphaAnimation.duration = 2; alphaAnimation.autoreverses = YES; alphaAnimation.repeatCount = MAXFLOAT; [self.imageView.layer addAnimation:alphaAnimation forKey:nil];
//创建动画组 批量管理或添加动画 CAAnimationGroup *group = [CAAnimationGroup animation]; group.animations = @[moveAnimation,scaleAnimation,alphaAnimation]; group.duration = 3; //希望动画结束后 图片删除掉 需要通过协议监听 group.delegate = self; [self.imageView.layer addAnimation:group forKey:nil]; //下方协议方法会在动画结束时自动触发 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ [self.imageView removeFromSuperview]; }
CABasicAnimation动画
CABasicAnimation *animX = [CABasicAnimation animationWithKeyPath:@"transform"]; animX.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; //图片绕X轴旋转pi角度 animX.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1, 0, 0)]; animX.duration = 3; [self.imageView.layer addAnimation:animX forKey:nil]; CABasicAnimation *animY = [CABasicAnimation animationWithKeyPath:@"transform"]; animY.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; //图片绕Y轴旋转pi角度 animY.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0, 1, 0)]; animY.duration = 3; [self.imageView.layer addAnimation:animY forKey:nil]; CABasicAnimation *animZ = [CABasicAnimation animationWithKeyPath:@"transform"]; animZ.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; //图片绕Z轴旋转pi角度 animZ.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0, 0, 1)]; animZ.duration = 3; [self.imageView.layer addAnimation:animZ forKey:nil]; CABasicAnimation *animXYZ = [CABasicAnimation animationWithKeyPath:@"transform"]; animXYZ.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; //图片绕X,Y,Z轴旋转pi角度 animXYZ.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1, 1, 1)]; animXYZ.duration = 3; [self.imageView.layer addAnimation:animXYZ forKey:nil];
UISnapBehavior/UIDynamicAnimator 闪烁动画
@interface ViewController () @property(nonatomic,strong)UIDynamicAnimator *animator; //闪烁行为c @property(nonatomic,strong)UISnapBehavior *snap; @end @implementation ViewController - (UIDynamicAnimator *)animator { if(_animator == nil) { _animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; } return _animator; } - (void)viewDidLoad { [super viewDidLoad]; UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)]; [self.view addGestureRecognizer:tapGR]; } -(void)tap:(UIGestureRecognizer *)gr{ CGPoint point = [gr locationInView:self.view]; //先删除之前的闪烁行为 [self.animator removeBehavior:self.snap]; self.snap = [[UISnapBehavior alloc]initWithItem:self.planeIV snapToPoint:point]; [self.animator addBehavior:self.snap]; }
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- Gifski:一个跨平台的高质量 GIF 编码器
- 模仿动画的放大缩小容器
- 浅谈jQuery animate easing的具体使用方法(推荐)
- jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
- Android实现定制返回按钮动画效果的方法
- Android中ViewFlipper的使用及设置动画效果实例详解
- jQuery实现美观的多级动画效果菜单代码
- php判断GIF图片是否为动画的方法
- jquery使用animate方法实现控制元素移动
- jQuery实现动画效果circle实例
- jQuery中animate用法实例分析
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 浅析JavaScript动画