本文介绍了如何在HTML和JavaScript中使用GSAP库的timeline方法创建动画，展示了power1.out和power1.in两种不同的缓动效果，并提供了暂停动画的交互功能。
运行示例查看gsap.timeline方法使用，及power1.out/power1.in效果
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<style>
#box {
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 选取元素
var box = document.getElementById("box");
// 设置初始样式
// gsap.set(box, { x: -100 });
// 定义动画
var tl = gsap.timeline({ repeat: -1 });
tl.to(box, { x: 100, duration: 1, ease: "power1.out" })
.to(box, { y: 100, duration: 1, ease: "power1.in" })
.to(box, { x: 0, duration: 1, ease: "power1.out" })
.to(box, { y: 0, duration: 1, ease: "power1.in" });
// 暂停动画
function toggleAnimation() {
tl.paused(!tl.paused());
}
// 双击屏幕暂停动画
document.addEventListener("dblclick", toggleAnimation);
</script>
</body>
</html>
原网站 https://www.ab62.cn/article/1690252477473415149.html
扫一扫
6677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
