一、GSAP是什么？

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

二、使用步骤

1.引入库

代码如下（示例）：

npm install gsap --save

2.在vue中使用

代码如下（示例）：

import { TweenMax, gsap } from "gsap";

3.vue组件使用gsap完整代码

代码如下（示例）：

<template><div id="home"><div class="container"><div class="loader-wrapper"><div class="loader-1"></div><div class="loader-2"></div><div class="loader-3"></div></div></div></div>
</template>
<script>
import { TweenMax, gsap } from "gsap";
import headerNav from "../../components/headerNav";
export default {name: "home",components: { headerNav },data() {return {};},mounted() {this.loadding();},methods: {loadding() {const loader = gsap.timeline();const duration = 0.25;const delay = 1;loader.to(".loader-3", duration, { width: 35 }).set(".loader-2", {rotate: 90,transformOrigin: "45px 45px",marginLeft: 0,}).to(".loader-2", duration, { width: 90 }).set(".loader-2", { transformOrigin: "72px 17px", rotate: 270 }).to(".loader-2", duration, { width: 35 }).to(".loader-1", duration, { width: 90 }).set(".loader-1", { transformOrigin: "45px 17.5px", rotate: 180 }).to(".loader-1", duration, { width: 35 }).set(".loader-3", {transformOrigin: "45px 45px",rotate: 270,marginTop: 0,}).to(".loader-3", duration, { width: 90 }).set(".loader-3", { transformOrigin: "17.5px 17.5px", rotate: 90 }).to(".loader-3", duration, { width: 35 }).set(".loader-2", { transformOrigin: "45px 45px", rotate: 180 }).to(".loader-2", duration, { width: 90 }).set(".loader-2", { transformOrigin: "bottom center", marginTop: 20 }).to(".loader-2", duration, { width: 35 }).set(".loader-1", { transformOrigin: "45px 45px", rotate: 90 }).to(".loader-1", duration, { width: 90 }).set(".loader-1", { transformOrigin: "72px 17.5px", rotate: 270 }).to(".loader-1", duration, { width: 35 }).set(".loader-3", { rotate: 360 }).to(".loader-3", duration, { width: 90 }).set(".loader-3", { transformOrigin: "45px 17.5px", rotate: 180 }).to(".loader-3", duration, { width: 35 }).set(".loader-2", {transformOrigin: "45px 45px",rotate: 270,marginTop: 0,}).to(".loader-2", duration, { width: 90 }).set(".loader-2", { transformOrigin: "17.5px 17.5px", rotate: 90 }).to(".loader-2", duration, { width: 35 }).set(".loader-1", { transformOrigin: "45px 45px", rotate: 180 }).to(".loader-1", duration, { width: 90 }).set(".loader-1", { transformOrigin: "bottom center", marginTop: 20 }).to(".loader-1", duration, { width: 35 }).set(".loader-3", { transformOrigin: "45px 45px", rotate: 90 }).to(".loader-3", duration, { width: 90 }).set(".loader-3", { transformOrigin: "72px 17.5px", rotate: 270 }).to(".loader-3", duration, { width: 35 }).set(".loader-2", { transformOrigin: "45px 17.5px", rotate: 0 }).to(".loader-2", duration, { width: 90 }).set(".loader-2", { rotate: 180 }).to(".loader-2", duration, { width: 35 }).set(".loader-1", {transformOrigin: "45px 45px",rotate: 270,marginTop: 0,}).to(".loader-1", duration, { width: 90 }).set(".loader-1", { transformOrigin: "17.5px 17.5px", rotate: 90 }).to(".loader-1", duration, { width: 35 }).set(".loader-3", {transformOrigin: "45px 17.5px",rotate: 180,marginTop: 55,}).to(".loader-3", duration, { width: 90 }).set(".loader-2", { marginLeft: 55 }).delay(delay).repeat(-1);},},
};
</script>
<style lang="scss" scoped>
/* Colors */
$background: #f6cb4f;
$theme-black: #0d0d0d;/* Dimensions */
$loader-wrapper-width: 90px;
$loader-width: 35px;
$loader-height: 35px;
%center {display: flex;justify-content: center;align-items: center;
}
%loader {position: absolute;width: $loader-width;height: $loader-height;border: 10px solid $theme-black;border-radius: 40px;
}
#home {height: 100%;width: 100%;/* Specific Styles */.container {@extend %center;height: 100vh;}.loader-wrapper {display: flex;position: absolute;top: calc(50% - calc(#{$loader-wrapper-width} / 2));left: calc(50% - calc(#{$loader-wrapper-width} / 2));width: $loader-wrapper-width;}.loader-1 {@extend %loader;}.loader-2 {@extend %loader;margin-left: 55px;}.loader-3 {@extend %loader;width: $loader-wrapper-width;margin-top: 55px;}
}
</style>

总结

good afternoon

在vue项目中使用gsap，实现极佳的2d动画效果相关推荐

html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...
PopupWindow在项目中的使用并指定位置及加入动画效果
2019独角兽企业重金招聘Python工程师标准>>> 项目做到一期收尾阶段,突然要用到弹出窗口,于是自然而然的就想起了PopupWindow这个组件了,才发现平时用的少,对这个组件 ...
vue项目中实现价格被横线划掉，折扣价效果
效果图代码横线划掉效果就是用到了css的一句代码:text-decoration: line-through; 其他颜色大小是自己改的. <p class="usa"&g ...
在vue项目中使用js2wordcloud实现自定义词云形状的效果
npm install js2wordcloud import Js2WordCloud from 'js2wordcloud' imageShape 是生成词云的样子的图片.不支持base64为的图 ...
Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
如何在vue项目中实现前端埋点？埋点用户操作之Vue实现
埋点又称为事件追踪,目的是收集用户行为数据,例如用户点击了什么按钮,浏览了哪些页面,浏览了多长时间.从哪个页面进入的当前页(转化率)等. 刨除node等实现方式,对于前端来说, 保存这些操作或者说记录 ...
VUE项目中集成AnimateCSS动画（2020.6.28 亲测可用）
目录在 Vue 项目中使用 animate.css 第一步:安装第二步:引入及使用第三步:页面中使用(相比网上搜到的教程,有改动的地方) 如何找到想要的动画题外话 vue 方式给元素绑定进入动 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...

在vue项目中使用gsap，实现极佳的2d动画效果

在vue项目中使用gsap，实现极佳的2d动画效果

一、GSAP是什么？

二、使用步骤

1.引入库

2.在vue中使用

3.vue组件使用gsap完整代码

总结

在vue项目中使用gsap，实现极佳的2d动画效果相关推荐

最新文章

热门文章