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

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

  • UIImage类似美团袋鼠奔跑的动画

    iOS 动画大全(附带gif图片效果)_第1张图片
    iOS 动画大全(附带gif图片效果)_第2张图片
-(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图片效果)_第3张图片
-(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图片效果)_第4张图片
- (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图片效果)_第5张图片

 - (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图片效果)_第6张图片
    //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图片效果)_第7张图片

    //缩放动画
    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图片效果)_第8张图片

    //透明度动画
    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图片效果)_第9张图片

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

你可能感兴趣的:(ios,动画,ios开发,animate,NSTimer)