iOS 动画之 UIView动画
2017-11-04 本文已影响0人
树根曰
在iOS开发者，几乎每个APP都会使用一些动画， 精美的动画给人非常舒适的体验，在APP开发中实现动画效果有很多种方式, 对于简单的应用场景，我们可以使用UIKit提供的画UIView动画来实现. UIKit提供给我们的动画接口。这些接口函数足够的强大并且十分的灵活, 足以满足我们开发中大部分的动画需求。
在写动画之前我们一般会进行一下几点思考:
- 动画前 View在哪儿？
- 动画后 View会到哪儿？
- 执行动画的这个View 以什么样的方式移动到目标位置？
- 该动画持续多长时间？
- ......等等
在UIView中有很多属性用以描述一个UIView的状态，而动画就是让UIView从一个状态平滑的过渡到另外一个状态的过程。这些属性有：
属性名 作用
frame 控制UIView的大小和该UIView在superview中的相对位置。
bounds 控制UIView的大小
center 控制UIView的位置
transform 控制UIView的缩放，旋转角度等固定好中心位置之后的变化
alpha 控制UIView的透明度
backgroundColor 控制UIView的背景色
contentStretch 控制UIView的拉伸方式
通过设置这些属性，基本上就解决了动画中的移动到哪儿的问题。
在这里我以 UIView frame 变化为例. 通过 UIKit 提供的接口, 实现我们需要的效果.
一、基本动画
1、最简洁的Block动画：包含时间和动画
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
animations:^{
//执行的动画
}];
2、带有动画完成回调的Block动画
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
animations:^{
//执行的动画
}completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
demo 代码
- (void)setUpView {
//示例 view
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(70, 150, 200, 100)];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
_view1 = view1;
//
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(70, 280, 100, 50)];
view2.backgroundColor = [UIColor greenColor];
[self.view addSubview:view2];
_view2 = view2;
}
//点击屏幕开始动画
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self showAnimation];
}
- (void)showAnimation {
[UIView animateWithDuration:2.0f animations:^{
_view2.frame = _view1.frame;
}];
}
二、Spring动画
iOS7.0后新增Spring动画（iOS系统动画大部分采用Spring Animation，适用于所有可被添加动画效果的属性）
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
delay:(NSTimeInterval) //动画延迟执行的时间
usingSpringWithDamping:(CGFloat) //震动效果，范围0~1，数值越小震动效果越明显
initialSpringVelocity:(CGFloat) //初始速度，数值越大初始速度越快
options:(UIViewAnimationOptions)//动画的过渡效果(demo 中有详细介绍)
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
demo 代码
[UIView animateWithDuration:2.0f
delay:0.f
usingSpringWithDamping:0.5f
initialSpringVelocity:5.0f
options:UIViewAnimationOptionCurveEaseOut
animations:^{
_view2.frame = _view1.frame;
} completion:^(BOOL finished) {
HW_Log(@"动画结束");
}];
三、Keyframes动画
1. iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧
[UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
animations:^{
//执行的关键帧动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
2.增加关键帧的方法：
[UIView addKeyframeWithRelativeStartTime:(double)//动画开始的时间（占总时间的比例）
relativeDuration:(double) //动画持续时间（占总时间的比例）
animations:^{
//执行的动画
}];
demo 代码
- (void)showAnimation {
[UIView animateKeyframesWithDuration:8.0f
delay:0.0f
options:UIViewKeyframeAnimationOptionCalculationModeLinear
animations:^{
//关键帧动画
[self keyframeAnimation];
} completion:^(BOOL finished) {
HW_Log(@"动画结束");
}];
}
- (void)keyframeAnimation {
[UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
_view1.backgroundColor = [UIColor blackColor];
}];
[UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
_view1.backgroundColor = [UIColor cyanColor];
}];
[UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
_view1.backgroundColor = [UIColor brownColor];
}];
[UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
_view1.backgroundColor = [UIColor orangeColor];
}];
}
四、转场动画
1. 单个视图的过渡效果 <控制器内, 单个视图重新布局时, 动画效果>
[UIView transitionWithView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
2 从旧视图转到新视图的动画效果 <控制器内, 两个 view 切换>
[UIView transitionFromView:(nonnull UIView *)
toView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
在该动画过程中，fromView 会从父视图中移除，并讲 toView 添加到父视图中，注意转场动画的作用对象是父视图（过渡效果体现在父视图上）。
调用该方法相当于执行下面两句代码：
[fromView.superview addSubview:toView];
[fromView removeFromSuperview];
demo 代码
- (void)showAnimation1 {
[UIView transitionWithView:self.view
duration:2.0f
options:UIViewAnimationOptionTransitionCurlUp
animations:^{
self.view.backgroundColor = [UIColor orangeColor];
} completion:^(BOOL finished) {
}];
}
- (void)showAnimation2 {
if (_selectedIndex == 0) {
[UIView transitionFromView:self.firstView
toView:self.secondView
duration:2.0f
options:UIViewAnimationOptionTransitionFlipFromTop
completion:^(BOOL finished) {
HW_Log(@"firstView 切换为 secondView");
}];
}else{
[UIView transitionFromView:self.secondView
toView:self.firstView
duration:2.0f
options:UIViewAnimationOptionTransitionFlipFromBottom
completion:^(BOOL finished) {
HW_Log(@"secondView 切换为 firstView");
}];
}
}
这样介绍怎么看都很苍白, 何不直接上代码?
demo 中不仅有 UIView 动画的简单介绍, 还有一些更加生动的示例.
最后, 写了一个 DEMO, 有兴趣的可以下载看看.😊
