本周热门月度阅读
本站仅为用户提供信息存储空间服务及链接、搜索服务，所有资源信息均未作修改，不对其真实性、合法性负责。
如有涉嫌侵权或违法违规内容，请，以便及时处理。起点软件 - 所有软件均来自网络如有版权问题请联系我们 - 浙ICP备号
Copyright & 2004- online services. All rights reserved.1977人阅读
iOS动画进阶（4）
如果移动端访问不佳，可以访问
最近在写一个相册的demo，偶尔看到了美拍的相机过载动画觉得很有意思，就想在我的相册demo中加入一个这种特效，下面把我的想法和实现过程给大家分享一下
先上效果图：（）
这个动效看起来很有特色但是实现起来是非常简单的，只需要用到CALayer和CAShapeLayer做为展示层，然后通过CABasicAnimation实现动画就行了~
用两个CALayer来呈现启动的image
通过UIBezierPath和CAShapeLayer来画出具有曲线的CAShapeLayer
然后将曲线的CAShapeLayer做为CALayer的mask
最后通过CABasicAnimation做一个简单的位移动画
先绘制上半部分的layer
private func configTopShapeLayer() {
//绘制贝斯尔曲线
let topBezier:UIBezierPath = UIBezierPath()
topBezier.moveToPoint(CGPointMake(-1, -1))
topBezier.addLineToPoint(CGPointMake(bounds.width+1, -1))
topBezier.addCurveToPoint(CGPointMake(bounds.width/2.0+1, bounds.height/2.0+1), controlPoint1: CGPointMake(bounds.width+1, 0+1), controlPoint2: CGPointMake(343.5+1, 242.5+1))
topBezier.addCurveToPoint(CGPointMake(-1, bounds.height+2), controlPoint1: CGPointMake(31.5+2, 424.5+2), controlPoint2: CGPointMake(0+2, bounds.height+2))
topBezier.addLineToPoint(CGPointMake(-1, -1))
topBezier.closePath()
//创建一个CAShapeLayer，将绘制的贝斯尔曲线的path给CAShapeLayer
let topShape = CAShapeLayer()
topShape.path = topBezier.CGPath
//给topLayer设置contents为启动图
topLayer.contents = launchImage?.CGImage
topLayer.frame = bounds
layer.addSublayer(topLayer)
//将绘制后的CAShapeLayer做为topLayer的mask
topLayer.mask = topShape
绘制后的结果是这样的：
然后以同样的原理绘制下半部分的layer
private func configBottomShapeLayer() {
//绘制贝斯尔曲线
let bottomBezier:UIBezierPath = UIBezierPath()
bottomBezier.moveToPoint(CGPointMake(bounds.width, 0))
bottomBezier.addCurveToPoint(CGPointMake(bounds.width/2.0, bounds.height/2.0), controlPoint1: CGPointMake(bounds.width, 0), controlPoint2: CGPointMake(343.5, 242.5))
bottomBezier.addCurveToPoint(CGPointMake(0, bounds.height), controlPoint1: CGPointMake(31.5, 424.5), controlPoint2: CGPointMake(0, bounds.height))
bottomBezier.addLineToPoint(CGPointMake(bounds.width, bounds.height))
bottomBezier.addLineToPoint(CGPointMake(bounds.width, 0))
bottomBezier.closePath()
//创建一个CAShapeLayer，将绘制的贝斯尔曲线的path给CAShapeLayer
let bottomShape = CAShapeLayer()
bottomShape.path = bottomBezier.CGPath
//给bottomLayer设置contents为启动图
bottomLayer.contents = launchImage?.CGImage
bottomLayer.frame = bounds
layer.addSublayer(bottomLayer)
//将绘制后的CAShapeLayer做为bottomLayer的mask
bottomLayer.mask = bottomShape
这里注意的是画的贝斯尔曲线上半部分的要整体向下平移1到2个像素，为了防止贝斯尔曲线画曲线导致的锯齿效果，下面是下半部分完成后的效果图：
最后给两个layer一个位移动画
展开的动画
func starAnimation() {
let topAnimation = CABasicAnimation.init(keyPath: "anchorPoint")
topAnimation.toValue = NSValue.init(CGPoint: CGPointMake(1, 1))
topAnimation.duration = 0.6
topAnimation.delegate = self
topAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
topAnimation.removedOnCompletion = false
topAnimation.fillMode = kCAFillModeForwards
topLayer.addAnimation(topAnimation, forKey: "topAnimation")
let bottomAnimation = CABasicAnimation.init(keyPath: "anchorPoint")
bottomAnimation.toValue = NSValue.init(CGPoint: CGPointMake(0, 0))
bottomAnimation.duration = 0.6
bottomAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
bottomAnimation.removedOnCompletion = false
bottomAnimation.fillMode = kCAFillModeForwards
bottomLayer.addAnimation(bottomAnimation, forKey: "topAnimation")
动画完成后移除当前view
internal override func animationDidStop(anim: CAAnimation, finished flag: Bool)
removeFromSuperview()
这里为了方便观察，我将动画时间变长了，下面是完成后的效果图：
到这里这个动效就完成的差不多了，希望大家能学到东西，如果大家有更好的实现办法也可以给我提意见，我学习学习，谢谢大家观看，另外附加，喜欢的可以关注一下
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：152564次
积分：2305
积分：2305
排名：第14289名
原创：62篇
评论：139条
阅读：15471
阅读：5648
文章：12篇
阅读：21078
文章：12篇
阅读：35962
(3)(7)(2)(4)(5)(5)(10)(7)(4)(4)(4)(4)(5)(2)(3)(3)(1)漫画大头贴风靡社交圈 看美颜相机如何突破“次元壁”_凤凰资讯
漫画大头贴风靡社交圈 看美颜相机如何突破“次元壁”
用微信扫描二维码分享至好友和朋友圈
齐鲁晚报讯 从剪刀手到嘟嘴卖萌，再到小动物耳朵鼻子上脸....瞬息变化的自拍界玩法可谓越来越花式、越来越新奇。
原标题：漫画大头贴风靡社交圈 看美颜相机如何突破“次元壁”齐鲁晚报讯 从剪刀手到嘟嘴卖萌，再到小动物耳朵鼻子上脸....瞬息变化的自拍界玩法可谓越来越花式、越来越新奇。盘点2016年的自拍新动作，必须要聊到从中秋节开始刷遍各大朋友圈的“动漫大头贴”。这款由美颜相机app开发的自拍新特效，直接打破“次元壁”，将人们拉入二次元世界，化身为“肤白貌美”的漫画少年少女。动漫大头贴的进击翻看微博和朋友圈会发现，不只身边的少女们爱上了动漫特效，连原本爱拍高逼格照片的明星也不忘卖萌一把。Angelababy、赵丽颖、唐嫣等女星用完特效后直接“萌翻天”，颜王孙红雷的加入更诠释了动漫特效将“大哥”变成“小娇羞”的“化腐朽为神奇”之力。据美颜相机数据统计，大头上线至今4个月，已经产生了7亿多张大头贴特效照片。其微博活动#动漫大头贴#更是创下4.1亿次阅读；与赵丽颖合作推出的“赵小兔动漫大头贴”特效使用量也达到数千万，在微博上的话题阅读量破亿。然而疯狂撩拨少女心的美颜相机团队并没有停下自己的洪荒之力，而是在今年年末“祭”出了动漫大头贴的升级版——漫画大头贴。美颜相机此次力邀了阴阳师、漫画人、快看漫画、布卡漫画、ACFun、梦话西游、十万个冷笑话等漫画届、二次元圈中的的领军者，无论是在玩法和剧情上都有不小的创新。在19篇漫画设定中，用户可自由选择剧情，自拍后选择动漫特效就能变成漫画中的主角，让二次元抑或现实中的男神和你一起上演爆笑喜剧。用户参与感的再升级让漫画大头贴一上线，就获得了众多用户的喜爱，再次刷爆微博和朋友圈。为什么是二次元？随着90后步入工作以及00后的崛起，二次元文化已经不再边缘，而成为表达自我、彰显创意的标杆。以《十万个冷笑话》、《罗小黑战记》为代表的国漫崛起，以及今年新海诚电影《你的名字》票房飘红，可以看到中国二次元市场的无限潜力。据艾瑞咨询报告分析：2015年，国内动漫用户已经达到6000万，辐射二次元人群2.2亿，覆盖62.9%的90后和00后，也就是说，每3个年轻人中就有2个是二次元用户。对于这部分用户来说，普通的卖萌式营销已经无法打动他们，创意、参与感才是刚需。放眼市面上众多产品，拥有动漫元素的自拍app不在少数，比如动漫贴纸、动漫边框，确实迎合了年轻人的喜好，但相较来说用法单一，玩法简单。而美颜相机抓住了这部分人群的需求，不仅运用人脸识别和AR技术对五官进行自然的变形和美化，达到二次元感的效果；还让用户参与到漫画中，创造出属于自己风格的漫画作品。这种将二次元属性与自身产品优势相结合的方式，无疑代表了未来自拍软件的发展方向——通过互动式的操作激发用户的使用欲望，运用最先进的技术与受众的需求相结合，让产品的玩法更新颖。
用微信扫描二维码分享至好友和朋友圈
凤凰资讯官方微信
播放数：1287700
播放数：2110383
播放数：351949
播放数：5808920