题目有点绕,源起最近一个项目中所需的一枚loading图标。SVG+CSS3动画做了那么多,真正应用在项目中的机会少之又少,所以,抓住一切机会,即使loading也不能放过,用系统自带菊花有辱我这一年的修炼。在最后完美做成的过程中,解决了两个问题,第一,是非等粗交叉路径的描边动画实现,第二,是多个拼接动画的无限循环问题,后者困扰了许久,所以,当这个问题解决时,急于分享出来,便于其他的设计师小伙伴遇坑时一笑而过,也就是这篇文章的起因了。
1.如果只是简单的描边动画
是的,我是说如果只是如果。先看下要实现的动效。
左边是真身,很简单的一个企业的logo,因为是这种连笔式的,所以本能的反应适合描边动画,动态展示logo绘制过程。右边就是初步想法,绘制过程。看上去很简单,啊哈,来,透过现象看本质。如果这个图标是下面这种,对,就是我曾经的心头好,网易云音乐,因为随手用钢笔画的,没有用布尔运算,所以略显粗糙。这种来个描边动画,那简直是分分钟搞定的事情。 这种描边动效通过定义stroke-dashoffset
属性来实现(from 0; to length),非常简单,以前的文章中也写过
戳这里戳这里,此处略过。好了,为什么说这种好实现呢,因为描边只要定义三个样式的属性值
stroke-linecap
、
stroke-linejoin
和
stroke-width
就好。
好了,不说别人的logo描边动效多好实现了,来分析一下现在的案例,难度在哪里?非线性啊亲们。如果这个图标是下面这种的:
简单不简单,你就说简单不简单!当然,让甲方爸爸改图标是不现实,如果妥协做个神似形不似版的那还不如菊花了(转行做美工久了,没点强迫症还真是不行)。现在开始,找解决方法,突破,分析问题的能力还是有的。我想到的方法是万能的蒙版。蒙版是个好东西啊,能遮住所有你不想看到的,那直接给路径描边动画加