Qui-Note官网Logo
导航:Qui-Note/gsap

gsap

每次看到别人的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>

效果:

又回到大佬的文章,发现他用的是 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/

效果展示: