数据大屏项目开发过程中，遇到了很多使用gsap实现的动画效果，今天将遇到的动画效果整理一下，希望能够拓展一下大家的思路。
gsap实现进度条加载效果
threejs使用gsap实现相机飞行靠近观察设备
gsap实现推拉门效果实例
gsap实现数字滚动
vue3 数据可视化...
yekong
4个月前 (01-05) 755℃
1喜欢
数据可视化大屏 项目开发中，需要实现数字滚动效果，这里我们使用 gsap 来封装成一个vue组件实现我们想要的效果。
动画效果
使用组件
<numcard :number="item.value" :delay="index*0.15+'s...
yekong
5个月前 (12-14) 484℃
0喜欢
vue 数据可视化大屏 项目开发过程中，需要实现一个按钮，按钮要可以点击，点击后，对应的图标需要有一个旋转的动画效果。
实现代码
<template>
<div class="refresh" @click="getRefr...
yekong
10个月前 (07-01) 332℃
0喜欢
GSAP（GreenSock Animation Platform）是一个强大的JavaScript动画库，它可以用于创建各种动画效果，包括上下浮动的效果。
要实现上下浮动的效果，你可以使用GSAP的gsap模块来创建动画。下面是一个示例代码，展示了如何使用GSAP来实现一个元素...
yekong
10个月前 (06-28) 367℃
0喜欢
最近在做一个2.5效果的 数据可视化大屏 其中有一个效果是一个水罐页面上升，里面带有一个小风扇要一直旋转。
实现思路
风扇旋转我们可以通过css来实现。
页面上升我们可以通过gsap补间动画来实现。
演示实例
gsap 实现水罐页面上升效果实例
实现代码
<templa...
yekong
1年前 (2023-05-06) 373℃
0喜欢
vue 数据大屏项目开发中，需要一个switch开关，element ui有类似的效果，不过和设计图的样式还是有差异的，所以就想着自己写一个，这里面的动画我们用的是gsap补间动画。
实现思路
我们首先通过css实现按钮样式，然后给按钮添加点击事件来改变状态，通过状态的变化来...
yekong
1年前 (2023-05-05) 475℃
0喜欢
之前我们通过 gsap 补间动画 插件实现了 gsap 补间动画列表环绕旋转动画效果，客户看了以后增加了一项要求，就是动画中的两行高度是不一样的，上面的高一些，下面的矮一些，这就需要我们对代码进行调整了。
效果演示
效果要求：
列表上下两种高度，上面的占比60%下面的占比40...
yekong
1年前 (2023-04-14) 758℃
0喜欢
