vue项目如何下载使用gsap动画库

前言

1.什么是GSAP?
GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库。

2.GSAP优点
1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。
2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
3、没有依赖。
4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。

3.GSAP版本
GSAP提供4个库文件供用户使用
1.TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。
2.TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。
3.TimelineMax：扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。
4.TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。

官网地址: http://www.greensock.com/
官方教程: https://greensock.com/get-started/
github地址: https://github.com/greensock/GreenSock-JS/

1. 下载

// power shell
npm i gsap 

2.导入

//main.js
import { gsap } from "gsap";

3.编写配置文件

// vue.config.js
const path = require('path');

module.exports = {
	chainWebpack: config => {
		config.resolve.alias.set('gsap', path.resolve(__dirname, 'node_modules', 'gsap')); // 设置GSAP别名
	}
};

4.使用gsap

import { gsap } from "gsap";

export const flow =()=>{
    gsap.set(".flow",{
        y:"-20px",
    });
	gsap.to(".form", {
		y: '0',
		duration: 1,
		repeat: -1,
		yoyo: true,
		ease: "power1.inOut"
	});
}

5.全部代码

<template>
	<view class="main">
		<view class="flow form">
			<input type="text" placeholder="账号" v-model="user.acc">
			<input type="text" placeholder="密码" v-model="user.pwd">
			<button size="mini" type="default" @click="loginIn">登录</button>
			<button size="mini" type="default" @click="reset">取消</button>
		</view>
		<view class="dots">
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot"></view>
		</view>

		<view class="bg-container"></view>
	</view>
</template>

<script>
	import {
		flow,
		showMessage
	} from '../../gsap/index.js'
	import {
		$login
	} from '../../api/index.js'
	export default {
		data() {
			return {
				user: {
					acc: '',
					pwd: '',
				}
			}
		},
		mounted() {
			flow();
		},
		methods: {
			async loginIn() {
				if (this.user.acc.length <= 0 || this.user.pwd.length <= 0) {
					showMessage('请输入账号或密码...');
					return;
				}
				let data = await $login(this.user);
				if (data.length >= 1) {
					uni.setStorage({
						key: 'account',
						data: this.user.acc,
						success: (res) => {
							console.log('记录登录+1');
						}
					})
					uni.navigateTo({
						url: '/pages/index/index',
						animationType: 'slide-in-right'
					})
				} else {
					showMessage('账号或密码错误...');
				}
			},
			reset() {
				this.user.acc = '';
				this.user.pwd = '';
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'account',
				success: (res) => {
					if (res.data.length >= 0) {
						uni.navigateTo({
							url: '/pages/index/index',
							animationType: 'slide-in-right'
						})
					}
				}
			})
		},
	}
</script>

<style scoped>
	* {
		--hei: 40px;
	}

	.main {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.form {
		width: 70%;
		height: 300px;
		border-radius: 10px;
		border: 4px solid orange;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 30px;
		box-shadow: 0px 3px 10px 2px #fff;
	}

	button {
		color: white;
		width: 100%;
		height: var(--hei);
		line-height: var(--hei);
		margin: 10px 0;
		background-color: orange;
		border: none;
	}

	button:active {
		color: white;
		background-color: rgba(255, 165, 0, .4);
	}

	input {
		width: 100%;
		font-size: 14px;
		height: var(--hei);
		margin: 10px 0;
		border: 2px solid orange;
		padding: 0 10px;
		border-radius: 6px;
	}

	.dots {
		width: 40%;
		height: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.dot {
		width: 20px;
		height: 20px;
		background-color: orange;
		border-radius: 50%;
	}
</style>