前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

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

作者头像
Alan Zhang
发布2018-10-19 14:49:21
1.7K0
发布2018-10-19 14:49:21
举报
文章被收录于专栏:Alan's Lab

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

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

首先是实现下面的动画:

代码语言:javascript
复制
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的许多属性都可以用这种方式进行动画,文档中有详细列表。

关键帧动画

代码语言:javascript
复制
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这些动画默认的变化速度是开始结束慢,中间快,于是这种循环动画的效果就不均匀。临时解决办法如下:

代码语言:javascript
复制
// 不知道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,居然解决了。又回头翻文档,确认了文档真的没有写。。。呵呵(有人找到请告诉我。。。)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 关键帧动画
  • 坑爹货
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档