正如标题所说,iOS开发中,动画是很容易实现的功能.

苹果官网提供了很多动画的方案,比如UIView动画,核心动画等.

其中UIView动画又包含首尾式动画,block动画等;

核心动画:

image.png

我们从比较简单的UIView-block动画开始学习.

Demo01:block动画展示

• 逻辑实现:在block动画的block中对view的transform进行修改,结合block动画的属性设置(Duration:持续时间,Delay:延迟等),达到动画效果
  代码如下

#pragma mark - 添加
-(void)add{
    UIView *blackView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    _blackView=blackView;
    blackView.center=self.view.center;
    blackView.backgroundColor=[UIColor blackColor];
    [self.view addSubview:blackView];

}
#pragma mark - 删除
-(void)remove{
    [_blackView removeFromSuperview];
}
#pragma mark - 变大
-(void)big{
    CGRect tempBounds=_blackView.bounds;
    tempBounds.size.height+=10;
    tempBounds.size.width+=10;
    [UIView animateWithDuration:0.5 animations:^{
    _blackView.bounds=tempBounds;
    }];
}
#pragma mark - 变小
-(void)small{
    CGRect tempBounds=_blackView.bounds;
    tempBounds.size.height-=10;
    tempBounds.size.width-=10;
    [UIView animateWithDuration:0.5 animations:^{
        _blackView.bounds=tempBounds;
    }];
}
#pragma mark - 平移
-(void)translate{
    [UIView animateWithDuration:0.5 animations:^{
    _blackView.transform=CGAffineTransformTranslate(_blackView.transform, 20, 20);
    }];
}
#pragma mark - 缩放
-(void)scale{
    [UIView animateWithDuration:0.5 animations:^{
        _blackView.transform=CGAffineTransformScale(_blackView.transform, 2, 2);
    }];
}
#pragma mark - 旋转
-(void)rotate{
    [UIView animateWithDuration:0.5 animations:^{
        _blackView.transform=CGAffineTransformRotate(_blackView.transform, M_PI_4/3);
    }];
}
#pragma mark - 复原
-(void)reset{
    [UIView animateWithDuration:0.5 animations:^{
        _blackView.transform=CGAffineTransformIdentity;
    }];
}
#pragma mark - 抖动1
-(void)shakeItOne{
    _blackView.transform=CGAffineTransformMakeTranslation(50, 50);
    [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0.1 options:UIViewAnimationOptionCurveLinear animations:^{
        _blackView.transform=CGAffineTransformIdentity;
    } completion:nil];
}
#pragma mark - 抖动2
-(void)shakeItTwo{
    _blackView.transform=CGAffineTransformMakeRotation(M_PI_4);
    [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0.1 options:UIViewAnimationOptionCurveLinear animations:^{
        _blackView.transform=CGAffineTransformIdentity;
    } completion:nil];
}

• 动画图示:

  
  
  Block动画演示.gif

Demo02:咻一咻-支付宝(这个功能已经被阿里取消了)

这个Demo的思想就是在点击最上面的button时,在button下面循环插入与button等大小的圆形View,并且延迟按序变大,颜色从蓝色向视图背景颜色渐变.
block动画不光可以改变transform,可以完成颜色的渐变.

-(void)setUpUI{
    self.view.backgroundColor=[UIColor corgi_colorWithR:34 G:41 B:64];
    UIButton *xiuButton=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];
    xiuButton.center=self.view.center;
    [xiuButton setBackgroundImage:[UIImage imageNamed:@"xiu"] forState:UIControlStateNormal];
    [xiuButton addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:xiuButton];
}
#pragma mark - 点击事件
-(void)click{
    for (int i=0; i<10; i++) {
        //添加view
        UIView *tempView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];
        //设置view位置
        tempView.center=self.view.center;
        //设置view属性
        tempView.backgroundColor=[UIColor blueColor];
        //设置圆角
        tempView.layer.cornerRadius=40;
        //插入到最底层
        [self.view insertSubview:tempView atIndex:0];
        //执行动画类方法
        [UIView animateWithDuration:3
                             delay:i*0.3
                           options:UIViewAnimationOptionCurveLinear
                        animations:^{
                            //动画目标-scale
        tempView.transform=CGAffineTransformMakeScale(8, 8);
                            
                            //动画目标-alpha=0
                            tempView.alpha=0;
                            
                            //动画目标-颜色接近
        tempView.backgroundColor=self.view.backgroundColor;
    }
                        completion:^(BOOL finished) {
                             //动画结束-抹去view
                            [tempView removeFromSuperview ];
                        }];
    }
}

动画效果:

咻一咻.gif

补充:首尾式动画

    //动画开始标记
    UIView beginAnimations:nil context:nil];
    // 设置执行动画的时间
    [UIView setAnimationDuration:0.5];
    // 需要执行动画操作的代码
    _redView.bounds = tempBounds;
    // 提交动画 , 如果不写下面这段代码, 会影响整个view
    [UIView commitAnimations]; 

Tips:首尾式动画没有block动画的阅读性,整体性强,设置动画属性繁琐.所以推荐使用block动画,首尾式动画只要了解原理就可以了.

--------------------------------------------------分割线--------------------------------------------------
写在后面,也不知道谁能看到:最近要做项目了,每天的内容会少一些,见谅.