提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
本分享是经过本人多年移动端动效设计的工作经验获得,如果有不对的地方请多多指教。
写在前面,iOS8的动画效果已经深入每个果粉用户的内心,它符合物体运动规律、符合人们的基本感受认知,以至于它“既存在又不存在”。有不少动效爱好者模仿过iOS的运动曲线,基本都形似,本人也做了一次高度的模仿,并且运用到实际工作中。
第一步:高速摄像机获取序列帧
高速摄像机以60帧/秒帧速率抓拍iOS8应用启动的动画,整个启动过程大概用了30帧(也就是30张序列图)完成,以此推测iOS8的应用启动时间为500ms(1秒=1000ms)。
第二步:获取位移的坐标点
在所点击的图标上找一个运动距离较远的点,记录下每一帧运动后的位置,即X轴和Y轴坐标。(因为拍摄的序列帧图片的尺寸不是手机屏幕实际尺寸,故坐标值起点不是0,0)
通过以上表格可得出X轴总位移:397-252=145(px),Y轴总位移:470-62=408(px),转化成相对坐标后的数据是:
第三步:描点获得曲线
我们选取位移相对较大的Y轴的数据,把相对应的点依次描在坐标轴上(为了更加精确并便于区分,把X轴设为900px,Y轴设为816px):
在上图的基础上,描线做了微调使得曲线更加顺滑,并最终表现在1000*1000(px)的坐标轴上:
第四步:验证曲线
本人一直使用AE软件来制作动画Demo的,这一次尝试使用Flash软件,它虽然没有AE软件处理细节上的细腻程度高,但是各有所长,它可以导出APP直接安装在Android手机上互动演示,效果来的更加应景和真实。
由于格式原因,动画Demo不能放进文档来演示,小编感到遗憾。
经多次对比确认,我们的Demo曲线与iOS8的应用启动运动曲线高度吻合。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册