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,居然解决了。又回头翻文档,确认了文档真的没有写。。。呵呵(有人找到请告诉我。。。)
- 点赞
- 收藏
- 分享
- 文章举报
- iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题
- iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题
- iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题
- PHP setcookie设置Cookie用法(及设置无效的问题)
- 在jsp中过滤器的用法(简单解决中文乱码问题)
- SysBase常见问题【设置字符集】
- 《Applications=Code+Markup》读书札记(2)——创建一个简单的 WPF 程序的代码结构及关于 Window 实例位置设置问题
- jquery.post用法补充(type设置问题)
- div+css布局问题:设置浮动后的div高度变化后不超出最外层div
- 简单的设置不简单:三例奇怪的无线路由器不能上网问题解决
- 原创:关于UIButton嵌入到UIView点击无反应问题的解决方法和delegate的简单用法示例
- MyEclipse/Eclipse简单设置提高运行速度
- Android适配器之ArrayAdapter、SimpleAdapter和BaseAdapter的简单用法与有用代码片段(转)
- iOS开发UI篇—iOS开发中三种简单的动画设置
- iOS开发UI篇—iOS开发中三种简单的动画设置
- iOS开发UI篇—iOS开发中三种简单的动画设置
- JScrollPane控件中添加其他控件的问题&&JScrollPane设置滚动条&&调整滚动速度
- 合理设置的MTU值,解决“部分网站打不开”“上网速度慢”等问题,并且可以适当提升上网速度
- Android适配器之ArrayAdapter、SimpleAdapter和BaseAdapter的简单用法与有用代码片段