iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一。不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太轻松了!

这里就介绍一下iOS的block-based animation的简单用法。文后有一个坑爹问题的临时解决方法,请知情人不吝赐教。

首先是实现下面的动画:

let mView = view.viewWithTag(1) as UIView!

mView.alpha = 0

UIView.animateWithDuration(1, animations: {
        mView.alpha = 1
    }, completion: {
        finished in

        UIView.animateWithDuration(1, animations: {
            mView.alpha = 0
        })

    })

新建一个 singleView 模版,在 storyboard 里加入一个 View ,颜色随便设, tag 设置成1.

然后把上文代码粘贴进 view controller 的 viewDidLoad 方法中,运行即可。

block-base 动画的用法非常简单,先设置初始状态,再在animationWithDuration 或其他动画方法的 animations 里设置结束的状态,其他的全部不用管。

上文代码中,首先让 mView 的透明度从0动画到1,然后在 completion 的 closure 中再次设置一个动画,让 mView 的透明度回到0。

View的许多属性都可以用这种方式进行动画,文档中有详细列表。

关键帧动画

UIView.animateKeyframesWithDuration(2.0,                                    // 持续时间
                             delay: 0,
                           options: UIViewKeyframeAnimationOptions.Repeat,  // 设置重复播放
                        animations: {

    // 第一个关键帧,alpha从0到1
    UIView.addKeyframeWithRelativeStartTime(0,   // 开始时间
                          relativeDuration: 0.5, // 持续时间
                                animations: {  
        mView.alpha = 1
    })

    // 第二个关键帧,alpha从1到0
    UIView.addKeyframeWithRelativeStartTime(0.5,
                          relativeDuration: 0.5,
                                animations: {
        mView.alpha = 0
    })

}, completion: nil)

还是实现上面一样的动画,但这次的方式相对要更加好一些。(针对这个例子其实我更喜欢前一段代码。。。)

需要注意的一点是addKeyframeWithRelativeStartTime中的startTime和relativeDuration都是相对与整个关键帧动画的持续时间(这里是2秒)的百分比,设置成0.5就代表2*0.5=1(秒)。

坑爹货

在实现上面的效果的时候遇到了一个问题:iOS这些动画默认的变化速度是开始结束慢,中间快,于是这种循环动画的效果就不均匀。临时解决办法如下:

// 不知道Apple建不建议把 UIViewAnimationOption 用在这里,但这两行确实解决了问题。
let raw = UIViewKeyframeAnimationOptions.Repeat.rawValue | UIViewAnimationOptions.CurveLinear.rawValue
let options = UIViewKeyframeAnimationOptions(raw)

UIView.animateKeyframesWithDuration(2.0, delay: 0, options: options, animations: {
    UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.25, animations: {
        mView.alpha = 1
        mView1.alpha = 0
        mView2.alpha = 1
        mView3.alpha = 1
    })
    UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25, animations: {
        mView.alpha = 1
        mView1.alpha = 1
        mView2.alpha = 0
        mView3.alpha = 1
    })
    UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.25, animations: {
        mView.alpha = 1
        mView1.alpha = 1
        mView2.alpha = 1
        mView3.alpha = 0
    })
    UIView.addKeyframeWithRelativeStartTime(0.75, relativeDuration: 0.25, animations: {
        mView.alpha = 0
        mView1.alpha = 1
        mView2.alpha = 1
        mView3.alpha = 1
    })
}, completion: nil)

原来以为关键帧动画的参数 UIViewKeyframeAnimationOptions.CalculationModeLinear 可以解决这个问题,但好像理解错了,文档里也没有提到别的办法。折腾半天快放弃的时候,误打误撞用了UIViewAnimationOptions.CurveLinear,居然解决了。又回头翻文档,确认了文档真的没有写。。。呵呵(有人找到请告诉我。。。)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏QQ音乐技术团队的专栏

小窗播放视频的原理和实现(上)

本文对小窗视频播放进行了详细的研究,针对几种实现方案进行了深入的对比分析,进而给出实现小窗视频播放的最优解。

4K15
来自专栏Coding迪斯尼

VUE+WebPack游戏设计:实现盒子爆破效果和界面美化

1653
来自专栏前端黑板报

canvas-入门

定义 canvas是HTML5新增的一个重要元素,先看下它的定义: <canvas> is an HTML element which can be used ...

22710
来自专栏Android常用基础

自定义View(六)-动画- AnimatorSet与XML设置属性动画

AnimatorSet是组合动画,前面在ObjectAnimator.ofPropertyValuesHolder(),时也可以做到控制多个属性做动画,但是.o...

1362
来自专栏Python小屋

Python操作高版本Excel文件:颜色、边框、合并单元格

本文主要颜色Python扩展库openpyxl的一些基本用法,包括创建工作簿、选择活动工作表、写入单元格数据,设置单元格字体颜色、边框样式,合并单元格等等。 f...

5295
来自专栏WindCoder

一个创建产品动画说明视频的新手指南

英文原文:A Step-by-step Guide to Creating Animated Product Explainer Videos

1891
来自专栏wOw的Android小站

[iOS] 列表滑动展开隐藏头部HeaderView

首先看一下BiliBili客户端的视频浏览界面。默认界面Header完全展开,并且Header显示AV号(别乱想,就是视频编号了)以及播放按钮。滑动之后Head...

5152
来自专栏IMWeb前端团队

Canvas雾玻璃

本文作者:IMWeb rakuluo 原文出处:IMWeb社区 未经同意,禁止转载 Demo http://lumixraku.github.io/d...

2119
来自专栏coding for love

CSS入门12-浮动与清除浮动

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

861
来自专栏Android机动车

Android 约束布局ConstraintLayout1.1.0 版详解

在http://dyg8.com/20180205/Android-ConstraintLayout-Detailed/这篇文章中,我们对 Constraint...

1164

扫码关注云+社区

领取腾讯云代金券