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

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

news 2026/4/7 21:20:57

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

客户决策链地图怎么画：老板、采购、技术、项目、法务分别怎么看你

在很多B2B企业的表达体系里&#xff0c;“客户”这个词经常被用得过于整齐。 官网会写“服务行业客户”&#xff0c;销售会说“面向大型企业”&#xff0c;PPT会写“解决复杂需求”。这些话都没问题&#xff0c;但它们通常默认一个前提&#xff1a;客户像一个人一样在决策。而真…...

编程新知 2026/4/7 19:55:17

基于改进快速粒子群算法的IEEE33节点有源配电网动态无功优化软件介绍

基于改进的快速粒子群有源配电网动态无功优化 软件&#xff1a;Matlab 介绍&#xff1a;在含分布式电源的IEEE33进行无功优化&#xff0c;以无功最优和运行费用最优为目标函数进行优化&#xff0c;采用改进的快速粒子群算法进行计算概述 本系统面向含分布式电源&#xff08;DG&…...

编程新知 2026/4/7 19:16:30

Realistic Vision V5.1 虚拟摄影棚结合传统软件：生成素材导入PS进行后期合成

Realistic Vision V5.1 虚拟摄影棚结合传统软件&#xff1a;生成素材导入PS进行后期合成 你有没有遇到过这样的场景&#xff1a;脑子里有一个绝佳的创意画面&#xff0c;但要么找不到合适的模特和场景&#xff0c;要么拍摄成本高得吓人&#xff0c;要么就是后期修图修到天昏地…...

编程新知 2026/4/7 17:49:13

3大维度解锁BG3 Mod Manager潜能：构建高效博德之门3模组管理体系

3大维度解锁BG3 Mod Manager潜能&#xff1a;构建高效博德之门3模组管理体系 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. This is the only official source! 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 价值定位&#xff1a;重…...

编程新知 2026/4/7 15:21:07

2025届最火的五大降AI率方案实测分析

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在数字化内容生产这一来由之处&#xff0c;过度去依赖人工智能生成内容也就是AIGC&#xff0…...

编程新知 2026/4/7 15:00:55

利用GCC特性实现MCU固件版本号的绝对地址存储

1. 为什么需要绝对地址存储版本号 在嵌入式开发中&#xff0c;固件版本号是一个看似简单却至关重要的信息。想象一下你正在调试一台远程设备&#xff0c;突然发现它运行的是旧版本固件&#xff0c;但翻遍整个代码库都找不到版本号定义在哪里——这种场景我遇到过不止一次。传统…...

编程新知 2026/4/7 14:44:46

3步解决会议记录难题：给职场人士的离线语音转文字工具

3步解决会议记录难题&#xff1a;给职场人士的离线语音转文字工具 【免费下载链接】TMSpeech 腾讯会议摸鱼工具 项目地址: https://gitcode.com/gh_mirrors/tm/TMSpeech 发现问题&#xff1a;为什么会议记录总是让人头疼&#xff1f; 你是否经历过这样的场景&#xff1…...

编程新知 2026/4/7 14:21:58

Simulink 中2-D Assignment 模块的进阶应用与批量赋值技巧

1. 从零认识2-D Assignment模块 第一次在Simulink里看到Assignment模块时&#xff0c;我完全没意识到这个小方块能玩出这么多花样。简单来说&#xff0c;它就是个专门给数组"改作业"的工具——你可以精确指定要修改数组中的哪些元素&#xff0c;就像老师用红笔批改试…...

编程新知 2026/4/7 13:45:22

Apache Answer深度体验：除了当问答系统，它还能这样玩？

Apache Answer深度体验&#xff1a;除了当问答系统&#xff0c;它还能这样玩&#xff1f; 当大多数人提起Apache Answer时&#xff0c;第一反应往往是"开源问答系统"。但如果你只把它当作一个简单的Q&A工具&#xff0c;那就太小看这个13.9K Star的项目了。作为一…...

编程新知 2026/4/7 13:04:43

倾角传感器在工业自动化中的实战应用：以机械臂和桥梁监测为例

倾角传感器在工业自动化中的实战应用&#xff1a;以机械臂和桥梁监测为例 工业自动化领域对设备姿态的精确感知有着近乎苛刻的要求。想象一下&#xff0c;一台正在焊接汽车底盘的六轴机械臂&#xff0c;如果末端执行器出现0.5度的角度偏差&#xff0c;就可能导致焊缝质量不合格…...

编程新知 2026/4/7 11:33:16