应该将slider和shuffle抽奖动画从0 运行到100，然后再切换到0；像box动画。
不过，您可以看到slider动画在最后一帧中消失了，shuffle动画似乎在动画停止之前只是其中的一部分。
如何让slider和shuffle动画以与box相同的方式运行，它们从0-> 100开始运行，然后再次返回？
请注意，slider和box还有其他代码，一次只能有一个处于打开状态。
const anim1 = lottie.loadAnimation({
container: document.getElementById("box"),renderer: "svg",loop: false,autoplay: false,path:
"https://cdn.statically.io/gist/moofawsaw/b8abeafe008f8b9ef040199c60a15162/raw/296dde84544ed1b41d5acfa303cca21c3ceee70f/lottie_box.json"
});
anim1.setSpeed(5);
const anim2 = lottie.loadAnimation({
container: document.getElementById("slider"),path:
"https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"
});
anim2.setSpeed(16);
const anim3 = lottie.loadAnimation({
container: document.getElementById("shuffle"),path:
"https://cdn.statically.io/gist/moofawsaw/d009a2a791b03fbf37bca60de465e29c/raw/a87e77ea3362ba6f42cf65f86f0edbc37cb9f15b/lottie_shuffle.json"
});
anim3.setSpeed(12);
function toggle($el,anim) {
$el.toggleclass("active");
const open = $el.hasClass("active");
$el
.closest(".button")
.find(".state")
.text(open ? "open" : "closed");
const start = open ? 0 : 100;
anim.playSegments([start,100 - start],true);
}
$(".lottie--box").on("click",function () {
var lottie = $(this).find("#box");
toggle(lottie,anim1);
if (lottie.hasClass("active") && $("#slider").hasClass("active"))
toggle($("#slider"),anim2);
});
$(".lottie--slider").on("click",function () {
var lottie = $(this).find("#slider");
toggle(lottie,anim2);
if (lottie.hasClass("active") && $("#box").hasClass("active"))
toggle($("#box"),anim1);
});
$(".lottie--shuffle").on("click",function () {
var lottie = $(this).find("#shuffle");
toggle(lottie,anim3);
});.wrap {
height: 32px;
width: 32px;
border: 2px solid white;
}
.button {
display: flex;
color: white;
align-items: center;
cursor: pointer;
height: 46px;
max-width: 270px;
min-width: 270px;
margin-top: 9px;
margin-right: 0.5rem;
margin-bottom: 6px;
border-style: none;
border-radius: 6px;
background-color: #4aabf0;
font-size: 16px;
}
.lottie--slider {
background-color: #756fe4;
}
.lottie--shuffle {
background-color: #fff;
border: 2px solid blue;
}
#slider {
width: 200px;
}
#box path,#slider path {
fill: white;
stroke: white;
}
#box svg {
min-height: 32px;
max-height: 32px;
}
#slider svg {
max-height: 26px;
}
#shuffle svg {
max-height: 62px;
}
#shuffle svg,#box svg,#slider svg {
transition: 0.2s cubic-bezier(0.45,0.55,1);
}
#box.active > svg {
transform: scale(0.9) translatey(3px) !important;
transform-origin: center;
transition: 0.2s cubic-bezier(0.45,1);
}
.container {
margin: 0px auto;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.state {
min-width: 90px;
margin-left: 0.9rem;
}
.lottie--shuffle {
color: blue
}
@keyframes pulse {
0% {
transform: scale(0.6);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie.min.js"></script>
<div class="container">
<div class="button lottie--box">
<div id="box"></div>
<div class="state">closed</div>
</div>
<div class="button lottie--slider">
<div id="slider"></div>
<div class="state">closed</div>
</div>
<div class="button lottie--shuffle">
<div id="shuffle"></div>
<div class="state">closed</div>
</div>
</div>