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'});

gsap-Qui-Note
上色成功,说明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>

效果:

gsap-Qui-Note

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

效果展示:

本站打赏榜

X
馊稀饭 赞助了 陈小知 9.99
太阳 赞助了 陈小知 18.8
fonhen 赞助了 陈小知 8.76
admin 赞助了 陈小知 9.90
ku5151 赞助了 陈小知 9.90
admin 赞助了 陈小知 6.90
Tiger 赞助了 陈小知 9.90
cznq1106 赞助了 陈小知 9.90
459977099 赞助了 陈小知 9.90
2910224190 赞助了 陈小知 9.90