潮自拍打开相机动画分析

来源:互联网 发布:腾讯公布微信数据2017 编辑:程序博客网 时间:2024/03/29 15:42

潮自拍是一款很受自拍者喜爱的App,无论是它漂亮时尚的滤镜还是它个性的动画效果,下面我将就点击拍照后打开相机的动画进行大致分析,分析的不到位的还请大神指教。

点击拍照按钮后,会有类似幕布打开效果,通过拉开幕布,开启拍照功能。具体动画效果如下展示:(由于该gif较大,无法正常上传,筒子们感兴趣的还请自行在app中查看)。

该动画主要分为三部分组成,第一部分白线由短到长,第二部分移动该App的logo至中心区域,第三部分将幕布打开。

下面先来分析第一部分的实现过程。首先背景设置为橘红色,其实现为两个UIView,等高等宽,分别平分屏幕,只要设置其背景颜色即可。然后在上面叠加2个UIImageView,分别叠加在刚才的UIView上边,背景设为白色,宽度根据效果进行调节,然后利用时间控制该UIImageView的高度以及y坐标,使一定时间后贯穿整个屏幕。即可实现第一部分的效果。

第二部分为logo上下相对滑动,最终拼接为一个完成的图形。该部分可以事先截取相应半边图形,分别将这两个UIImgeView叠加在刚才的两个UIView上边,然后将其设置为UIImageView的背景图,将初始坐标设为屏幕边缘,然后随着时间变化逐渐向屏幕中间移动,其宽高都不改变,直至最终y坐标相遇,拼接为一个完整的logo。第二部分即可完成。

第三部分为幕布打开效果。这个部分主要依托于原来的布局,将屏幕分为等分的两部分UiView,然后其他的控件都堆放在这之上,然后根据时间变化设置动画,改变其x坐标,从而实现随时间幕布缓缓拉开的效果即可。

该动画实现起来过程算复杂,但是设计师要想把动画做的让用户感觉很舒服还要费一番心思才可以。


0 0