gsap动画库入门

目录

前言

一、基本用法

(一) 安装

(二) 语法

(三) 简单动画

二、配置

(一) 动画方法

1. to

2. from

3. fromTo

4. set

(二) 动画目标

(三) 动画属性


前言

官网:https://gsap.com/

中文文档:GSAP 中文教程 中文文档 |官方文档 官方教程翻译 |好奇代码出品

gsap

  • 一个强大的动画库,兼容多个框架,可以帮助网站快速写出优雅美丽的动画效果

一、基本用法

(一) 安装

pnpm install gsap

(二) 语法

效果:class类名为box的元素向x轴平行移动200px

gsap.to(".box", { x: 200 })

从这个图可以看出关键属性有三个

  • method:方法
  • target:目标元素
  • variables:动画配置

(三) 简单动画

结合Vue3实现刚刚的效果,注意需要页面挂载完成才可实现动画,故使用onMounted钩子函数

<script setup lang="ts">
import { gsap } from "gsap";
import { onMounted } from "vue";

onMounted(() => {
  gsap.to(".box", {
    x: 300, // 横向移动300px
  });
});
</script>

<template>
  <div class="box"></div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

二、配置

(一) 动画方法

语法

作用

gsap.to()

元素从初始状态结束状态

gsap.from()

元素从结束状态开始状态

gsap.fromTo()

自定义元素的开始与结束状态

gsap.set()

直接设置成想要的状态,没有任何过度与动画效果

1. to

gsap.to(".box", {
  x: 300, // 横向移动300px
  duration: 2, // 动画持续时间为2秒
  ease: "power1.inOut", // 动画缓动函数
  repeat: -1, // 无限重复
  yoyo: true, // 动画来回播放
});

2. from

gsap.from(".box", {
  x: 300, // 横向移动300px
  duration: 2, // 动画持续时间为2秒
  ease: "power1.inOut", // 动画缓动函数
  repeat: -1, // 无限重复
  yoyo: true, // 动画来回播放
});

元素一开始的状态是先从结束的横向300px位置返回到原来的位置,然后继续循环该动画

3. fromTo

gsap.fromTo(
  ".box",
  {
    x: 0, // 横向移动300px
    ease: "power1.inOut", // 动画缓动函数
    duration: 2, // 动画持续时间为2秒
    backgroundColor: "skyblue",
  },
  {
    x: 300,
    ease: "power1.inOut", // 动画缓动函数
    duration: 2, // 动画持续时间为2秒
    backgroundColor: "red",
  }
);

4. set

设置这个方法则不会产生动画效果,set作用是将配置对象里的CSS效果添加到目标元素上的

gsap.set(".box", {
  x: 0, // 横向移动300px
  backgroundColor: "skyblue",
});

(二) 动画目标

在设置目标上,可以有以下几种方式

// 使用类名或者id名,其实css选择器都可以
gsap.to(".box", { x: 200 });

// 复杂一些的css选择器
gsap.to("section > .box", { x: 200 });

// 一个变量,其实是把获取到的DOM元素直接传进去
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// 可以把dom元素放到数组里面一起传入
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })

// Vue3
const traget = ref()
gasp.to(target.value, {x: 200});

(三) 动画属性

  1. CSS样式

在动画属性中可以写CSS属性,编写元素的CSS元素,比如在上述方法:fromTo的介绍中,就为元素设置了背景颜色。

  1. 动画配置

在配置对象我们还可以根据以下方法来控制动画效果,就跟CSS写效果一样,通过设置这些参数,整除花样动画效果

属性

作用

duration

动画变化时长,默认0.5

delay

动画变化开始前的延迟时长(秒),默认是0.5

repeat

动画的重复次数,-1为无限重复

yoyo

如果设置为ture,那么动画会在执行完之后再反向执行一次,就像悠悠球的效果,默认是false

ease

动画过渡的运动曲线的设置,默认是"power1.out"

  • 19
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
GSAP(GreenSock Animation Platform)是一个非常强大的JS动画,可以用于创建各种动画效果。其中,gsap.to可以用来创建进度条动画。 在使用gsap.to创建进度条动画时,我们可以先设置一个初始状态的值,然后通过指定目标值和一定的时间来实现动画效果。具体来说,我们可以使用gsap.to来修改进度条的宽度或者其他属性,从而实现动态变化的效果。 要创建一个进度条动画,首先需要确保你已经引入了GSAP并熟悉其基本用法。然后,你可以选择一个HTML元素作为进度条的容器,并设置它的初始样式,比如宽度为0。接下来,你可以使用gsap.to来改变进度条的宽度,设置目标值为100%(或者你想要的值),并指定一个适当的持续时间。在动画完成后,进度条就会以一个平滑的动画效果达到目标值。 总结起来,使用GSAP的gsap.to方法可以很方便地创建进度条动画。你可以设置初始状态和目标值,并通过指定持续时间来控制动画的速度。这样,你就可以实现一个漂亮而流畅的进度条动画效果。 需要注意的是,GSAP还有其他的方法和插件可以进一步扩展动画效果,比如TweenLite和CSSPlugin等。TweenLite是GSAP的核心,用于创建基本动画,而CSSPlugin则用于实现DOM元素的动画效果。你可以根据自己的需求选择适合的方法和插件来增强你的进度条动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【前端实例代码】使用 HTML&& CSS&&JavaScript实现进度条时间特效动画效果 |前端开发 网页制作 基础入门...](https://blog.csdn.net/qq_22182989/article/details/126356023)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值