前言
在我们开发App中，会经常使用到动画去实现一些提示或者更友好的表达一些需要表达的事情，使用动画可以让我们的APP更酷更炫，最重要的是优化用户体验，但取决于动画的质量。本文会介绍一下UIView动画实现。
一.UIView类实现代码
- 基本用法
使用beginAnimations 和 commitAnimations
简单的例子[UIView beginAnimations:nil context:nil]; // 开始动画 // Code... do something [UIView commitAnimations]; // 提交动画
UIView *animationView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
animationView.backgroundColor = [UIColor redColor];
[self.view addSubview:animationView];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1]; // 动画执行的时间
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//动画曲线
//UIView 向下移动100
CGPoint center = animationView.center;
center.y += 100;
animationView.center = center;
//变换颜色
animationView.backgroundColor = [UIColor yellowColor];
[UIView commitAnimations];
效果如下
2017-02-21 23_28_42.gif
其他的一些方法
// 开始动画
+ (void)beginAnimations:(NSString *)animationID context:(void *)context;
// 提交动画
+ (void)commitAnimations;
// 设置动画曲线，默认是匀速进行：
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;
// 设置动画时长：
+ (void)setAnimationDuration:(NSTimeInterval)duration;
// 默认为YES。为NO时跳过动画效果，直接跳到执行后的状态。
+ (void)setAnimationsEnabled:(BOOL)enabled;
// 设置动画延迟执行（delay：秒为单位）：
+ (void)setAnimationDelay:(NSTimeInterval)delay;
// 动画的重复播放次数
+ (void)setAnimationRepeatCount:(float)repeatCount;
// 如果为YES，逆向（相反）动画效果，结束后返回动画逆向前的状态; 默认为NO：
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;
// 设置动画代理：
+ (void)setAnimationDelegate:(id)delegate;
// 动画将要开始时执行方法××（必须要先设置动画代理）：
+ (void)setAnimationWillStartSelector:(SEL)selector;
// 动画已结束时执行方法××（必须要先设置动画代理）：
+ (void)setAnimationDidStopSelector:(SEL)selector;
/**
* 设置动画过渡效果
*
* @param transition 动画的过渡效果
* @param view 过渡效果作用视图
* @param cache 如果为YES，开始和结束视图分别渲染一次并在动画中创建帧；否则，视图将会渲染每一帧。例如，你不需要在视图转变中不停的更新，你只需要等到转换完成再去更新视图。
*/
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;
// 删除所有动画层
// 注意：层指的是layout，例：[aimationView.layer removeAllAnimations];
- (void)removeAllAnimations;
二.使用UIView的动画代码块
最基本的使用
[UIView animateWithDuration:1.0//动画的执行时长 浮点型，可以0.几秒
animations:^{
//do something
}];
还有几个方法，在基础上增加了一些参数的设置
//1.增加了完成后的Block
[UIView animateWithDuration:1.0 // 动画时长
animations:^{
//do something
}
completion:^(BOOL finished) {
// 动画完成后执行
//do something
}];
//2.增加了延迟执行 和 执行曲线
[UIView animateWithDuration:1.0 // 动画执行时长
delay:2.0 // 动画延迟执行时长
options:UIViewAnimationOptionCurveEaseInOut // 动画执行曲线
animations:^{
//do something
} completion:^(BOOL finished) {
// 动画完成后执行
//do something
}];
三.开启装逼模式了：弹簧
什么是弹簧呢？ 我们来看看效果：
2017-02-21 23_53_27.gif
这个是刚才那代码只是位置上为了凸显更明显，我修改成变成的形状这样的话，跟弹簧一样更加形象。
[UIView animateWithDuration:3.0 // 动画时长
delay:0.0 // 动画延迟
usingSpringWithDamping:0.5 // 类似弹簧振动效果 0~1
initialSpringVelocity:2.0 // 初始速度
options:UIViewAnimationOptionCurveEaseInOut // 动画过渡效果
animations:^{
CGRect frame = animationView.frame;
frame.size.height += 200;
animationView.frame = frame;
//变换颜色
animationView.backgroundColor = [UIColor yellowColor];
} completion:^(BOOL finished) {
}];
备注：
usingSpringWithDamping 范围为 0.0f 到 1.0f ，数值越小「弹簧」的振动效果越明显（不要设置 0 不然效果会特别炫，自己可以试试）
nitialSpringVelocity：初始的速度，数值越大一开始移动越快。
这个弹簧效果是iOS7 之后才增加的，不过对于现在的机型适配来说，这个已经可以直接使用了，目前iOS7 的用户也已经很少了。
四.来个高级点的 关键帧动画
[UIView animateKeyframesWithDuration:1.5
delay:0.0
options:UIViewKeyframeAnimationOptionCalculationModeLinear
animations:^{
[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.25 animations:^{
CGPoint center = animationView.center;
center.x += 200.0;
animationView.center = center;
}];
[UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
CGPoint center = animationView.center;
center.y += 200.0;
animationView.center = center;
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
CGPoint center = animationView.center;
center.x -= 200.0;
animationView.center = center;
}];
[UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
CGPoint center = animationView.center;
center.y -= 200.0;
animationView.center = center;
}];
} completion:^(BOOL finished) {
}];
这里面使用了两个方法 我们来看看这两个方法是使用的
[UIView animateKeyframesWithDuration:1.5 //动画时长
delay:0.0// 延迟执行时长
options:UIViewKeyframeAnimationOptionCalculationModeLinear //执行曲线
animations:^{
//用于添加关键帧
//以前的简单的动画是不考虑动画执行的过程，只需要考虑开始点和结束点则可以，但是复杂点的动画，需要改变动画执行的轨迹，设置关键帧则可以在需要改变的轨迹点。
} completion:^(BOOL finished) {
}];
//添加关键帧
[UIView addKeyframeWithRelativeStartTime:0
relativeDuration:0.25
animations:^{
CGPoint center = animationView.center;
center.x += 200.0;
animationView.center = center;
}];
//StartTime：表示当前的关键帧动画开始时间 设置范围 0~1 表示在整个动画时长中开始的时间点 百分比 例如设置0.5 这在动画（时长5秒）中的2.5秒开始执行这个关键帧动画
//relativeDuration：表示当前的关键帧动画执行时长 设置范围 0~1 表示在整个动画时长中占动画时长 百分比 例如设置0.5 这在动画（时长5秒）中的执行这个关键帧动画时长为2.5秒
这边都是一些简单的说明，如果有任何问题可以直接留言
下一章，则会记录下 如何在使用了Autolayout的控件中执行动画。
网友评论