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

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

news 2025/6/2 2:52:22

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

python创建args命令行分析

这段代码是一个使用 Python 的 argparse 模块创建命令行界面的示例。它定义了一系列的命令行参数和子命令&#xff0c;通常用于构建和管理软件项目或版本控制系统中的操作。以下是对代码的逐行分析&#xff1a; 1初始化 ArgumentParser parser argparse.ArgumentParser(forma…...

编程新知 2025/6/2 0:58:06

《HelloGitHub》第 110 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对开源感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、…...

编程新知 2025/6/1 20:02:07

实现MPC钱包

多方计算&#xff08;MPC&#xff0c;Multiparty Computation&#xff09;钱包是一种利用密码学技术实现的加密货币钱包&#xff0c;它允许多个参与者共同生成和管理钱包的私钥&#xff0c;而无需将私钥暴露给任何单个参与者。这种钱包具有高度的安全性和隐私性。实现一个 MPC …...

编程新知 2025/6/1 16:35:08

从0到1：多医院陪诊小程序开发笔记(上）

概要设计 医院陪诊预约小程序&#xff1a;随着移动互联网的普及&#xff0c;越来越多的医院陪诊服务开始向线上转型, 传统的预约方式往往效率低下&#xff0c;用户需耗费大量时间进行电话预约或现场排队&#xff0c;陪诊服务预约小程序集多种服务于一体&#xff0c;可以提高服…...

编程新知 2025/6/1 14:51:45

Windows10下使用QEMU安装Ubuntu20.04虚拟机，并启用硬件加速

Windows10下使用QEMU安装Ubuntu20.04虚拟机&#xff0c;并启用硬件加速 作者将狼才鲸创建日期2025-05-30 CSDN阅读地址&#xff1a;Windows10下使用QEMU安装Ubuntu20.04虚拟机&#xff0c;并启用硬件加速 本文档源码地址&#xff1a;Windows10下使用QEMU安装Ubuntu20.04虚拟机…...

编程新知 2025/6/1 13:27:19

LVS-DR高可用-Keepalived

目录 Keepalved双机热备 核心概念 关键组件 工作流程 实例环境 配置keepalived Web服务器配置 Keepalved双机热备 Keepalived双机热备是一种基于VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;实现的高可用性解决方案&am…...

编程新知 2025/6/1 12:34:54

【技能拾遗】——家庭宽带单线复用布线与配置（移动2025版）

&#x1f4d6; 前言&#xff1a;在家庭网络拓扑中&#xff0c;客厅到弱电箱只预埋了一根网线&#xff0c;由于已将广电的有线电视取消并改用IPTV。现在需要解决在客厅布置路由器和观看IPTV问题&#xff0c;这里就用到单线复用技术。 目录 &#x1f552; 1. 拓扑规划&#x1f55…...

编程新知 2025/6/1 11:24:51

GD32F103系列工程模版创建记录

准备条件&#xff1a; 1&#xff1a;首先需要下载GD32F103的官方库 2&#xff1a;GD32F103的软件包 3&#xff1a;KEIL5软件 4&#xff1a;单片机GD32F103C8T6 本文已经默认KEIL5已将安装好GD32F103的软件包了 步骤一 基本模版创建 1 打开KEIL5软件&#xff0c;新建工程&am…...

编程新知 2025/6/1 9:41:01

【请关注】各类数据库优化，抓大重点整改，快速优化空间mysql，Oracle，Neo4j等

各类数据库优化&#xff0c;抓大重点整改&#xff0c;快速优化&#xff0c;首先分析各数据库查询全部表的空间大小及记录条数的语句&#xff1a; MySQL -- 查看所有表的空间大小 SELECT TABLE_SCHEMA AS 数据库名, TABLE_NAME AS 表名, ENGINE AS 存储引擎, CONCAT(ROUND(DAT…...

编程新知 2025/6/1 8:49:07

【Unity笔记】Unity WASD+QE 控制角色移动与转向（含 Shift 加速）实现教程

摘要&#xff1a; 在 Unity 游戏开发中&#xff0c;键盘控制角色的移动与转向是基础功能之一。本文详细讲解如何使用 C# 实现基于 WASD 移动、QE 转向 与 Shift 加速奔跑 的角色控制器&#xff0c;适用于第一人称、第三人称、自由漫游等场景。通过直观的 Transform 控制方法与可…...

编程新知 2025/6/1 7:35:30