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