iOS动画进阶 - 实现类似美颜相机的相机启动动画

原创 2016年08月16日 15:58:46

如果移动端访问不佳,可以访问我的个人博客

最近在写一个相册的demo,偶尔看到了美拍的相机过载动画觉得很有意思,就想在我的相册demo中加入一个这种特效,下面把我的想法和实现过程给大家分享一下

先上效果图:(demo地址

效果图

步骤分析

这个动效看起来很有特色但是实现起来是非常简单的,只需要用到CALayerCAShapeLayer做为展示层,然后通过CABasicAnimation实现动画就行了~

  • 用两个CALayer来呈现启动的image
  • 通过UIBezierPathCAShapeLayer来画出具有曲线的CAShapeLayer
  • 然后将曲线的CAShapeLayer做为CALayer的mask
  • 最后通过CABasicAnimation做一个简单的位移动画

先绘制上半部分的layer

/**
     绘制上半部分的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

/**
     绘制下半部分的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() {
        //创建一个CABasicAnimation作用于CALayer的anchorPoint
        let topAnimation = CABasicAnimation.init(keyPath: "anchorPoint")
        //设置移动路径
        topAnimation.toValue = NSValue.init(CGPoint: CGPointMake(1, 1))
        //动画时间
        topAnimation.duration = 0.6
        //设置代理,方便完成动画后移除当前view
        topAnimation.delegate = self
        //设置动画速度为匀速
        topAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
        //设置动画结束后不移除点,保持移动后的位置
        topAnimation.removedOnCompletion = false
        topAnimation.fillMode = kCAFillModeForwards
        topLayer.addAnimation(topAnimation, forKey: "topAnimation")

        //创建一个CABasicAnimation作用于CALayer的anchorPoint
        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)           
    {
        if flag {
            removeFromSuperview()
        }
    }

这里为了方便观察,我将动画时间变长了,下面是完成后的效果图:

这里写图片描述

到这里这个动效就完成的差不多了,希望大家能学到东西,如果大家有更好的实现办法也可以给我提意见,我学习学习,谢谢大家观看,另外附加demo地址,喜欢的可以关注一下

版权声明:本文为博主原创文章,未经博主允许不得转载。

iOS开发 在图片上添加文字,图片合成文字,图片上添加富文本,美图秀秀,美颜相机文字编辑

一:前言  1.0  :在图片上增加文字,是图片编辑中非常常见的需求。  1.1 :无demo说话不硬气,上github地址:https://github.com/horisea/PictureW...
  • horisea
  • horisea
  • 2017年04月21日 17:32
  • 2486

Camera Filter 美颜相机的实现

当你需要实现Camera 添加滤镜的预览以及录制的时候,那么你可以看过来了! 在这里会给你讲解基于opengl的Camera滤镜的实现。之前已经介绍过了视频编解码以及渲染的相关概念了,详见 Andr...
  • zhs4430169
  • zhs4430169
  • 2017年11月27日 18:30
  • 273

【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)

来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播...
  • qq_34047841
  • qq_34047841
  • 2016年10月03日 01:00
  • 639

开源IOS 客户端直播SDK自带美颜功能

当前视频直播非常火爆,手机端的视频直播也非常火爆,PGC、UGC的视频直播门槛都降低了很多。 本文介绍一个:IOS 客户端直播的SDK,代码完全开源。 直播时代:让IOS普通开发者一天内做...
  • coloriy
  • coloriy
  • 2016年08月25日 15:30
  • 1690

基于OpenCV 的美颜相机推送直播流

程序流程: 1.图像采集 先从opencv(2.4.10版本)采集回来摄像头的图像,是一帧一帧的 每一帧图像是一个矩阵,opencv中的mat 数据结构。   2.人脸的美化 人脸美化,我们用的皮肤...
  • wangyaninglm
  • wangyaninglm
  • 2016年04月04日 13:06
  • 7828

Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——1.1 工程思路与难点

欧摩西罗伊是一款功能完善的相机/影像处理/图片后期Android App, 包含上百种实时滤镜/视觉特效,以及人脸相关功能(换脸/美颜/贴纸),用她打造你自己的美图秀秀/FaceU/Snow相机/VS...
  • Martin20150405
  • Martin20150405
  • 2017年02月16日 21:07
  • 5082

图像滤镜艺术---美颜相机之高级柔焦效果实现

给大家分享一下美颜相机中高级柔焦特效的算法实现!
  • Trent1985
  • Trent1985
  • 2017年07月26日 13:23
  • 4632

相机手动对焦(带动画效果)

showsf_sv    = (SurfaceView)findViewById(R.id.camera_showsf_sv   ); // 成像控件 showsf_sv.setOnTouchLis...
  • u010069940
  • u010069940
  • 2016年04月27日 14:29
  • 819

AVFoundation自定义相机

IOS开发 -- AVFoundation自定义相机 导入依赖库 AVFoundation.framework 一般需要使用相机时候, 调用系统的相机就可以了, 但是如果有复杂的自定义拍照需求的话,...
  • lgx_admin
  • lgx_admin
  • 2016年05月24日 15:34
  • 1822

Core Animation教学:如何使用CALayer的遮罩(mask)

Core Animation教学:如何使用CALayer的遮罩(mask) 作者: Cocoa China 【最热的Mac, iPhone专业开发论坛】【本文永久地址】 8APR ...
  • u011609521
  • u011609521
  • 2013年09月29日 11:20
  • 2475
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS动画进阶 - 实现类似美颜相机的相机启动动画
举报原因:
原因补充:

(最多只允许输入30个字)