当前位置： 首页 > news >正文

前端技术 -- 动画效果之GSAP作用与使用示例

news 2026/2/9 7:59:48

GSAP（GreenSock Animation Platform）简介

GSAP 是一个高性能、跨平台的 JavaScript 动画库，广泛用于网页动画的制作。它提供了丰富的 API，使得开发者可以轻松创建复杂的动画效果，并且在不同浏览器和设备上都能获得一致的性能表现。

GSAP 的主要作用

  1. 动画控制：可以精确控制动画的时间、速度、延迟等。
  2. 兼容性好：在各种浏览器和设备上都有出色的表现。
  3. 易于使用：提供简单直观的 API，方便开发者快速上手。
  4. 高性能：针对动画性能进行了优化，能够高效地处理大量复杂的动画。

GSAP 的基本用法

1. 安装 GSAP

可以通过 CDN 或 npm 来引入 GSAP 库。

CDN 引入

在 HTML 文件的 <head> 标签中添加以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
npm 引入
npm install gsap

2. 创建基本动画

以下是一个简单的例子，演示如何使用 GSAP 创建一个元素的动画：

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>GSAP Animation Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script><style>#box {width: 100px;height: 100px;background-color: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><div id="box"></div><script>// 创建一个简单的动画，将box元素从左到右移动gsap.to("#box", {duration: 2, x: 300});</script>
</body>
</html>

3. 详细的动画控制

GSAP 可以控制动画的各个方面，例如延迟、重复、缓动效果等。

创建复杂动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>GSAP Advanced Animation Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script><style>#circle {width: 100px;height: 100px;background-color: blue;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><div id="circle"></div><script>// 创建一个复杂的动画，控制circle元素的移动、旋转、缩放等gsap.to("#circle", {duration: 3,x: 200,rotation: 360,scale: 1.5,ease: "bounce",repeat: -1,yoyo: true});</script>
</body>
</html>

总结

GSAP 是一个功能强大且易于使用的动画库，适用于各种网页动画效果的实现。通过 GSAP，开发者可以轻松创建高性能、跨平台的动画，并且在不同浏览器和设备上获得一致的用户体验。

如果需要进一步了解 GSAP 的高级功能和详细用法，可以参考 GSAP 官方文档。

相关文章：

前端技术 -- 动画效果之GSAP作用与使用示例

GSAP&#xff08;GreenSock Animation Platform&#xff09;简介 GSAP 是一个高性能、跨平台的 JavaScript 动画库&#xff0c;广泛用于网页动画的制作。它提供了丰富的 API&#xff0c;使得开发者可以轻松创建复杂的动画效果&#xff0c;并且在不同浏览器和设备上都能获得一致…...

编程日记 2024/8/9 4:58:44

C口一拖二数据线：解锁数字生活的便捷新篇章LDR6020

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 在科技日新月异的今天&#xff0c;我们的电子设备如同生活中的伴侣&#xff0c;无论是工作、学习还是娱乐&#xff0c;都离不开它们的陪伴。随着Type-C接口逐渐成为众多高端智能手机、平板电脑、笔记本电脑…...

编程日记 2024/8/9 4:57:42

CH07_数据绑定

第7章&#xff1a;数据绑定 本章目标 理解路由事件 掌握键盘输入事件 掌握鼠标输入事件 掌握多点触控输入事件 数据绑定概述 什么是数据绑定 ​ 将WPF中的至少一个带有依赖项属性的两个对象的两个属性进行绑定&#xff0c;使某一个依赖项属性可以更新和它绑定的属性的功…...

编程日记 2024/8/9 4:56:41

24.python基础（8.8）

python基础 1.搭建环境python3 1.查看是否有安装python [rootpython1 ~]# yum list installed |grep python 2.安装python3 [rootpython1 ~]#yum -y install python3 [rootpython1 ~]#python --version #查看版本信息 最新安装3.12&#xff0c;可以使用源码安装 开…...

编程日记 2024/8/9 4:54:40

【论文阅读】MobileNetV4 - Universal Models for the Mobile Ecosystem

文章目录 摘要一、介绍二、相关工作三、与硬件无关的帕累托效率四、通用倒置瓶颈五、移动MQA六、MNv4模型的设计6.1 为增强的体系结构改进NAS6.2 MNv4模型的优化 7. 结果7.1 ImageNet分类7.2 COCO目标检测 8. 强化蒸馏配方9. 结论 MobileNetV4 - 移动生态系统的通用模型 摘要 …...

编程日记 2024/8/9 4:52:36

大模型日报 2024-08-07

大模型日报 2024-08-07 大模型资讯 [Figure AI 把「终结者」造出来了] 简介&#xff1a;Figure 发布新一代人形机器人 Figure 02&#xff0c;具多种功能&#xff0c;能实时对话、自主执行任务&#xff0c;导航用 VLM&#xff0c;电池续航提升&#xff0c;机械手先进&#xff0c…...

编程日记 2024/8/9 4:51:35

区块链ddos防护怎么做

区块链ddos防护怎么做?在区块链这一新兴技术的浪潮中&#xff0c;我们见证了无数创新应用的诞生与繁荣。然而&#xff0c;在这片充满机遇的蓝海中&#xff0c;也潜藏着不容忽视的暗流——分布式拒绝服务攻击&#xff08;DDoS&#xff09;。DDoS攻击&#xff0c;如同网络世界的…...

编程日记 2024/8/9 4:50:34

在Linux中认识pthread库

int *pnullptr; pnullptr; *pnullptr; 指针变量做右值也是变量拥有空间。去承装数据。 *p代表指针所指向的空间&#xff0c;及0号地址&#xff0c;及往虚拟地址的0号地址处写8个字节的数据&#xff0c;全部写为0. &#xff08;此操作不允许&#xff09; 进程和线程的关系如…...

编程日记 2024/8/9 4:46:31

LVS 负载均衡

目录 LVS 体系结构 LVS 相关概念术语 lvs 集群常见类型 实验一&#xff1a; LVS NAT模式 LVS NAT特性 实验二&#xff1a; LVS DR模式 LVS DR特性 LVS是Linux virtual server的缩写&#xff0c;是一个高性能的、开源的负载均衡器&#xff0c;它运行于Linux操作系统之上…...

编程日记 2024/8/9 4:45:30

在Excel中启用宏 (～￣▽￣)～

一、启用宏 打开任意Excel&#xff0c;点击屏幕左上角的文件选项&#xff0c;然后选择Excel选项窗口。在Excel选项窗口中&#xff0c;选择信任中心按钮&#xff1b;在信任中心设置窗口中&#xff0c;选择宏设置&#xff0c;启用所有宏&#xff08;不推荐&#xff0c;潜在风险&a…...

编程日记 2024/8/9 4:44:29

连接投影仪/显示器只能扩展不能复制的解决方案

原文章&#xff1a;https://iknow.lenovo.com.cn/detail/121481 故障现象&#xff1a; 笔记本外接投影仪/显示器后&#xff0c;笔记本屏幕有显示&#xff0c;但投影仪却只有背景或没有显示&#xff1b; 原因分析&#xff1a; 此现象多发生在双显卡机型上&#xff0c;笔记本屏…...

编程日记 2024/8/9 4:40:25

数据库基础知识

数据库基础知识 主流的数据库连接MySQL理解mysql和mysqld和数据库简单对数据库操作MySQL构架SQL分类存储引擎总结 主流的数据库 SQL Sever&#xff1a; 微软的产品&#xff0c;.Net程序员的最爱&#xff0c;中大型项目。Oracle&#xff1a; 甲骨文产品&#xff0c;适合大型项目…...

编程日记 2024/8/9 4:38:23

java JVM 锁消除

Java虚拟机 (JVM) 中的锁消除 (Lock Elimination) 是一种编译时优化技术&#xff0c;用于减少或完全去除不必要的同步操作。锁消除可以显著提高程序的性能&#xff0c;尤其是在多线程环境中。下面详细介绍锁消除的工作原理和技术细节。 锁消除的目的 锁消除的目标是在编译阶段…...

编程日记 2024/8/9 4:36:21

基于 Java Supplier与Predicate 封装自动重试机制通用接口

核心逻辑就是把重试的业务与重试中断条件抽象出来函数化&#xff0c;内部重试业务具体化。 关键需要理解Java的函数式接口编程 Supplier 与 Predicate作用。 import lombok.Data; import lombok.extern.slf4j.Slf4j;import java.util.Random; import java.util.function.Predi…...

编程日记 2024/8/9 4:35:19

Java面试题（基础篇）②

目录 一&#xff0c;float f3.4 是否正确&#xff1f; 二&#xff0c;重写和重载的区别是什么 三&#xff0c;this和super的应用场景是什么 四&#xff0c;throw和throws的区别是什么 五&#xff0c;应该使用什么数据类型来计算价格 一&#xff0c;float f3.4 是否正确&am…...

编程日记 2024/8/9 4:32:16

【docker快捷部署系列二】用docker-compose快速配置多个容器，docker部署Springboot+Vue项目和mysql数据库

1、思路 docker部署项目是将项目的不同程序放入不同容器中运行&#xff0c;这样可以方便管理不同程序。我的项目有Springboot、Vue、mysql三部分&#xff0c;Vue用nginx代理&#xff0c;因为nodejs太占空间了。一开始我是用Dockerfile创建镜像再运行容器的&#xff0c;但发现它…...

编程日记 2024/8/9 4:30:14

Java新手指南：从菜鸟到编程大师的趣味之路-类和对象

这里是Themberfue 本章主要介绍的是Java最重要的面向对象&#xff08;OOP&#xff09;的基础 面向对象 Java是一门纯面向对象的语言&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。用…...

编程日记 2024/8/9 4:28:12

计算机毕业设计选题推荐-房屋租赁系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…...

编程日记 2024/8/9 4:26:10

LeetCode 3131.找出与数组相加的整数 I：最小值之差（多语言一行版）

【LetMeFly】3131.找出与数组相加的整数 I&#xff1a;最小值之差&#xff08;多语言一行版&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-the-integer-added-to-array-i/ 给你两个长度相等的数组 nums1 和 nums2。 数组 nums1 中的每个元素都与…...

编程日记 2024/8/9 4:25:09

Win32注册表操作

注册表的概念 注册表是一个存储计算机配置信息的数据库&#xff0c;用于存储计算机上的硬件、安装的软件、系统设置以及用户账户配置等重要信息。对注册表的编辑不当可能会影响计算机的正常运行。应用程序可以调用API函数来对注册表进行增、删等操作。 注册表结构 运行Regedi…...

编程日记 2024/8/9 4:24:08

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2026/2/8 20:43:05

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/1/24 14:23:08

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/2/8 22:00:17

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2026/2/7 2:25:07

阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

编程新知 2026/1/29 20:04:46

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

编程新知 2025/10/8 8:04:56