javascript gsap 动画2种常用写法

javascript gsap 动画2种常用写法

 

import gsap from "gsap";

 

gsap.to(".ball", {
  keyframes: {
    "0%": { yPercent: 0, scaleX: 1, scaleY: 1 },
    "7%": { yPercent: 5, scaleY: 0.9, scaleX: 1.1, ease: "sine.in" },
    "25%": { yPercent: 100, scaleY: 1.15, scaleX: 0.9, ease: "sine.in" },
    "50%": { yPercent: 500, scaleX: 1, scaleY: 1, ease: "none" },
    "60%": { scaleX: 1.6, scaleY: 0.4, ease: "none" },
    "65%": { yPercent: 500, scaleX: 1, scaleY: 1 },
    "100%": { yPercent: 0, scaleX: 1, scaleY: 1 },
    easeEach: "sine.out"
  },
  duration: 0.8,
  repeat: -1,
  transformOrigin: "center bottom"
});

gsap.to($('.ddd1'), 3, {left:300,delay:0,repeat: 1, yoyo: true,repeatDelay: 1,ease: Linear.easeNone})

 还有这个编辑器https://greensock.com/docs/v3/Eases