gsap动画库的实践

先看效果：

安装插件：npm install gsap

<template><div><h1 style="text-align: left">gsap的用法</h1><h1 style="text-align: left">https://gsap.com/resources/get-started</h1><div><div style="width: 600px; border: 1px solid red; border-radius: 100px"><div class="circle"></div></div><div style="text-align: left; margin-top: 10px"><el-button type="primary" @click="to_fn" round> 动起来 to </el-button><el-button type="primary" @click="from_fn" round>动起来 from</el-button><el-button type="primary" @click="fromTo_fn" round>动起来 fromTo</el-button><el-button type="primary" @click="set_fn" round> 动起来 set </el-button><el-button type="primary" @click="reset" round> 复位 </el-button></div></div><divstyle="width: 40%;height: 25vh;border: 1px solid red;margin-top: 10px;font-size: 30px;font-weight: 600;color: black;"><divstyle="border: 1px solid blue;padding: 0 10px;height: 50%;width: calc(100% - 20px);display: flex;justify-content: space-between;align-items: center;overflow: hidden;"><divclass="room_all"style="height: calc(100% - 20px);width: calc(50% - 20px);border: 2px solid skyblue;transform: translateY(-110%);">房间总数</div><divclass="room_all"style="height: calc(100% - 20px);width: calc(50% - 20px);border: 2px solid skyblue;transform: translateY(-110%);">自住</div></div><divstyle="border: 1px solid blue;padding: 0 10px;height: 50%;width: calc(100% - 20px);display: flex;justify-content: space-between;align-items: center;overflow: hidden;"><divclass="room_3"style="height: calc(100% - 20px);width: calc(50% - 20px);border: 2px solid #e21665;transform: translateX(-110%);">出租</div><divclass="room_4"style="height: calc(100% - 20px);width: calc(50% - 20px);border: 2px solid #930fa0;transform: translateX(110%);">空置</div></div></div><div style="text-align: left; margin-top: 10px"><el-button type="primary" @click="move" round> 动起来 </el-button><el-button type="primary" @click="reset_move" round> 复原 </el-button></div><div style="border: 1px solid orange; margin-top: 10px"><divclass="green"style="width: 100px;height: 100px;border-radius: 30%;border: 2px solid #ef9cbc;">我撞</div><divclass="red2"style="width: 100px;height: 100px;border-radius: 30%;border: 2px solid #0fee55;">我猛撞</div><divclass="blue"style="width: 100px;height: 100px;border-radius: 30%;border: 2px solid #e926f8;">我使劲撞</div></div><div style="text-align: left; margin-top: 10px"><el-button type="primary" @click="timeline" round> 时间线 </el-button><el-button type="primary" @click="reset_timeline" round> 复原 </el-button></div></div>
</template>
<script>
import { gsap } from "gsap";
export default {data() {return {};},watch: {},created() {},mounted() {// create a timeline// add the tweens to the timeline - Note we're using tl.to not gsap.to},methods: {reset_timeline() {let tl = gsap.timeline();tl.to(".green", { x: 0, duration: 2, rotation: 0 });tl.to(".red2", { x: 0, duration: 1, rotation: 0 });tl.to(".blue", { x: 0, duration: 0.5, rotation: 0 });},timeline() {let tl = gsap.timeline();tl.to(".green", { x: 500, duration: 2, rotation: 360,repeat: -1,yoyo: true, delay: 1.5, });tl.to(".red2", { x: 500, duration: 1, rotation: 360,repeat: -1,yoyo: true,delay: 1.5, });tl.to(".blue", { x: 500, duration: 0.5, rotation: 360,repeat: -1,yoyo: true,delay: 1.5, });},move() {gsap.to(".room_all", {yPercent: 110,duration: 1, // duration（动画时长）delay: 1, // 延时// stagger: 1, // 每个动画之间的时间repeat: -1, // 循环次数，-1 无限次；yoyo: true, //悠悠球，往复运动，配合repeat=-1使用});gsap.to(".room_3", {xPercent: 110,duration: 1, // duration（动画时长）delay: 1, // 延时repeat: -1, // 循环次数，-1 无限次；yoyo: true, //悠悠球，往复运动，配合repeat=-1使用stagger: 1, // 每个动画之间的时间// ease: "bounce.out", // 速度变化率  "power1.in"   "power1.out"  "power1.inOut"});gsap.to(".room_4", {xPercent: -110,duration: 1, // duration（动画时长）delay: 1, // 延时repeat: -1, // 循环次数，-1 无限次；yoyo: true, //悠悠球，往复运动，配合repeat=-1使用stagger: 1, // 每个动画之间的时间// ease: "bounce.out", // 速度变化率});},reset_move() {gsap.to(".room_all", {yPercent: 0,duration: 0.5, // duration（动画时长）});gsap.to(".room_3", {xPercent: -110,duration: 1, // duration（动画时长）});gsap.to(".room_4", {xPercent: 110,duration: 1, // duration（动画时长）});},to_fn() {gsap.to(".circle", {x: 500, // x 坐标设置scale: 0.6, // 缩放skewY: 30, // 倾斜 30，skewX，skewYopacity: 1, // 透明度repeat: -1, // 循环次数，-1 无限次；backgroundColor: "#8d3dae", // 背景色设置rotation: 330, //  rotation: 旋转角度duration: 3, // duration（动画时长）delay: 1, // 延时yoyo: true, //悠悠球，往复运动，配合repeat=-1使用});},from_fn() {gsap.from(".circle", { x: 300 });},fromTo_fn() {gsap.fromTo(".circle", { x: 400 }, { x: 200 });},set_fn() {gsap.set(".circle", { x: 100 });},reset() {gsap.to(".circle", {x: 0,rotation: 0,skewY: 0, // 倾斜 30，skewX，skewYopacity: 1, // 透明度scale: 1,});},},
};
</script>
<style lang='less' scoped>
.circle {width: 100px;height: 100px;// border:2px solid blue;background: linear-gradient(to bottom, #f30de7, #fa7e4a);border-radius: 30%;
}
</style>