在vue项目开发中,我们除了可以通过wowjs来给页面增加动画效果外,也可以通过使用gsap补间动画来让页面元素动起来。
安装依赖
npm install gsap
使用
// typical import
import gsap from "gsap";
...
yekong
2年前 (2023-05-29)
喜欢
vue 数据大屏项目 开发中,展示echarts柱状图,最近半年的数据,因为接口需要传开始和结束日期来查询数据,所以我们需要把先获取过去6个月的日期,并且还需要获取这个6个月的开始日期和结束如期。
引入dayjs
import dayjs from "dayjs&quo...
yekong
2年前 (2023-05-24)
喜欢
vue 数据大屏项目 开发中,展示echarts柱状图,最近一个月的数据,因为接口需要传每一天的日期来查询数据,所以我们需要把当前月份所有日期都遍历出来,但是有的月份是31天有的月份是30天,所以我们需要动态获取不能写死,通过dayjs的startOf我们可以获取月份开始的日期,...
yekong
2年前 (2023-05-24)
喜欢
vue 数据大屏项目 开发中,展示echarts柱状图,要求展示周一到周日的数据,但是要获取数据的话,需要传日期给接口获取数据,这就需要获取本周的日期来查询数据了。获取日期我们可以通过dayjs来获取。首先获取本周开始的那一天,然后通过add来加天数一次获取本周的日期。
引入da...
yekong
2年前 (2023-05-23)
喜欢
tweenjs 与 gsap补间动画 插件类似,使用前先要安装依赖
安装依赖
pnpm i @tweenjs/tween.js
参数说明
start
方法接受一个参数 time。如果你使用它,那么补间不会立即开始,直到特定时刻,否则会尽快启动(即在下次调用 TWEEN.upda...
yekong
2年前 (2023-04-17)
喜欢
接口请求时,会遇到前端需要的值是列表,但是后端返回的字段是对象,例如接口文档的描述如下:
字段含义:
studentTypeJuniorCollege--学生(数据源:教务)-专科生数
studentTypeOverseasStudent--学生(数据源:教务)-留学生数
stu...
yekong
2年前 (2023-04-10)
喜欢
最近在做数据可视化大屏的时候,有一个项目里面有很多线条,并且线条是倾斜的,想通过css的方式来实现,rotateZ,但是这种旋转有一个问题,是以div的中心点为旋转中心的,我希望是以div左上角为中心点,所以需要调整一下。
transform: rotateZ(10deg);
...
yekong
2年前 (2023-03-28)
喜欢
vue 实现波浪柱状图效果实例,通过补间动画实现柱状图水面上升的效果。通过svg实现波浪的效果。
组件代码
/**
* @Author: 858834013@qq.com
* @Name: waterSpout
* @Date: 2023年03月27日
* @Desc: 水柱
...
yekong
2年前 (2023-03-28)
喜欢
最近一个项目要求做一个圆柱,顶部要有波浪效果,试了几种效果最后选择了css3 实现波浪效果实例,通过使用svg加css方式来实现。
通过linearGradient实现svg渐变色
<linearGradient id="gradient-test"&...
yekong
2年前 (2023-03-28)
喜欢
项目开发中,我需要从一个列表中随机取3个不同的下标来加入到新的数组中
使用
从下标0开始,列表最大长度结束,取3个值
var list = GetRandomArr(0, this.list.length - 1, 3)
方法代码
function GetRandomArr(m...
yekong
2年前 (2023-03-27)
喜欢