美文网首页
iOS Core Animation - UIView Anim

iOS Core Animation - UIView Anim

作者: gaxly | 来源:发表于2017-02-27 23:39 被阅读69次

    UIView Animation

    简单动画

    对于 UIView 上简单的动画,iOS 提供了很方便的函数:

    + animateWithDuration:animations:
    

    第一个参数是动画的持续时间,第二个参数是一个 block,在 animations block 中对 UIView 的属性进行调整,设置 UIView 动画结束后最终的效果,iOS 就会自动补充中间帧,形成动画。
    可以更改的属性有:

    • frame
    • bounds
    • center
    • transform
    • alpha
    • backgroundColor
    • contentStretch

    这些属性大都是 View 的基本属性,下面是一个例子,这个例子中的动画会同时改变 ViewframebackgroundColoralpha

    [UIView animateWithDuration:2.0 animations:^{
        myView.frame = CGRectMake(50, 200, 200, 200);
        myView.backgroundColor = [UIColor blueColor];
        myView.alpha = 0.7;
    }];
    

    其中有一个比较特殊的 transform 属性,它的类型是 CGAffineTransform,即 2D 仿射变换,这是个数学中的概念,用一个三维矩阵来表述 2D 图形的矢量变换。用 transform 属性对 View 进行:

    • 旋转
    • 缩放
    • 其他自定义 2D 变换

    iOS 提供了下面的函数可以创建简单的 2D 变换:

    • CGAffineTransformMakeScale
    • CGAffineTransformMakeRotation
    • CGAffineTransformMakeTranslation
      例如下面的代码会将 View 缩小至原来的 1/4 大小:
    [UIView animateWithDuration:2.0 animations:^{
        myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
    }];
    

    调节参数

    完整版的 animate 函数其实是这样的:

    + animateWithDuration:delay:options:animations:completion:
    

    可以通过 delay 参数调节让动画延迟产生,同时还一个 options 选项可以调节动画进行的方式。可用的 options 可分为两类:

    控制过程

    例如 UIViewAnimationOptionRepeat 可以让动画反复进行, UIViewAnimationOptionAllowUserInteraction 可以让允许用户对动画进行过程中同 View 进行交互(默认是不允许的)

    控制速度

    动画的进行速度可以用速度曲线来表示,提供的选项例如:
    UIViewAnimationOptionCurveEaseIn 是先慢后快,UIViewAnimationOptionCurveEaseOut 是先快后慢。
    不同的选项直接可以通过“与”操作进行合并,同时使用,例如:

    UIViewAnimationOptionRepeat | UIViewAnimationOptionAllowUserInteraction
    

    关键帧动画

    上面介绍的动画中,我们只能控制开始和结束时的效果,然后由系统补全中间的过程,有些时候我们需要自己设定若干关键帧,实现更复杂的动画效果,这时候就需要关键帧动画的支持了。下面是一个示例:

    [UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat | UIViewKeyframeAnimationOptionAutoreverse animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
            self.myView.frame = CGRectMake(10, 50, 100, 100);
        }];
        [UIView addKeyframeWithRelativeStartTime: 0.5 relativeDuration:0.3 animations:^{
            self.myView.frame = CGRectMake(20, 100, 100, 100);
        }];
        [UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{
            self.myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
        }];
    } completion:nil];
    

    这个例子添加了三个关键帧,在外面的 animateKeyframesWithDuration 中我们设置了持续时间为 2.0 秒,这是真实意义上的时间,里面的 startTime 和 relativeDuration 都是相对时间。以第一个为例,startTime 为 0.0,relativeTime 为 0.5,这个动画会直接开始,持续时间为 2.0 X 0.5 = 1.0 秒,下面第二个的开始时间是 0.5,正好承接上一个结束,第三个同理,这样三个动画就变成连续的动画了。

    View 的转换

    iOS 还提供了两个函数,用于进行两个 View 之间通过动画换场:

    + transitionWithView:duration:options:animations:completion:
    + transitionFromView:toView:duration:options:completion:
    

    需要注意的是,换场动画会在这两个 View 共同的父 View 上进行,在写动画之前,先要设计好 View 的继承结构。

    同样,View 之间的转换也有很多选项可选,例如 UIViewAnimationOptionTransitionFlipFromLeft 从左边翻转,UIViewAnimationOptionTransitionCrossDissolve 渐变等等。

    参考:https://zhuanlan.zhihu.com/p/20031427?columnSlug=cheerfox#!

    相关文章

      网友评论

          本文标题:iOS Core Animation - UIView Anim

          本文链接:https://www.haomeiwen.com/subject/iabtgttx.html