如何解决setPin 功能不起作用——滚动魔术和补间
基本上，我正在尝试创建一个动画，其中多个气泡（从不同位置开始但最终具有相同的动画/运动）移动。但是，无论出于何种原因，动画 div 都没有被固定。我也没有时间线、滚动魔法等方面的经验，所以我也想知道是否可以将多个时间线添加到一个场景中。请分享代码，以最简单的方式将动画 div 固定到屏幕上，直到所有气泡的动画完成。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
header,footer {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Montserrat";
}
header h1 {
font-size: 60px;
}
.animation {
height: 100vh;
background-image: linear-gradient(to top,#209cff 0%,#68e0cf 100%);
position: relative;
overflow: hidden;
}
.bubble {
height: 100px;
content: url("bubble.png");
position: absolute;
/* top: 5%;
left: 5%; */
}
</style>
</head>
<body>
<header>
<h1>Hello World!</h1>
</header>
<div class="animation">
<img class="bubble" id="bubble1" alt="bubble">
<img class="bubble" id="bubble2" alt="bubble">
<img class="bubble" id="bubble3" alt="bubble">
<img class="bubble" id="bubble4" alt="bubble">
<img class="bubble" id="bubble5" alt="bubble">
</div>
<footer>
<h4>End!</h4>
</footer>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addindicators.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js" integrity="sha512-7nSmgdAZ7oPdT5aa2a4YauI8Y1xgaj6zZtQo9+EIEhpcNEiRHPAtyTKYckBQ0lmg1xQKrdWweHBcN/D0tdnvCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js" integrity="sha512-pvDW4tehKKsohH97164HwKwRGFpzayEFWTVbk8HuUoLIQ7Jp+WLN5XYokVuoCj2aT6dy8ihbW8SRTG1k0W4mSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineLite.min.js" integrity="sha512-tSIDeirKC6suYILHqqPuZH3s0MvD4a5vCHXhBIcdmq4gQXZ2IB3fEYA5x2f3D2p/CbSqzKEvuTEVbS5VZ2u+ew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/Cssplugin.min.js" integrity="sha512-ocsFo48WU8Xq6Y1Lwi7psXRAujG9E4TKNR4q1DbrKzaaxOMTEoao/a+mdob+cYzY4lwbyxvqjkp/ZA1/MNlfsg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/BezierPlugin.min.js" integrity="sha512-plyexAULVlTExvDn2yUZFJV9F8q+53MC/GpU9dEuNGXmrrI3J8Rcffjvxg3OOBALBvF+UILPLIBEoCeF2maqTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const controller = new ScrollMagic.Controller();
const bubbles = document.getElementsByClassName("bubble");
for (let i = 0; i < bubbles.length; i++) {
const id = "bubble"+(i+1);
const bubble = document.getElementById(id);
const timeline = new TimelineLite();
const flightPath = {
curviness: 1.25,// autoRotate: true,values: getAnimationValues(i*300,i*100,12)
};
const scene = new ScrollMagic.Scene({
triggerElement: ".animation",duration: 1000,triggerHook: 0
})
.setTween(timeline)
.setPin(".animation")
.addindicators()
.addTo(controller);
let t = (i*300) + "px";
let t2 = (i*100) + "px";
bubble.style.left = t;
bubble.style.top = t2;
timeline.add(
TweenLite.to("#"+id,10,{
bezier: flightPath,ease: Power1.easeInOut,},"animation")
);
}
function getAnimationValues(startX,startY,loop) {
let temp = new Array();
for (let i = 0; i < loop; i++) {
x = (i % 2 == 0) ? startX : (startX + 100);
y = i*100 + startY;
temp.push({x: x,y: y});
}
return temp;
}
</script>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
