最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

世界关注：非常强大的gsap动画

来源：博客园

非常好用的动画库gsap

官网https://greensock.com/


【资料图】

为啥要使用gsap

1. 非常方便的语法 比如下面例子（简单吧）

// 让 div 容器在一秒内水平移动 100 px to 去到哪gasp.to(".item", { duration: 1, x: 100 }) // duration动画持续的时间// from很好理解就是来自哪 gsap.from(".item", { duration: 1, x: 100});
gsap.fromTo(".item", // 这个就是从哪到哪好理解吧  {    opacity: 0,  },  {    opacity: 0.8,    duration: 1,    ease: "elastic", // 动画曲线  },);
2.涵盖面广 不同于一般的动画库这个动画库几乎能操作你能想到的大多元素（特别的健全）比如：3D模型（可以看我的另一篇文章threejs就是那gsap来操作3D模型）、svg 、画布、css属性 ……
3.兼容性好 因为它是js动画 几乎能解决大多数浏览器兼容性
4.非常的灵活 几乎可以处理所有页面上可以通过JS进行改变的元素 对对于动画的操控可以非常高程度的自定义
5.非常好用的线性动画 （你还记得苹果官网或者 各大手机厂商的官网产品那种炫技的网站 根据滚轮来完成动画的每一帧的变化特别的酷炫）自己做过该线性动画知道这种每一帧都由滚轮触发 有多不好　　  做 ,但是gsap帮你封装好了直接用 就好了 （具体代码看下面案例）
6.速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果
7.轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
8..这个库是真的推荐花事件去好好看看文档的
基本使用
1. 下载npm install gsap
案例1切换组件的时候进行动画切换(下面可以是v-if 你可以换成路由切换啥的 )
<script lang="ts" setup>import { ref } from "vue"// 引入import { gsap } from "gsap";const flag = ref(true)const enterHandle = (el: Element): void => {  console.log("我在进来的时候触发");  gsap.fromTo(el, { // 就是在进入的时候从小变大    height: "0px",    width: "0px"  }, {    height: "200px",    width: "200px"  })}</script>
案例2 滚动页面触发线性动画
1.引入
import { gsap } from "gsap"import { ScrollTrigger } from "gsap/ScrollTrigger"
2.把滚动插件引入到gsap动画中
gsap.registerPlugin(ScrollTrigger)
3.然后你就可以定义动画了
// 从哪来的    gsap.from(".newsRight", {      // 页面滚动开始触发      scrollTrigger: {        // 目标        trigger: ".newsRight",        // 开始位置         // start: "top center",        // 结束位置        // 定住锚点位置        pin: ".box",        // end: "top 100px",        // 这个就是根据页面滚动而触发动画        scrub: true, // 0.5, 以秒计算        // 是否展示开始结束位置        // markers: true      },      duration: 2,      x: 300,    });
4.甚至你可以定义多个元素的线性动画
gsap.from(".tasks", {        // // 页面滚动开始触发        scrollTrigger: {          //   // 目标          start: "top 100",          trigger: ".tasks",          pin: ".task-container",          scrub: true, // 0.5, 以秒计算        },        duration: 5,        // opacity: 0,        y: (index, target) => {          return index % 2 ? -310 : 1 // 自己瞎写的想要怎么动可以自己算一下 我这个盒子刚好能凑一块        },        x: (index, target) => {          return index < 4 ? 294 : -294 // 我这个刚好能把几个盒子怼在一起 大家想玩玩其他的可以自己算算        },      });
还能定义一些高级事件
let tl = gsap.timeline({    // 添加到整个时间线     scrollTrigger: {      trigger: ".container",      pin: true,   // 在执行时固定触发器元素      start: "top top", // 当触发器的顶部碰到视口的顶部时      end: "+=500", // 在滚动 500 px后结束      scrub: 1, // 触发器1秒后跟上滚动条      snap: {        snapTo: "labels", // 捕捉时间线中最近的标签        duration: {min: 0.2, max: 3}, // 捕捉动画应至少为 0.2 秒，但不超过 3 秒（由速度决定）         delay: 0.2, // 从上次滚动事件开始等待 0.2 秒，然后再进行捕捉         ease: "power1.inOut" // 捕捉动画的过度时间（默认为“power3”）       }    }  });// 向时间线添加动画和标签 tl.addLabel("start")  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})  .addLabel("color")  .from(".box", {backgroundColor: "#28a92b"})  .addLabel("spin")  .to(".box", {rotation: 360})  .addLabel("end");
强烈 推荐去官网看看那些官网的demo才能体会到这个库的强大
如果你近期想要做一个炫技网站 记得这个库 绝对值
                 

关键词：         
       开始触发 
              
       结束位置