每次看到别人的svg动画会动,都很羡慕,让自己实现起来也没有头绪,害怕用svg的语言去一点点的画图,觉得太原始了,关于svg动起来的知识点很少用,也很少见到相关的内容,今年上班第一天发现掘金大佬的一篇:《十分钟教你用svg做出精美的动画!》,竟然可以用jquery子选择器的方式控制对应的svg > path ,然后就用开启我的求知欲!

懵懂的菜鸟我,怀疑jquery的animate()方法能否让SVG动起来?然后测试:

$("#svg path:nth-child(2)").attr({"fill":'red'});
$("#svg path:nth-child(3)").attr({"fill":'blue'});


上色成功,说明jquery可以精确的匹配到svg里面的子路径,也是svg和path也是html5的元素,肯定会被匹配到,之前还是太年轻了......,那么,jquery是否也可以让指定path移动、翻转、旋转...?

$("#svg path:nth-child(3)").animate({"left":'100px'});

哎!失败了,结果真打脸:一动不动,根本不是我想的那样。过于古老的jquery根本没有支持兼容新元素svg的动画!看来还是需要专业的插件做专业的事情。

<svg t="1613696307899" class="icon" id="svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6713" width="44" height="44">
	<path d="M550.944072 198.99657a91.709471 91.327666 90 1 0 182.655331 0 91.709471 91.327666 90 1 0-182.655331 0Z" p-id="6714"></path>
	<path d="M512.83997 370.80865a9.545116 9.545116 0 0 1 12.675914-0.992692l89.265921 67.65578a25.962714 25.962714 0 0 0 16.493959 5.879791h173.339299a26.268158 26.268158 0 0 0 26.115437-27.642655 27.26085 27.26085 0 0 0-27.642655-24.893661H640.515436L503.982103 279.175541a26.039075 26.039075 0 0 0-35.355108 2.138106L346.754959 407.92006a26.268158 26.268158 0 0 0 0.83997 37.264131l122.17748 116.603132v250.23475a26.573602 26.573602 0 0 0 20.69381 26.344519 26.268158 26.268158 0 0 0 31.689784-25.657271V550.485906a26.42088 26.42088 0 0 0-8.170619-19.090231l-71.626547-67.121253a13.592245 13.592245 0 0 1-0.534527-19.472036z" p-id="6715"></path>
	<path d="M217.399553 496.34601a210.221626 210.221626 0 1 0 209.381655 210.145265A209.76346 209.76346 0 0 0 217.399553 496.34601z m0 340.035198a129.813572 129.813572 0 1 1 129.279045-129.813572 129.813572 129.813572 0 0 1-129.279045 129.737211zM806.600447 496.34601a210.221626 210.221626 0 1 0 209.381656 210.221626A209.76346 209.76346 0 0 0 806.600447 496.34601z m0 340.035198a129.813572 129.813572 0 1 1 129.813572-129.813572 129.813572 129.813572 0 0 1-129.813572 129.737211z" p-id="6716"></path>
</svg>
<script src="gsap.js"></script>
<script type="text/javascript">
	$("#svg path:nth-child(2)").attr({"fill":'red'});
	$("#svg path:nth-child(3)").attr({"fill":'blue'});
	$("#svg path:nth-child(3)").animate({"left":'100px'});
	moves();
	function moves(){
const svg = new TimelineMax();
svg.staggerFrom(
      [
        "#svg path"
      ],
      1,
      {
        scaleY: 0,
        scaleX: 0,
        transformOrigin: "center",
        ease: Bounce.easeOut,
        stagger: 0.2
      }
)
	}

</script>

效果:

在线版:https://course.51qux.com/gsap

又回到大佬的文章,发现他用的是 TimelineMax 插件,然后ctrl+c/v,搞定! svg还真的动了起来,官方的js插件api写的很详细(https://www.tweenmax.com.cn/api/timelinemax/),等有时间了好好学一下。

前端的东西,真多,学不完,学不动,方向不对头碰出血也弄不好,2021年,继续前行。

横眉冷对千夫指,俯首甘为孺子牛 —— 鲁迅

插件

Tweenmax动画插件网:
https://www.tweenmax.com.cn/
Timelinemax中文手册:
https://www.tweenmax.com.cn/api/timelinemax/