GSAP动画学习
一、安装
1. npm安装
npm install gsap
引用:
import { gsap } from "gsap";
2. CDN引用
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
引用:
<script>
// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
// gsap code here!
});
</script>
3. yarn安装
yarn add gsap
引用:
import { gsap } from "gsap";
二、应用
图例
代码
<template>
<div class="backGround">
<div class="container">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
:css="false"
>
<div v-if="show">
<section class="boxes-container" ref="main">
<div class="title">
<div class="box">{{ userName.name }},</div>
<div>
<div class="box">您好,欢迎使用XXXX平台</div>
</div>
</div>
<div style="margin-top: 30px" class="button">
<a-button type="primary" class="buttonStyle" @click="changeRoute">
查看详情
<ArrowRightOutlined />
</a-button>
</div>
</section>
</div>
</transition>
</div>
</div>
</template>
<script setup>
import tool from '@/utils/tool'
import router from '@/router'
import gsap from 'gsap'
let userName = ref()
userName.value = tool.data.get('USER_INFO')
const changeRoute = () => {
router.push({ path: '/visualization' })
}
/**
* @name: GSAP盒子动画
* @description: 描述信息
* @author: Coisini_甜柚か
* @date: 2024-03-12 17:30:16
*/
const show = ref(true)
const main = ref()
onMounted(() => {
gsap.context((self) => {
gsap
.timeline()
.from('.button', {
opacity: 0,
y: -100,
duration: 1
})
.from(
'.box',
{
opacity: 0,
y: -100,
duration: 2,
ease: 'bounce.out',
delay: -0.5
},
'>'
)
}, main.value)
gsap.from('.backGround', {
xPercent: -50,
yPercent: -50,
transformPerspective: 500,
opacity: 0
})
})
/**
* @name: transition组件
* @description: 描述信息
* @author: Coisini_甜柚か
* @date: 2024-03-12 17:37:39
*/
const beforeEnter = () => {
console.log('beforeEnter')
}
const enter = (el, done) => {
console.log('enter')
done()
}
const afterEnter = () => {
console.log('afterEnter')
}
const enterCancelled = () => {
console.log('enterCancelled')
}
const beforeLeave = () => {
console.log('beforeLeave')
}
const leave = (el, done) => {
console.log('leave')
done()
}
const afterLeave = () => {
console.log('afterLeave')
}
const leaveCancelled = () => {
console.log('leaveCancelled')
}
</script>
<style scoped>
.backGround {
height: 850px;
width: 100%;
background-image: url(@/assets/images/homeLoge.png);
background-size: 100% 100%;
}
.container {
width: 800px;
height: 300px;
position: absolute;
margin-top: 150px;
margin-left: 80px;
}
.title {
font-size: 50px;
color: rgba(0, 0, 0, 0.7);
letter-spacing: 8px;
font-weight: 600;
}
.buttonStyle {
font-size: 20px;
width: 150px;
height: 50px;
border-radius: 8px;
}
.box {
display: inline-block;
margin-bottom: 10px;
}
</style>