Gsap动画库基本使用

1.安装

npm install gsap

2.导入动画库

import gsap from "gsap";

3.设置动画

//设置移动
gsap.to(cube.position,{x:5,duration:5})
// 设置旋转
gsap.to(cube.rotation,{x:2*Math.PI,duration:5})

效果：

4.动画回调

gsap.to(cube.position, { x: 5, duration: 5, ease: 'power1.inOut', onStart: () => { console.log('动画开始') }, onComplete: () => { console.log('动画完成') } })

5.设置重复次数

//repeat设置重复次数，无限次循环设为-1
gsap.to(cube.position, { x: 5, duration: 5, ease: 'power1.inOut',repeat:2})

gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: 'power1.inOut',repeat:2 })

效果

6.往返运动,延迟运动

//往返：yoyo;延迟:delay
gsap.to(cube.position, { x: 5, duration: 5, ease: 'power1.inOut',repeat:-1,yoyo:true,delay:2})
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: 'power1.inOut',repeat:2 })

效果

7.双击控制运动

//赋值
var animate1 = gsap.to(cube.position, { x: 5, duration: 5, ease: 'power1.inOut',repeat:-1,yoyo:true,delay:2})
// 设置旋转
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: 'power1.inOut' })
// 监听双击暂停动画
window.addEventListener('dblclick',()=>{
  // 是否是运动状态
  if(animate1.isActive()){
    // 暂停
    animate1.pause()
  }else{
    // 继续
    animate1.resume()
  }

})

效果

完整代码

<template>
  <div class="about">

  </div>
</template>

<script setup>
import * as THREE from 'three';
// 导入动画库
import gsap from "gsap";
// 加载轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 1.场景
const scene = new THREE.Scene();
// 2.透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设定位置x,y,z
camera.position.set(0, 0, 10)
// 添加相机
scene.add(camera)
// 添加物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 设置几何体材质颜色
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 根据几何体和其材质创建物体
const cube = new THREE.Mesh(geometry, material);
// 将物体添加到场景中
scene.add(cube);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 将webgl渲染的canvas内容添加到Body
document.body.appendChild(renderer.domElement)
// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera)
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5) 
scene.add(axesHelper);

// 初始化时钟
const clock = new THREE.Clock();
var animate1 = gsap.to(cube.position, { x: 5, duration: 5, ease: 'power1.inOut',repeat:-1,yoyo:true,delay:2})
// 设置旋转
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: 'power1.inOut' })
// 监听双击暂停动画
window.addEventListener('dblclick',()=>{
  // 是否是运动状态
  if(animate1.isActive()){
    // 暂停
    animate1.pause()
  }else{
    // 继续
    animate1.resume()
  }

})
function render() {

  renderer.render(scene, camera)
  // controls.update()
  // 渲染下一帧的时候就会调节render函数
  requestAnimationFrame(render)
}
render()
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: cornflowerblue;
  }
}
</style>