今日看到个按钮切换小动画甚有意思,做了一个类似的,效果如图所示:
写的比较简单,像这种细节动画相信在将来会越来越多的。记录下来,作为一个知识点参考。
主要用到的知识是:SVG 的 path 路径动画的控制。
之前我写了一篇文章来讨论 SVG 的路径的描边动画 《妙用SVG,给自己暗恋的人表白吧~》。今天这篇继续来讨论 SVG 路径path的动画。
第一步:先做好HTML 和CSS 。写上 SVG 代码,并给定初步样式。
<div class="box" id="box">
<svg width="100" height="100" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<path d="M0, 5 Q50, 5 100, 5"></path>
<path d="M0, 45 Q50, 45 100, 45"></path>
<path d="M0, 95 Q50, 95 100, 95"></path>
</svg>
</div>
1. SVG 的 viewBox 属性设定内部坐标范围,跟所在的实际像素大小无关。
这里设定 svg 的坐标范围为 (0,0)到(100,100),我不想做的太大,就到100吧。
2. 这个面包导航有三条线,三个path 路径。
3. M0,5 表示 move to (0,5)坐标去,作为线条的起点。为5,是因为线条的粗细设置为的10,粗细是在坐标线上平分的。
4. Q50, 5 100, 5 这里有两个坐标,一个是控制点(50,5),一个是终点(100,5)。这里用了 二维贝叶兹曲线(quadratic Belzier curve)。也可以不搞这么复杂,直接 L100,100 ,表示 line to “画线到。。。”。
如果觉得path 很麻烦的同学,照着我的代码去写就对了,在这个案例中没那么复杂。
相关样式如下:
.box{
width: 100px;
height: 100px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
.box svg path {
fill: none; /* 设定path填充颜色为 none ,也就是不填充颜色 */
stroke-width: 10; /* 设定线条粗细 */
stroke: #000; /* 设定path的线条颜色 */
stroke-linecap: round; /* 设定path的路径两头为圆形 */
transition:all 0.4s; /* 设定path的过渡动画 */
}
第二步,关键部分来了。
我的思路是点击按钮进行svg的动画切换,切换的效果是通过添加删除一个class 去实现的。
let box = document.querySelector("#box");
box.addEventListener("click",function(){
if( box.classList.contains("active")){
box.classList.remove("active");
}else{
box.classList.add("active");
}
});
关于标签的 classList 属性,可以参考我这篇文章 DOM:标签的classList属性
所以,要在 CSS 中写上变形动画。让我觉得神奇的是,SVG 的动画居然可以用CSS 写出来,简直太赞了~!!!
具体 CSS 代码如下:
.box.active svg path:nth-child(1){
stroke:#000; /* 更改线条颜色,这里没有更改,写在这里只是表示可以更改*/
d:path("M0, 0 Q50,50 100,100"); /* path 动画的关键,更改 d 的值*/
}
.box.active svg path:nth-child(2){
stroke-width: 100; /* 更改线条粗细 */
opacity: 0; /* 更改线条透明度 */
}
.box.active svg path:nth-child(3){
stroke:#000;
d:path("M0, 100 Q50,50 100,0");
}
.box.active 两个类中间没有空格,表示同一个标签。
path 的 d 属性,用来定义 path 的路径,但是居然可以用 CSS 来控制改变,因此产生了动画。这个太神奇了~!大爱 SVG~!!
其他的解释见代码注释。
病毒横行,在家学习才是王道~