web动画库
动画领域有一个比较知名的CSS库:Animate.css,它提供了60多种动画,满足一般网页的需求,比如淡入淡出、闪现等等一系列日常动画,不过虽然它能满足日常需求,但是一些复杂的场景就需要靠JS手动去操作,比如界面滚动到某个元素才开始播放动画,比如拖拽、比如滚动界面时,动态调整元素就需要使用到GreenSock
1.animate.css
Animate.css | A cross-browser library of CSS animations.
animate.css 是一个来自国外的 C553 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotate0ut)、淡入淡出(fadeIn/fade0ut)等多达 68多种动画效果,几乎包含了所有常见的动画效果。
顾名思义是与class相关联的
2 GreenSock最健全的web动画库之一
https://greensock.com/
GreenSock动画平台(GSAP)可以对JavaScript可以操作的所有内容进行动画处理(CSS属性,SVG,React,画布,通用对象等),同时解决了不同浏览器上存在的兼容性问题,而且速度极快(比jQuery 快20倍)。大约有1000万个站点和许多主要品牌都使用 GSAP。
动画其实是每秒多次改变元素属性值,元素看起来就仿佛在动一样,比如淡入淡出,旋转,移动等。而GSAP捕捉一个起始值和一个结束值,然后每秒在它们之间插值60次。
如果从技术上面来讲,GSAP其实应该被称为“GreenSock属性操纵器”(GSPM)。
ScrollTrigger.min.js滚动插件 可按需引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/EaselPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/PixiPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollTrigger.min.js"></script>