jQuery - Bodymovin JSON 未加载
jQuery - Bodymovin JSON not loading
slider 和 shuffle lottie 动画应该 运行 从 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"),
renderer: "svg",
loop: false,
autoplay: false,
path:
"https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"
});
anim2.setSpeed(16);
const anim3 = lottie.loadAnimation({
container: document.getElementById("shuffle"),
renderer: "svg",
loop: false,
autoplay: false,
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, 0.55, 1);
}
#box.active > svg {
transform: scale(0.9) translatey(3px) !important;
transform-origin: center;
transition: 0.2s cubic-bezier(0.45, 0, 0.55, 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>
你好像用的是老版本的库，我直接换成v5.6.10就可以了，第一次用这个库，所以不得不用选择器强制第二个按钮内的 display:block for <g> 标签，以确保我们有图标动画（我确信有更好的方法让它适用于第二个图标）。
注意：我将bodymovin.loadAnimation更改为lottie.loadAnimation，这是一个工作片段：
var animData1 = {
container: document.getElementById("toggle"),
renderer: "svg",
loop: false,
autoplay: false,
path:
"https://cdn.statically.io/gist/moofawsaw/b8abeafe008f8b9ef040199c60a15162/raw/296dde84544ed1b41d5acfa303cca21c3ceee70f/lottie_box.json",
};
var animData2 = {
container: document.getElementById("slider"),
renderer: "svg",
loop: false,
autoplay: false, path:"https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json",
};
var anim1 = lottie.loadAnimation(animData1);
var anim2 = lottie.loadAnimation(animData2);
$("#toggle").on("click", function () {
anim1.setSpeed(5);
if ($("#toggle").hasClass("active")) {
anim1.playSegments([100, 0], true);
$("#toggle").removeClass("active");
} else {
anim1.playSegments([0, 100], true);
$("#toggle").addClass("active");
}
});
$("#slider").on("click", function () {
anim2.setSpeed(5);
if ($("#slider").hasClass("active")) {
anim2.playSegments([100, 0], true);
$("#slider").removeClass("active");
} else {
anim2.playSegments([0, 100], true);
$("#slider").addClass("active");
}
});
#toggle,
#slider {
display: flex;
align-items: center;
cursor: pointer;
height: 46px;
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;
}
g[clip-path="url(#__lottie_element_48)"] g {
display: block !important;
}
#toggle path,
#slider path {
fill: white;
stroke: white;
}
#toggle svg,
#slider svg {
max-height: 32px;
transition: 100ms;
}
#toggle.active>svg {
transform: scale(0.9) translate(0px, 2px);
transform-origin: center;
transition: 0.2s;
}
.container {
margin: 0px auto;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="toggle"></div>
<div id="slider"></div>
</div>
只需更改此行
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>
只是您的 json 不适用于旧版本的库。
var animData1 = {
container: document.getElementById("toggle"),
renderer: "svg",
loop: false,
autoplay: false,
path: "https://cdn.statically.io/gist/moofawsaw/b8abeafe008f8b9ef040199c60a15162/raw/296dde84544ed1b41d5acfa303cca21c3ceee70f/lottie_box.json"
};
var animData2 = {
container: document.getElementById("slider"),
renderer: "svg",
loop: false,
autoplay: false,
path: "https://cdn.statically.io/gist/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"
};
var anim1;
var anim2;
anim1 = bodymovin.loadAnimation(animData1);
anim2 = bodymovin.loadAnimation(animData2);
$("#toggle").on("click", function() {
anim1.setSpeed(5);
if ($("#toggle").hasClass("active")) {
anim1.playSegments([100, 0], true);
$("#toggle").removeClass("active");
} else {
anim1.playSegments([0, 100], true);
$("#toggle").addClass("active");
}
});
$("#slider").on("click", function() {
anim2.setSpeed(5);
if ($("#slider").hasClass("active")) {
anim2.playSegments([100, 0], true);
$("#slider").removeClass("active");
} else {
anim2.playSegments([0, 100], true);
$("#slider").addClass("active");
}
});
g[clip-path="url(#__lottie_element_48)"] g {
display: block !important;
}
#toggle,
#slider {
display: flex;
align-items: center;
cursor: pointer;
height: 46px;
max-width: 270px;
margin-top: 9px;
margin-right: 0.5rem;
margin-bottom: 6px;
border-style: none;
border-radius: 6px;
background-color: #4aabf0;
font-size: 16px;
}
#toggle path,
#slider path {
fill: white;
stroke: white;
}
#toggle svg,
#slider svg {
max-height: 32px;
transition: 100ms;
}
#toggle.active>svg {
transform: scale(0.9) translate(0px, 2px);
transform-origin: center;
transition: 0.2s;
}
.container {
margin: 0px auto;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="toggle"></div>
<div id="slider" class='settings-V2'></div>
</div>
这成功了...
所以我为每个按钮创建了一个新功能。
研究下面的代码片段（javascript 代码）
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"),
renderer: "svg",
loop: false,
autoplay: false,
path:
"https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"
});
anim2.setSpeed(1);
const anim3 = lottie.loadAnimation({
container: document.getElementById("shuffle"),
renderer: "svg",
loop: false,
autoplay: false,
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);
}
function toggle_for_shuffler($el, anim) {
$el.toggleClass("active");
const open = $el.hasClass("active");
$el
.closest(".button")
.find(".state")
.text(open ? "open" : "closed");
const start = open ? 0 : 120;
anim.playSegments([start, 120 - start], true);
}
let slider_direction = 1;
function toggle_slider($el, anim) {
$el.toggleClass("active");
const open = $el.hasClass("active");
$el
.closest(".button")
.find(".state")
.text(open ? "open" : "closed");
const direction = open ? slider_direction : -slider_direction;
// The so-called “conditional” or “question mark” operator lets us do
// that in a shorter and simpler way.
// The operator is represented by a question mark ?.
// Sometimes it’s called “ternary”, because the operator
// has three operands. It is actually the one and only operator
// in JavaScript which has that many.
// let result = condition ? value1 : value2;
anim.setDirection(direction);
anim.play();
}
$(".lottie--box").on("click", function () {
var lottie = $(this).find("#box");
toggle(lottie, anim1);
if (lottie.hasClass("active") && $("#slider").hasClass("active"))
toggle_slider($("#slider"), anim2);
});
$(".lottie--slider").on("click", function () {
var lottie = $(this).find("#slider");
toggle_slider(lottie, anim2);
if (lottie.hasClass("active") && $("#box").hasClass("active"))
toggle($("#box"), anim1);
});
$(".lottie--shuffle").on("click", function () {
var lottie = $(this).find("#shuffle");
toggle_for_shuffler(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, 0.55, 1);
}
#box.active > svg {
transform: scale(0.9) translatey(3px) !important;
transform-origin: center;
transition: 0.2s cubic-bezier(0.45, 0, 0.55, 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);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="style.css">
<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.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>
<script src="lottie.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>
<script src="script.js"></script>
</body>
</html>
slider 和 shuffle lottie 动画应该 运行 从 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"),
renderer: "svg",
loop: false,
autoplay: false,
path:
"https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"
});
anim2.setSpeed(16);
const anim3 = lottie.loadAnimation({
container: document.getElementById("shuffle"),
renderer: "svg",
loop: false,
autoplay: false,
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, 0.55, 1);
}
#box.active > svg {
transform: scale(0.9) translatey(3px) !important;
transform-origin: center;
transition: 0.2s cubic-bezier(0.45, 0, 0.55, 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>
你好像用的是老版本的库，我直接换成v5.6.10就可以了，第一次用这个库，所以不得不用选择器强制第二个按钮内的 display:block for <g> 标签，以确保我们有图标动画（我确信有更好的方法让它适用于第二个图标）。
注意：我将bodymovin.loadAnimation更改为lottie.loadAnimation，这是一个工作片段：
var animData1 = {
container: document.getElementById("toggle"),
renderer: "svg",
loop: false,
autoplay: false,
path:
"https://cdn.statically.io/gist/moofawsaw/b8abeafe008f8b9ef040199c60a15162/raw/296dde84544ed1b41d5acfa303cca21c3ceee70f/lottie_box.json",
};
var animData2 = {
container: document.getElementById("slider"),
renderer: "svg",
loop: false,
autoplay: false, path:"https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json",
};
var anim1 = lottie.loadAnimation(animData1);
var anim2 = lottie.loadAnimation(animData2);
$("#toggle").on("click", function () {
anim1.setSpeed(5);
if ($("#toggle").hasClass("active")) {
anim1.playSegments([100, 0], true);
$("#toggle").removeClass("active");
} else {
anim1.playSegments([0, 100], true);
$("#toggle").addClass("active");
}
});
$("#slider").on("click", function () {
anim2.setSpeed(5);
if ($("#slider").hasClass("active")) {
anim2.playSegments([100, 0], true);
$("#slider").removeClass("active");
} else {
anim2.playSegments([0, 100], true);
$("#slider").addClass("active");
}
});
#toggle,
#slider {
display: flex;
align-items: center;
cursor: pointer;
height: 46px;
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;
}
g[clip-path="url(#__lottie_element_48)"] g {
display: block !important;
}
#toggle path,
#slider path {
fill: white;
stroke: white;
}
#toggle svg,
#slider svg {
max-height: 32px;
transition: 100ms;
}
#toggle.active>svg {
transform: scale(0.9) translate(0px, 2px);
transform-origin: center;
transition: 0.2s;
}
.container {
margin: 0px auto;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="toggle"></div>
<div id="slider"></div>
</div>
只需更改此行
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>
只是您的 json 不适用于旧版本的库。
var animData1 = {
container: document.getElementById("toggle"),
renderer: "svg",
loop: false,
autoplay: false,
path: "https://cdn.statically.io/gist/moofawsaw/b8abeafe008f8b9ef040199c60a15162/raw/296dde84544ed1b41d5acfa303cca21c3ceee70f/lottie_box.json"
};
var animData2 = {
container: document.getElementById("slider"),
renderer: "svg",
loop: false,
autoplay: false,
path: "https://cdn.statically.io/gist/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"
};
var anim1;
var anim2;
anim1 = bodymovin.loadAnimation(animData1);
anim2 = bodymovin.loadAnimation(animData2);
$("#toggle").on("click", function() {
anim1.setSpeed(5);
if ($("#toggle").hasClass("active")) {
anim1.playSegments([100, 0], true);
$("#toggle").removeClass("active");
} else {
anim1.playSegments([0, 100], true);
$("#toggle").addClass("active");
}
});
$("#slider").on("click", function() {
anim2.setSpeed(5);
if ($("#slider").hasClass("active")) {
anim2.playSegments([100, 0], true);
$("#slider").removeClass("active");
} else {
anim2.playSegments([0, 100], true);
$("#slider").addClass("active");
}
});
g[clip-path="url(#__lottie_element_48)"] g {
display: block !important;
}
#toggle,
#slider {
display: flex;
align-items: center;
cursor: pointer;
height: 46px;
max-width: 270px;
margin-top: 9px;
margin-right: 0.5rem;
margin-bottom: 6px;
border-style: none;
border-radius: 6px;
background-color: #4aabf0;
font-size: 16px;
}
#toggle path,
#slider path {
fill: white;
stroke: white;
}
#toggle svg,
#slider svg {
max-height: 32px;
transition: 100ms;
}
#toggle.active>svg {
transform: scale(0.9) translate(0px, 2px);
transform-origin: center;
transition: 0.2s;
}
.container {
margin: 0px auto;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="toggle"></div>
<div id="slider" class='settings-V2'></div>
</div>
这成功了... 所以我为每个按钮创建了一个新功能。
研究下面的代码片段（javascript 代码）
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"),
renderer: "svg",
loop: false,
autoplay: false,
path:
"https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"
});
anim2.setSpeed(1);
const anim3 = lottie.loadAnimation({
container: document.getElementById("shuffle"),
renderer: "svg",
loop: false,
autoplay: false,
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);
}
function toggle_for_shuffler($el, anim) {
$el.toggleClass("active");
const open = $el.hasClass("active");
$el
.closest(".button")
.find(".state")
.text(open ? "open" : "closed");
const start = open ? 0 : 120;
anim.playSegments([start, 120 - start], true);
}
let slider_direction = 1;
function toggle_slider($el, anim) {
$el.toggleClass("active");
const open = $el.hasClass("active");
$el
.closest(".button")
.find(".state")
.text(open ? "open" : "closed");
const direction = open ? slider_direction : -slider_direction;
// The so-called “conditional” or “question mark” operator lets us do
// that in a shorter and simpler way.
// The operator is represented by a question mark ?.
// Sometimes it’s called “ternary”, because the operator
// has three operands. It is actually the one and only operator
// in JavaScript which has that many.
// let result = condition ? value1 : value2;
anim.setDirection(direction);
anim.play();
}
$(".lottie--box").on("click", function () {
var lottie = $(this).find("#box");
toggle(lottie, anim1);
if (lottie.hasClass("active") && $("#slider").hasClass("active"))
toggle_slider($("#slider"), anim2);
});
$(".lottie--slider").on("click", function () {
var lottie = $(this).find("#slider");
toggle_slider(lottie, anim2);
if (lottie.hasClass("active") && $("#box").hasClass("active"))
toggle($("#box"), anim1);
});
$(".lottie--shuffle").on("click", function () {
var lottie = $(this).find("#shuffle");
toggle_for_shuffler(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, 0.55, 1);
}
#box.active > svg {
transform: scale(0.9) translatey(3px) !important;
transform-origin: center;
transition: 0.2s cubic-bezier(0.45, 0, 0.55, 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);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="style.css">
<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.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>
<script src="lottie.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>
<script src="script.js"></script>
</body>
</html>