做了一个简单的svg仿mac最效果的效果,先看看效果:

svg仿mac最小化效果 gif svg仿mac最小化效果

主要思路

我们先看看收缩时候的效果,注意这里有一个非常重要的临界形状:

background Layer 1 A B C D A1 B1

上图中的A-B-B1-A1就是一个临界图,画这里临界图没有什么难度,A到B是直线,B到B1用三次贝赛尔曲线就好了,它们的切线都是垂直的竖线,我们只要找好两个控制点即可:

background Layer 1 A B C D A1 B1 O2 O1

我们注意看上图中O1和O2,这个是绘制B-B1这条弧线的两个关键点,控制它们的位置可以改变圆弧的弯曲程度,例如将O1设置为B-B1垂直距离的1/3,O2设置为B-B1垂直距离的1/2之类的,改变这个比例,将改变弯曲程度。

为什么要讲这个临界图像呢?因为这个是解决我们动画的关键,有了这个图形,我们就可以把动画一分为二。

background Layer 1 A B C D A1 B1 遮罩显示区域 遮罩隐藏区域 遮罩隐藏区域 M1 N1 P1 Q1 向右绘制曲线,同时遮住,只显示上面部分

首先是在达到这个状态之前,我们先做垂直到下面的曲线,然后遮罩水平部分,如上图中的A-B-N1-M1和A-B-Q1-P1和A-B-B1-A1都是真实绘制的曲线,虚线框内为遮罩显示内容,外面为不显示内容,因此看起来就只有虚线内的部分在移动。

上图变化的过程为A的投影点M1和B的投影点N1最终会移动到A1和B1,这里的变化是线性的,假如需要10下从M1到A1,N1到B1,那么M1和N1每次移动距离分别为(A1-M1)/10,(B1-N1)/10,这样就可以恰好让M1和N1在移动10下之后到达A1和B1。

background Layer 1 A B C D A1 B1 遮罩显示区1 遮罩显示区2 遮罩层下移

第二部分就是遮罩层的移动了,遮罩层向下移动,我们可以看到从遮罩层1移动到了遮罩层2,遮罩层会完全移到A1-B1那里直至重合。

这里需要注意的是,随着遮罩层的下移,遮罩层的高度(B-C的距离)将会大于剩余的部分,因此,就需要将遮罩层变矮一点,如下所示:

background Layer 1 A B C D A1 B1 遮罩显示区1 遮罩显示区2 遮罩层下移 遮罩层正常高度 超过了A1-B1 减少遮罩层高度 刚好到达A1-B1

展开和收缩是相反的动作,只要知道了原理,就可以弄的出来。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字