动画每节播放一次

编程问答 2022-08-11

问题描述

我目前正在使用gsap制作动画。我正在页面上实现它，但我只希望每个会话播放一次。我原本打算使用Cookie或会话存储，但尚未使用动画之类的工具。我还搜索了网络，却没有发现任何相关信息。如何在JavaScript中实现呢？

let clicker = document.getElementById('clicker');


var ballMotion = gsap.timeline();

ballMotion
.from(".logo",{duration: 3,bottom: '-170vh',ease: "power2.inOut"},)
.from(".ball",bottom: '-167vh',ease: "power2.inOut",onComplete: function() {
  clicker.addEventListener("click",resumeTL);
}},"-=3")
.to('.flex-button',{opacity:1},)
.to('.form-wrapper',)

.addPause()

.to('.flex-button',{duration: 0.1,opacity:0,zIndex:-100},zIndex:-99},)
.to(".ball",{duration: 1,borderRadius: '50%',transform:'scale(100)',ease: "circ.inOut",onComplete: function(){
    let loadWrapper = document.querySelector('.load-wrapper');
    loadWrapper.classList.add('load-wrapper-finished');
}},"+=0",);



function resumeTL() {
  clicker.removeEventListener("click",resumeTL);
  $(".logo").explode({"minWidth":3,"maxWidth":10,"radius":700,"minRadius":10,"release":true,"fadeTime":10,"recycle":false,"recycleDelay":500,"explodeTime":1000,"round":false,"minAngle":0,"maxAngle":360,"gravity":2,"grounddistance":1500});
  ballMotion.resume();
}
<!DOCTYPE html>
<html>
    <head>
        <Meta charset="UTF-8">
        <Meta name="veiwport" content="width=device-width,initial-scale="1.0">
        <link rel="stylesheet" type="text/css" href="main/testball.css">
    </head>
    <body>
        <div class="load-wrapper">    
            <img src="https://i.pinimg.com/originals/99/03/03/9903039cbf847c29269ed538ef5ebb33.jpg" alt="logo" class="logo">
            <div class="ball">
            </div>
            <div class="flex-button">
                <button id="clicker">Enter</button>
            </div>
            <div class="form-wrapper">
                <form>
                        <input type="name" id="name" placeholder="Name..." name="name">
                        <input type="email" id="email" placeholder="Email..." name="email">
                        <button type="submit" id="submit-button">Submit</button>
                </form>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
        <script src="test/testball.js"></script>
        
        <script src="test/jquery.imgexplode.js"></script> 
    </body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gsapjavascriptsessionsession-cookies