ios学习-- Twitter 的启动动画的实现(bird flying)
2016-10-17 14:08
489 查看
当我第一次打开 twitter 的时候,就被它的启动动画惊艳到了。然而分析一下这个动画其实也不难实现,于是赶紧做一个出来看看。
![](http://www.smartcitychina.cn/upload/2016-10/161017092351973.gif)
整个动画效果能够拆分为以下几步:
布置一个与 LaunchScreen 相同的界面
让视图中间的 Logo 先缩小后放大直至盖满整个屏幕
Logo 在放大过程中逐渐变透明
Initial View Controller 的内容稍微放大后恢复原状
拆分完之后就好办咯,一步步来实现吧~
先布个界面吧
由于后面需要让 logo 变透明,我们选择用 mask 来实现。
let logoLayer = CALayer()
logoLayer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
logoLayer.position = view.center
logoLayer.contents = UIImage(named: "logo")?.cgImage
view.layer.mask = logoLayer
![](http://www.smartcitychina.cn/upload/2016-10/161017092351975.png)
好了,小鸟出来了。
但一开始这个 logo 并不是透明的,于是先在其上盖一层白色的 view,并改一下背景颜色吧。
let shelterView = UIView(frame: view.frame)
shelterView.backgroundColor = .white
view.addSubview(shelterView)
window!.backgroundColor = UIColor(red: 29 / 255.0, green: 161 / 255.0, blue: 242 / 255.0, alpha: 1)
![](http://www.smartcitychina.cn/upload/2016-10/161017092351971.png)
棒,第一步完成。
那接着做 Logo 的缩小放大吧
这里我们用 CAKeyframeAnimation,让这个缩放动作一气呵成。设置好开始时间、持续时间和各个关键帧,最后让它保持动画最后的状态。
let logoAnimation = CAKeyframeAnimation(keyPath: "bounds")
logoAnimation.beginTime = CACurrentMediaTime() + 1
logoAnimation.duration = 1
logoAnimation.keyTimes = [0, 0.4, 1]
logoAnimation.values = [NSValue(cgRect: CGRect(x: 0, y: 0, width: 100, height: 100)),
NSValue(cgRect: CGRect(x: 0, y: 0, width: 85, height: 85)),
NSValue(cgRect: CGRect(x: 0, y: 0, width: 4500, height: 4500))]
logoAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut),
CAMediaTimingFunction(name: kCAMediaTimingFunctionDefault)]
logoAnimation.isRemovedOnCompletion = false
logoAnimation.fillMode = kCAFillModeForwards
logoLayer.add(logoAnimation, forKey: "zoomAnimation")
![](http://www.smartcitychina.cn/upload/2016-10/161017092351972.gif)
又好了。
顺道把 Logo 透明也带上
这个算好渐变透明的时间就好。
UIView.animate(withDuration: 0.3, delay: 1.4, options: .curveLinear, animations: {
shelterView.alpha = 0
}) { (_) in
shelterView.removeFromSuperview()
view.layer.mask = nil
}
![](http://www.smartcitychina.cn/upload/2016-10/161017092351974.gif)
最后,让初始界面颠一下
道理跟第二步相同,就不说了~
let mainViewAnimation = CAKeyframeAnimation(keyPath: "transform")
mainViewAnimation.beginTime = CACurrentMediaTime() + 1.1
mainViewAnimation.duration = 0.6
mainViewAnimation.keyTimes = [0, 0.5, 1]
mainViewAnimation.values = [NSValue(caTransform3D: CATransform3DIdentity),
NSValue(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.1, 1.1, 1)),
NSValue(caTransform3D: CATransform3DIdentity)]
view.layer.add(mainViewAnimation, forKey: "transformAnimation")
view.layer.transform = CATransform3DIdentity
![](http://www.smartcitychina.cn/upload/2016-10/161017092351976.gif)
原文地址:http://www.smartcitychina.cn/QianYanJiShu/2016-10/7866.html?ref=myread
![](http://www.smartcitychina.cn/upload/2016-10/161017092351973.gif)
整个动画效果能够拆分为以下几步:
布置一个与 LaunchScreen 相同的界面
让视图中间的 Logo 先缩小后放大直至盖满整个屏幕
Logo 在放大过程中逐渐变透明
Initial View Controller 的内容稍微放大后恢复原状
拆分完之后就好办咯,一步步来实现吧~
先布个界面吧
由于后面需要让 logo 变透明,我们选择用 mask 来实现。
let logoLayer = CALayer()
logoLayer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
logoLayer.position = view.center
logoLayer.contents = UIImage(named: "logo")?.cgImage
view.layer.mask = logoLayer
![](http://www.smartcitychina.cn/upload/2016-10/161017092351975.png)
好了,小鸟出来了。
但一开始这个 logo 并不是透明的,于是先在其上盖一层白色的 view,并改一下背景颜色吧。
let shelterView = UIView(frame: view.frame)
shelterView.backgroundColor = .white
view.addSubview(shelterView)
window!.backgroundColor = UIColor(red: 29 / 255.0, green: 161 / 255.0, blue: 242 / 255.0, alpha: 1)
![](http://www.smartcitychina.cn/upload/2016-10/161017092351971.png)
棒,第一步完成。
那接着做 Logo 的缩小放大吧
这里我们用 CAKeyframeAnimation,让这个缩放动作一气呵成。设置好开始时间、持续时间和各个关键帧,最后让它保持动画最后的状态。
let logoAnimation = CAKeyframeAnimation(keyPath: "bounds")
logoAnimation.beginTime = CACurrentMediaTime() + 1
logoAnimation.duration = 1
logoAnimation.keyTimes = [0, 0.4, 1]
logoAnimation.values = [NSValue(cgRect: CGRect(x: 0, y: 0, width: 100, height: 100)),
NSValue(cgRect: CGRect(x: 0, y: 0, width: 85, height: 85)),
NSValue(cgRect: CGRect(x: 0, y: 0, width: 4500, height: 4500))]
logoAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut),
CAMediaTimingFunction(name: kCAMediaTimingFunctionDefault)]
logoAnimation.isRemovedOnCompletion = false
logoAnimation.fillMode = kCAFillModeForwards
logoLayer.add(logoAnimation, forKey: "zoomAnimation")
![](http://www.smartcitychina.cn/upload/2016-10/161017092351972.gif)
又好了。
顺道把 Logo 透明也带上
这个算好渐变透明的时间就好。
UIView.animate(withDuration: 0.3, delay: 1.4, options: .curveLinear, animations: {
shelterView.alpha = 0
}) { (_) in
shelterView.removeFromSuperview()
view.layer.mask = nil
}
![](http://www.smartcitychina.cn/upload/2016-10/161017092351974.gif)
最后,让初始界面颠一下
道理跟第二步相同,就不说了~
let mainViewAnimation = CAKeyframeAnimation(keyPath: "transform")
mainViewAnimation.beginTime = CACurrentMediaTime() + 1.1
mainViewAnimation.duration = 0.6
mainViewAnimation.keyTimes = [0, 0.5, 1]
mainViewAnimation.values = [NSValue(caTransform3D: CATransform3DIdentity),
NSValue(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.1, 1.1, 1)),
NSValue(caTransform3D: CATransform3DIdentity)]
view.layer.add(mainViewAnimation, forKey: "transformAnimation")
view.layer.transform = CATransform3DIdentity
![](http://www.smartcitychina.cn/upload/2016-10/161017092351976.gif)
原文地址:http://www.smartcitychina.cn/QianYanJiShu/2016-10/7866.html?ref=myread
相关文章推荐
- 学习iOS动画效果并实现在viewController的转跳上
- ios学习--详解IPhone动画效果类型及实现方法
- IOS实现视频动画效果的启动图
- 实现类似Twitter的启动动画
- iOS学习笔记---iOS用view实现推出菜单栏的动画效果
- iOS学习之动画效果的实现
- Android Animation学习 实现 IOS 滤镜退出动画
- IOS app启动动画的实现
- iOS学习之动画效果的实现
- ios学习:swift中实现分享到微博、facebook,twitter等
- iOS学习之动画效果的实现
- IOS app启动动画的实现
- ios学习--详解IPhone动画效果类型及实现方法
- IOS开发学习笔记022-imageView实现动画
- iOS开发学习之动画实现
- ios学习:swift中实现分享到微博、facebook,twitter等
- iOS动画进阶 - 实现类似美颜相机的相机启动动画
- Android Animation学习 实现 IOS 滤镜退出动画
- 【iOS学习笔记】CALayer实现,界限、透明度、位置、旋转、缩放组合动画(转)