详细介绍视频地址: 【HTML/CSS/JS】前端动画库GSAP，一起来了解一下
效果图
GSAP特点
1.运行速度快
2.健全性:包含了很多基础动画
3.兼容性:像html svg react 新旧浏览器 移动端它都处理的很好
4.任何对象都可以实现动画
5.零依赖
6.轻量可扩展:将功能拆分成不同的动画模块,可以按需使用
GSAP提供4个库文件供用户使用
(1)TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。
(2)TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。
(3)TimelineMax：扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。
(4)TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。
引入方式
cdn
npm
常用方法
to
to方法，从当前位置到指定位置，第一个参数是需要动画的对象，第二个是动画参数
from
from方法，从指定位置到当前位置，和to方法相对
timeline
GSAP可以创建timeline时间轴,更容易去控制动画和管理时间，时间轴提供了播放暂停反向倍速等几十个属性和方法
staggerFormTo
staggerFormTo是为多个目标创建一个有间隔的动画序列
第一个参数是需要动画的对象或数组
第二个是每个动画持续的秒数
第三个和第四个分别是起始动画参数
第五个参数每个动画开始的时间间隔
第六个插入排序动画的位置
第七个整个排序动画完成时触发的函数
主要代码
<script>
const tl1 = gsap.timeline()
tl1.to(
'.box-one', {
x: 100,
y: 100,
scaleX: 2,
rotation: 360,
duration: 1,
delay: 1,
onComplete: () => {
console.log('end')
}
}
).from(
'.box-two', {
x: 100,
y: 100,
scaleY: 2,
rotation: 360,
duration: 2,
delay: 1,
repeat: 0,
yoyo: true,
backgroundColor: '#fff'
}, '>-1'
)
setTimeout(() => {
tl1.pause()
}, 2500)
const tl2 = gsap.timeline()
tl2.staggerFromTo(
'span', .5, {
ease: Back.easeOut.config(1.7),
opacity: 0,
rotation: 180,
y: -100
}, {
ease: Back.easeOut.config(1.7),
opacity: 1,
rotation: 360,
y: () => {
return Math.random() * 50
}
}, .1, '+=0', () => {
console.log('tl2:end')
}
)
</script>
视频中demo
smoke1.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>smoke1</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.container {
position: relative;
width: 100%;
height: 100%;
background-color: #000;
}
.circle-area {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.circle {
position: relative;
width: 600px;
height: 600px;
filter: url(#wavy) blur(1px);
}
.circle::before {
content: '';
position: absolute;
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
border: 20px solid #fff;
border-radius: 50%;
box-shadow: 0 0 50px #00f, inset 0 0 50px #00f;
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0002);
animation: animate 5s linear infinite;
}
.circle::after {
content: '';
position: absolute;
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
border: 20px solid #fff;
border-radius: 50%;
box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0002);
}
@keyframes animate {
0% {
box-shadow: 0 0 50px #00f, inset 0 0 50px #00f;
filter: hue-rotate(0deg);
}
20% {
box-shadow: 0 0 60px #00f, inset 0 0 50px #00f;
}
40% {
box-shadow: 0 0 40px #00f, inset 0 0 50px #00f;
}
60% {
box-shadow: 0 0 80px #00f, inset 0 0 50px #00f;
}
80% {
box-shadow: 0 0 100px #00f, inset 0 0 50px #00f;
}
100% {
box-shadow: 0 0 50px #00f, inset 0 0 50px #00f;
filter: hue-rotate(360deg);
}
}
svg {
width: 0;
height: 0;
display: none;
}
.video-area {
height: 100vh;
background: #000;
}
.video-area:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #FF0000, #FF0000, #FF0000, #FF7D00, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF);
mix-blend-mode: color;
pointer-events: none;
}
video {
height: 100%;
width: 100%;
display: block;
}
.text-area {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 8px;
background-color: transparent;
letter-spacing: 3.8px;
}
.text-letter-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.text-letter-wrapper span {
opacity: 0;
font-size: 28px;
font-weight: bold;
color: #fff;
}
.text-name-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.text-name-wrapper span {
opacity: 0;
font-size: 24px;
font-weight: bold;
color: #fff;
}
.text-name-wrapper .up {
position: relative;
top: 1px;
font-size: 28px;
font-weight: bold;
color: rgb(222, 41, 16);
}
</style>
</head>
<body>
<div class="container">
<div class="circle-area">
<div class="circle">
</div>
<!-- <svg>
<filter id="wavy">
<feTurbulence x='0' y='0' baseFrequency='0.009' numOctaves='5' seed='2'>
<animate attributeName='baseFrequency' dur='60s' values='0.02;0.005;0.02'
repeatCount='indefinite'>
</animate>
</feTurbulence>
<feDisplacementMap in='SourceGraphic' scale='30'></feDisplacementMap>
</filter>
</svg> -->
</div>
<div class="video-area">
<video src="../../assets/video/smoke.mp4" autoplay muted>
</video>
</div>
<div class="text-area">
<div class="text-letter-wrapper">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span> </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</div>
<div class="text-name-wrapper">
<span> </span>
<span> </span>
<span> </span>
<span>单</span>
<span>单</span>
<span>单</span>
<span></span>
<span class="up">U</span>
<span class="up">P</span>
<span> </span>
<span> </span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script>
const timeline1 = gsap.timeline()
const timeline2 = gsap.timeline()
timeline1.staggerFromTo('.text-letter-wrapper span', .5, {
opacity: 0,
x: -3
}, {
opacity: 1,
x: 0,
delay: 2,
}, .18)
timeline2.staggerFromTo('.text-name-wrapper span', .5, {
opacity: 0,
x: -3
}, {
opacity: 1,
x: 0,
delay: 2,
}, .18)
</script>
</body>
</html>
smoke2.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>smoke2</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
section {
height: 100vh;
background: #000;
}
section:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #f00, #f00, #0f0, #0ff, #ff0, #0ff);
mix-blend-mode: color;
pointer-events: none;
}
video {
height: 100%;
width: 100%;
display: block;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #fff;
font-size: 3em;
}
h1 span {
opacity: 0;
display: inline-block;
animation: animate 1s linear forwards;
}
@keyframes animate {
0% {
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: rotateY(0deg);
filter: blur(0);
}
}
h1 span:nth-child(1) {
animation-delay: 1s;
}
h1 span:nth-child(2) {
animation-delay: 1.25s;
}
h1 span:nth-child(3) {
animation-delay: 1.5s;
}
h1 span:nth-child(4) {
animation-delay: 1.75s;
}
h1 span:nth-child(5) {
animation-delay: 2s;
}
h1 span:nth-child(6) {
animation-delay: 2.25s;
}
h1 span:nth-child(7) {
animation-delay: 2.5s;
}
h1 span:nth-child(8) {
animation-delay: 2.75s;
}
h1 span:nth-child(9) {
animation-delay: 3s;
}
h1 span:nth-child(10) {
animation-delay: 3.25s;
}
h1 span:nth-child(11) {
animation-delay: 3.5s;
}
</style>
</head>
<body>
<section>
<video src="../../assets/video/smoke.mp4" autoplay muted>
</video>
<h1>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span></span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</h1>
</section>
</body>
</html>
7875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
