当前位置: 首页 > 工具软件 > UIView-Easing > 使用案例 >

iOS 动画之视图动画 UIView Animation

贺功
2023-12-01

iOS 很美的一部分就是它的动画,动画对于用户体验的提升很重要。iOS 提供了一些简单的 API 来帮助我们实现一些比较简单的动画,不能小看这些简单的 API,大道至简不是么 :]

实际上的确是这样子,很多动画并不需要什么奇技淫巧,往往可以用更简单的方式来实现。

最近阅读完 ios 核心动画技巧 这本书后,对于 iOS 动画有了一些基本的了解,但是此书讲的比较深,所以有很多地方不是很明白。由于我是很快的去阅读,所以没有写一些比较基本的代码来做一些实现,因此又照着 RaywenderLich 的 iOS Animation 教程开始做一些例子,来加强学习。

UIView 类提供了大量的动画 API,这些都是 UIView 的类方法,使用这些方法来实现动画将会变的很简单。

视图的属性动画

UIView 的 + animateWithDuration:delay:options:animations:completion: 方法,可以通过改变视图的一些属性来生成动画。

+ (void)animateWithDuration:(NSTimeInterval)duration 
            delay:(NSTimeInterval)delay 
                        options:(UIViewAnimationOptions)options 
                        animations:(void (^)(void))animations 
                        completion:(void (^)(BOOL finished))completion
复制代码

这个方便使用起来很简单,只需要在 animations 参数中的 block 中写入对 UIView 属性的改变即可,系统会自动根据你的代码,将属性的改变做一个平缓的动画。

  • duration :整个动画持续的时间
  • delay:动画在多久之后开始,值为 0 表示代码执行到这里后动画立刻开始
  • options:一些有关动画的设置,例如想要动画刚开始比较快,到快结束时比较慢,都在这里设置。
  • animations:在这个 block 中写入你想要执行的代码即可。block 中对视图的动画属性所做的改变都会生成动画
  • completion:动画完成后会调用,finished 表示动画是否成功执行完毕。可以将动画执行完成后需要执行的代码写在这里

举个例子,我想让一个 View 从左上角移动到右下角某个位置,并且背景色更改为 red,整个移动的过程(动画持续执行的时间)为 1 秒,并且延迟 0.3 秒执行。那么可以这么写:

- (void)animationProperty {
    [UIView animateWithDuration:1.0 delay:0.3 options:0 animations:^{
        self.someView.center = CGPointMake(300, 400);
        self.someView.backgroundColor = [UIColor redColor];
    } completion:^(BOOL finished) {
        NSLog(@"动画完成了");
    }];
}
复制代码

当这个方法被调用时,首先有一个 0.3 秒的延迟,然后动画开始,在 1 秒内 someView 将从原来的位置移动到 (300,400)的位置,并且背景色有原来的颜色逐渐变为红色。

其实在上面的代码中,我们只是告诉系统,我希望有一个动画,这个动画的动作为视图位置与背景色的更改,设置好动画时间,其他的工作系统已经为我们全部做好,并且在动画完成时还通知我们。

可以看出使用 UIView 的类方法实现动画很是便捷。

细心点就会发现,我们对 UIView 的属性做了改变,然后系统相应地自动为属性的整个改变过程做了动画。那么 UIView 的哪些属性支持动画呢?

  • 位置和大小(Position & Size):你可以改变视图的位置和大小,使得 View 变大变小或移动到某个位置,具体可以使用这些属性:
  • bounds:重新设置 View 的大小
  • Frame:移动或缩放 View
  • center:更改 View 的位置(有关 UIView 的 center、Frame 等关系另行搜索 )
  • 外观(Appearance):可以通过设置以下属性来更改 view 的外观:
  • backgroundColor:这个就比较简单啦,背景色的改变在这个动画期间是从原来的旧值过渡到新值的
  • alpha:此值的变化也是过渡的,设置为 0 可以让 view 逐渐消失
  • 变换(Transformation):主要通过改变 View 的 transform 来做动画,这样子就可以做更多的事情啦。transform 具体就不讲了,不懂的可以搜一下。

动画选项 Animation Options

在刚才的方法中,options 选项我们填写了 0 ,表示采用默认的值。options 主要用于设置动画的一些执行特性,告诉 UIKit 来如何创建动画。下面我们来看一哈这个枚举类型都有哪些值。

重复 Repeat

首先可以简单看一下下面两个选项:

-UIViewAnimationOptionRepeat:表示动画重复执行,即执行完成后再来一次. -UIViewAnimationOptionAutoreverse: 这个选项只能配合 repeat 一起使用,表示反向重复,即这个动画是来来回回的执行,并不是简单重复。更简单点说就是,动画完成后倒退回去再继续整个过程。

减缓 easing

在真实的世界中,运动都是有一个过程的,例如球的滚动是刚开始比较快,最后快停下来的时候比较慢。下面的选项就是设置动画执行的速度的:

  • UIViewAnimationOptionCurveLinear:线性地,即始终都是一个速率,以某个速度突然的开始动画,突然的停止动画,整个动画过程都是一个速率。

  • UIViewAnimationOptionCurveEaseIn:缓慢的开始,然后以某个速率开始动画,一直到结束

  • UIViewAnimationOptionCurveEaseOut:缓慢的结束

  • UIViewAnimationOptionCurveEaseInOut:开始和结束时都比较缓慢

还有其他的一些选项,这里不做多的说明,可以看文档并且自己动手实践来体会,这也是最好的方法。

动画完成时的回调 completion

当动画序列执行完毕后,系统将执行回调中的代码。block 中只有一个 finished 参数表示 block 被调用时,动画是否完成。

如果动画的 duration 为 0 ,那么block 中的代码将在下一个 RunLoop 循环中执行。

此时,我们可以使用这个 UIView 类方法实现大多数我们想要的动画。属性动画是可以合并的,比如在移动的同时缩放、更改背景色。

动画可以叠加,串成一个动画链。比如在 animation1 的 completion 回调中创建 animation2,那么动画1 完成后将继续执行动画 2。

根据官方文档,在整个动画过程中,用户交互对于此视图是暂时无效的(而IOS5.0前,动画过程中,用户交互对于整个应用是无效的),如果想要用户可以和视图交互,可以改变 UIViewAnimationOptionAllowUserInteraction

一些个人的想法

下面讲一下个人的一些理解,但是不能保证正确,如果有错误的地方还请在评论中指出,大家相互学习。

UIView 的这个类方法本质为创建 CAAnimation 对象并且添加到相应的 view 所管理的 CALayer 上,然后在下个 RunLoop 中执行动画。

如果在多个类方法中将 view 的属性做改变,那么创建的 CAAnimation 对象将做合并。

转载于:https://juejin.im/post/5a30f24bf265da432f311e07

 类似资料: