GSAP动画学习

Coisini_甜柚か

已于 2024-03-21 15:28:14 修改

阅读量520

点赞数 9

分类专栏：前端知识库 Vue3 文章标签：学习

于 2024-03-13 17:19:54 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/136679136

版权

前端知识库同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在项目中通过npm、CDN和yarn安装GSAP库，以及如何在Vue组件中使用GSAP进行元素动画效果的创建，包括过渡组件和自定义动画示例。

摘要由CSDN通过智能技术生成

在这里插入图片描述

GSAP动画学习

文章目录

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";

二、应用

图例

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>