iOS 动画大全(附带gif图片效果)

时间:2022-11-15 20:32:37

iOS 动画大全(附带gif图片效果), 在实际的开发当中为了达到界面美化的效果,我们经常需要在项目中使用各种动画,在增强界面的动感。总结了个人的开发经验,下面介绍最常用的动画打全(根据图片效果自行选用吧):


  • UIImage类似美团袋鼠奔跑的动画
    iOS 动画大全(附带gif图片效果)
    iOS 动画大全(附带gif图片效果)
    iOS 动画大全(附带gif图片效果)
-(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定时器动画
    iOS 动画大全(附带gif图片效果)
-(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动画
    iOS 动画大全(附带gif图片效果)
- (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;
}];
}

iOS 动画大全(附带gif图片效果)

 - (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关键帧动画
    iOS 动画大全(附带gif图片效果)
    //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动画

iOS 动画大全(附带gif图片效果)

    //缩放动画
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];

iOS 动画大全(附带gif图片效果)

    //透明度动画
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];

iOS 动画大全(附带gif图片效果)

    //创建动画组 批量管理或添加动画
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动画
    iOS 动画大全(附带gif图片效果)
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 闪烁动画
    iOS 动画大全(附带gif图片效果)
@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];
}