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

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

news 2026/1/15 13:13:12

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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/1/14 17:11:06

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/15 5:39:34

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/15 6:11:35

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/15 4:58:01

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2026/1/15 9:38:59

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2026/1/15 5:01:55

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2026/1/15 5:38:36

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2026/1/15 5:02:31

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2026/1/15 6:49:47