gsap简单使用

gsap

GSAP 是一个强大的 JavaScript 工具集，让大家秒变动画大佬。构建适用于所有主流浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象… JavaScript 可以触摸的任何东西！GSAP 的ScrollTriggeropen in new window插件让您可以用最少的代码创建滚动动画。

安装引入

1. 安装

   // npm、pnpm安装
   npm install gsap
   // yarn安装
   yarn add gsap
   

2. 引入

   import gsap from "gsap";
   

创建动画

• 语法 gsap.Methods(target,variables)

  • Methods：动画方式
  • target：参与动画的元素
  • variables：参数配置

• 动画方式：.to()、.from()、.fromTo()、.set()

  • gsap.to() ：最常使用的，元素从当前状态到定义状态的动画

    gsap.to(".box", { x: 200 })
    

    

  • gsap.from() ：与 gsap.to() 相反，元素从定义状态到初始状态的动画

    gsap.from(".box", { x: 200 })
    

    

  • gsap.fromTo() ：定义开始动画和结束动画

    gsap.fromTo(".box", { x: -40, backgroundColor: 'blue', }, { x: 40, backgroundColor: 'green' });
    

    

  • gsap.set() ：直接到定义的结束状态、无动画

    gsap.set(".box", { x: 200 })
    

    

变量参数

• target获取

  • 使用选择器或者获取的dom元素，甚至一个包含多个dom元素数组

    gsap.to(".box",{x:20});
    
    let box = document.querySelector(".box");
    gsap.to(box,{x:20});
    
    let box1 = document.querySelector(".box1");
    let box2 = document.querySelector(".box2");
    gsap.to([box1,box2],{x:200});
    

  • css属性（驼峰写法）

    gsap.to(".box", { 
      duration: 2,
      backgroundColor: '#8d3dae',
    });
    

    GSAP属性和css动画属性对应表

    
    特殊属性
    

  • js对象属性

    let obj = { x: 0, position: 0 }
    
    gsap.to(obj, {
        position: 200,
        duration: 2,
    })
    

• ease参数配置

  • none 没有任何easing效果，匀速完成动画

  • Ease Types类型 :in out inout

    ease: "power1.in"
    // 从慢到快, 像重物落下
    
    ease: "power1.out"
    // 开始快，结束慢，就像一个滚动的球慢慢停下来
    
    ease: "power1.inOut"
    // 开始慢，中间快，结束慢，就像汽车加速和减速一样
    
    

  • 示例 power1、power2、power3、power4、back
    

  • 更多官网效果