gsap动画应用及实现曲线运动

一：gsap动画等效的应用 1.动画属性

gsap.to和gsap.from是两个最基础的API

gsap.to设置某个dom节点的动画结束状态END (从起始到结束)

gsap.from设置某个dom节点的动画初识状态START(从结束到起始)

//
duration动画的持续时间（单位：秒）默认0.5秒
delay动画延迟时间repeat动画重复的次数
yoyo布尔值，如果为true，每次其他动画就会往相反方向运动（像yoyo球）默认falsestagger每个目标动画开始之间的时间（秒）
ease控制动画期间的变化率，默认"power1.out"
onComplete动画完成时的回调函数

function (){
    gsap.to('.box', {
        x: 500, // 移动位置
        y:300,
        rotation: 0, // 旋转角度
        duration: 3, // 持续时间
        //repeat: 1 // 重复次数
        ease: "bounce.out",
        onComplete:()=>{     //结束后的回调
            console.log('99999999')
        }
    });
}

2.路径动画motionPath(可做一些曲线应用) 需求引入起配置

其中motionPath即可以是svg路径参数，也可以是一个path对象

通过css 样式实现 曲线运动

.app {
    width: 50px;
    height: 50px;
    background: linear-gradient(#fc0, #f0c);
}

.box{
    /*  ('M4.0,7.0 C8.0,2.0 630.332,-21.485 1215.999,340.999')   远长度。 高低度*/
    offset-path: path('M4.0,7.0 C4.0,7.0 630.332,-21.485 1215.999,340.999');
    /*改变运动的锚点*/
    animation: move 2s  linear;
    animation-fill-mode: forwards;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
function (){
    var appClass = document.getElementsByClassName('app')[0]
    appClass.classList.add('box')
    }

通过npm安装：

import { gsap } from 'gsap'
import { MotionPathPlugin } from 'gsap/MotionPathPlugin'
gsap.registerPlugin(MotionPathPlugin)

    <div class="page-box">
      <svg width="100%" height="100%" class="page-svg" id="svg">
        <!--    235.462, 抛物线的弯曲度 300.435 100.0, 宽高 700.0-->
        
        <path class="page-path" id="path" d="M1.999,1.999 C1.999,1.999 235.462,300.435 100.0,700.0" stroke="black" fill="transparent" />
         <image id="rect" style="width: 50px;height: 50px;" xlink:href="../assets/img/avatar.png"></image>
      </svg>
      <div class="btn" @click="btnClick">
      </div>
    </div>

//方法实现
btnClick(){
  gsap.to('#rect', {
    duration: 2,
    ease: 'power1.inOut',
    motionPath: {
      // path: [{x:0, y:0}, {x:80, y:200}, {x:90, y:400},{x: 100, y: 600}],
      // type: "cubic"               贝塞尔曲线方法
      path: '#path',
      align: '#path',
      autoRotate: true,
      alignOrigin: [0.5, 0.5], //对齐原点
    },
    onComplete: () => {
      //结束后的回调
      console.log('99999999')
    },
  })
}

3.timeline时间轴(可以连贯性的执行动画过程)

先执行A属性的动画、再执行B属性的动画的场景，节点最后的状态就是时间线所有点最后的叠加结果。

const t = gsap.timeline(); 
t.to(".box", { x: 100, opacity: 0.5, duration: 1 }) .to(".box", { y: 50, }) .to(".box2", { y: 50, }); // 另外一个节点