阅读 4636

SVG+CSS3仿作了2018草莓音乐节的宣传视频动画

这是从2018“草莓音乐节”的宣传视频得到的灵感,海报的主题是错位拼贴分割重组,对我这种设计渣渣而言,看中的是其平面化,也就是说,用SVG+CSS3动画完全可以玩转。因为只涉及一些基础元素的位移、缩放构成的转场效果,相对来说比较简单,但创意很开脑洞。因为宣传视频比较长,所以把它分割成了几个部分,依次来完成。

首先放上一张静态图,来分析动效。一共涉及三种动效,位移,旋转,渐隐渐现。

当把元素分析完成后,现在就要在AI中进行相应的分层,便于SVG代码的解读。在AI中,对应各个部分,放置到不同的图层中,每个图层做好命名,依次为底图base、向上移动moveUp、向下移动moveDown、中间大圆baceCenter、中间小圆centerCircle、周围圆点dot。因为涉及Y轴方向的位移动画,所以在底图的绘制时,需要移动的部分要超出画板。

CSS3部分相对来说比较简单,旋转动画transform:rotate(),位移动画transform:translateY(),因为小圆点只是装饰作用,所以只设计了两种类型的透明度的改变,任意分成了两组。

@keyframes centerCircle{
0%{transform:rotate(0deg); transform-origin:center center}
100%{transform:rotate(-360deg); transform-origin:center center}
}
 #centerCircle{animation:centerCircle linear 4s infinite ; }   /*中心旋转圆设置*/

@keyframes moveUp{
0% {transform: translateY(0)}
100% {transform: translateY(-70px)}
}
#moveUp {animation:moveUp linear 4s infinite alternate; }   /*向上移动*/


@keyframes moveDown{
0% {transform: translateY(0)}
100% {transform: translateY(70px)}
 }
#moveDown {animation:moveDown linear 4s infinite alternate; }   /*向下移动*/

@keyframes dot1{
0%{opacity:0}
100%{opacity:1}
}
#dot1{animation:dot1 ease 2s infinite alternate}/*渐隐渐现小圆点样式1*/

@keyframes dot2{
0%{opacity:0.7}
70%{opacity:0}
100%{opacity:0.3}
}
#dot2{animation:dot2 ease 2s infinite alternate}/*渐隐渐现小圆点样式2*/
复制代码

先跑起来看看效果,大块的色块,浓郁的色彩,似乎还不错。

go on。接下来如图:

三个圆从中心依次出现放大,这是一个基础的缩放动效transform:scale()。这里就要用到控制SVG描边属性缩放文章中提到的描边属性不受缩放控制的神句了,三个圆的描边属性后面都要加上vector-effect:non-scaling-stroke,由于出现的顺序不同,又要叠加其他动画,为了避免自己搞不清各部分动画的时间次序(毕竟不是AE,时间轴不直观),所以绘制了一个简单的时间轴。

动画属性定义中,只要开始的时间依次设置好久可以了,另外关于缩放的倍数,由于从无到有,初始值一定是scale(0),结束的值和定义的圆的半径有关,可以多调整几个值,得到最满意的效果。

@keyframes purpleCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(1.5);transform-origin:center center}
}
#purpleCircle{animation:purpleCircle linear 1.5s 1s both}  /*最大圆 1S后开始扩大*/

@keyframes whiteCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(2);transform-origin:center center}
}
#whiteCircle{animation:whiteCircle linear 1.5s 1.5s both}   /*中间圆 1.5S后开始扩大*/

@keyframes blueCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(1);transform-origin:center center}
}
#blueCircle{animation:blueCircle linear 1.5s 2s both}    /*最小圆 2S后开始扩大*/
复制代码

合成后效果如下:

go on……

如上图所示,当白色圆扩展到整个画布后,中间出现两个三角,三角的变形动画如下:

为了方便定义属性,我以三角形断开时的形状为基准,因为第一步是Y轴向的缩放,X轴不变,所以仅定义transform:scaleY(),而在第二步变形中,X轴向与Y轴向缩放时不同步的,因此要分开写成transform:scaleX()scaleY()。为了确保第一步统一的变形效果,要先把两个三角都放在一个组中,给这个组进行变形动画。

<g id="triangle">
<polygon id="triLeft" points=""/> <!--左侧三角-->
<polygon id="triRight"  points=""/>  <!--右侧三角-->
</g>
复制代码

动画属性中需要注意的是transform-origin变形基点的定义。当两个三角断开后,基点对应如下:

@keyframes triangle{
0% {transform:scaleY(0);transform-origin:}
100%{transform:scaleY(1);transform-origin:} /*变形的基点为交点坐标*/
} 
#triangle{animation:triangle linear 0.5s 2.5s both}  /*两个三角形Y轴向扩大*/

@keyframes triLeft{
0% {transform:scaleY(1)scaleX(1);transform-origin:} /*变形的基点为左侧边中点坐标*/
100%{transform:scaleY(0.15)scaleX(0.05);transform-origin:}
} 
#triLeft{animation:triLeft linear 0.5s 3s both}  /*左侧三角形向左水平缩小*/

@keyframes triRight{
0% {transform:scaleY(1)scaleX(1);transform-origin:} /*变形的基点为右侧边中点坐标*/
100%{transform:scaleY(0.6)scaleX(0.5);transform-origin:}
} 
#triRight{animation:triRight linear 0.5s 3s both}  /*右侧三角形向右水平缩小*/
复制代码

看下效果,似乎不错,截止到这一步,第一阶段的动画才算完成,之所以称作第一阶段,是因为这时原底图可以退出舞台,全新的下一幕开始了。

这里右侧圆形实现这种效果有点复杂,在SVG剪切蒙版属性clip-path文章中详细说明了实现过程。 各部分图形的顺序至关重要。

来看下效果

好了,第二部分也正式结束,第三部分相对简单一些,基本只有透明度的属性变化。和第一部分底图的圆点的动效基本相似,无非图形更复杂一些,就不再赘述,直接放上最终效果吧。

唯一需要说的是左上角类似渐变网格的圆点,使用了运动的渐变蒙版来实现。

首先需要定义一个蒙版的位移动效

@keyframes maskXY{
0%{transform:translate(0, 0);}
100%{transform:translate(-70px, -70px); } /*向左上角位移*/
}
#maskXY{animation:maskXY linear 3s 5s both} 
复制代码

渐变类型的定义和图形是AI导出时生成的,一般不用修改,只是各种定义比较多,别把自己绕进去就行。

<mask id="maskMove"> <!--定义渐变蒙版--> 
    <g id="maskXY"> <!--位移动效-->
	<defs>
    <linearGradient  id="jianbian" …>
      <stop offset="0" stop-color="#fff"/>
   <stop offset="1"/>
    </linearGradient> <!--定义渐变类型-->
  </defs>
   <rect x="" y="" width="" height="7" transform=""  style="fill: url(#jianbian)"/><!--矩形使用渐变色填充-->
  </g>
 </mask>
  <g mask="url(#maskMove)"> <!--使用渐变模板--> 
  …渐变网格圆点
  </g>
复制代码

来吧,小结一下,虽然做的过程费了点力气,纯粹的体力活,但做完之后的收获还是比较大的,这一个案例就又一次突破了认知,比如描边属性缩放的控制,比如剪切蒙版属性的使用,比如深深的体会到看DOM看到眼瞎的感觉。 codepen预览地址SVG+CSS3 animation copy propagandist video of 2018 Strawberry Music Festival,看看完整的效果就好,源码那里乱成毛线,光注释都能看吐,就不要看了 。 草莓音乐节酷酷的宣传视频还有其他几个,不准备做了,下次探讨点有趣的东西,就酱。

关注下面的标签,发现更多相似文章
评论