那些遇到过的问题

jQuery - Bodymovin JSON 未加载

Kyl*_*ill 13 html javascript jquery bodymovin lottie

在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"),
  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);
});
Run Code Online (Sandbox Code Playgroud) 
.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);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

mam*_*man 7

您似乎使用了旧版本的库，我只是将其替换为它v5.6.10并且运行良好，这是我第一次使用此库，因此我不得不使用选择器强制第二个按钮内的display:blockfor<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");
  }
});
Run Code Online (Sandbox Code Playgroud) 
#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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

The*_*MCA 2

这成功了...\n所以我为每个按钮创建了一个新函数。

\n

研究下面的代码片段（javascript代码）

\n

\r\n
\r\n
const anim1 = lottie.loadAnimation({\n    container: document.getElementById("box"),\n    renderer: "svg",\n    loop: false,\n    autoplay: false,\n    path:\n      "https://cdn.statically.io/gist/moofawsaw/b8abeafe008f8b9ef040199c60a15162/raw/296dde84544ed1b41d5acfa303cca21c3ceee70f/lottie_box.json"\n  });\n  anim1.setSpeed(5);\n  \n  const anim2 = lottie.loadAnimation({\n    container: document.getElementById("slider"),\n    renderer: "svg",\n    loop: false,\n    autoplay: false,\n\n    path:\n      "https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"\n  });\n  anim2.setSpeed(1);\n  \n  const anim3 = lottie.loadAnimation({\n    container: document.getElementById("shuffle"),\n    renderer: "svg",\n    loop: false,\n    autoplay: false,\n    path:\n      "https://cdn.statically.io/gist/moofawsaw/d009a2a791b03fbf37bca60de465e29c/raw/a87e77ea3362ba6f42cf65f86f0edbc37cb9f15b/lottie_shuffle.json"\n  });\n  anim3.setSpeed(12);\n  \n  function toggle($el, anim) {\n    $el.toggleClass("active");\n    const open = $el.hasClass("active");\n    $el\n      .closest(".button")\n      .find(".state")\n      .text(open ? "open" : "closed");\n    const start = open ? 0 : 100;\n    anim.playSegments([start, 100 - start], true);\n  }\n\n  function toggle_for_shuffler($el, anim) {\n    $el.toggleClass("active");\n    const open = $el.hasClass("active");\n    $el\n      .closest(".button")\n      .find(".state")\n      .text(open ? "open" : "closed");\n    const start = open ? 0 : 120;\n    anim.playSegments([start, 120 - start], true);\n  }\n  let slider_direction = 1;\n\n  function toggle_slider($el, anim) {\n    $el.toggleClass("active");\n    const open = $el.hasClass("active");\n    $el\n      .closest(".button")\n      .find(".state")\n      .text(open ? "open" : "closed");\n    const direction = open ? slider_direction : -slider_direction;  \n    // The so-called \xe2\x80\x9cconditional\xe2\x80\x9d or \xe2\x80\x9cquestion mark\xe2\x80\x9d operator lets us do\n    //  that in a shorter and simpler way.\n    // The operator is represented by a question mark ?.\n    //  Sometimes it\xe2\x80\x99s called \xe2\x80\x9cternary\xe2\x80\x9d, because the operator \n    //  has three operands. It is actually the one and only operator\n    //   in JavaScript which has that many.\n    // let result = condition ? value1 : value2;\n    anim.setDirection(direction);\n    anim.play();\n  }\n\n\n\n   $(".lottie--box").on("click", function () {\n    var lottie = $(this).find("#box");\n    toggle(lottie, anim1);\n    if (lottie.hasClass("active") && $("#slider").hasClass("active"))\n      toggle_slider($("#slider"), anim2);\n  });\n  $(".lottie--slider").on("click", function () {\n\n    var lottie = $(this).find("#slider");\n    toggle_slider(lottie, anim2);\n    if (lottie.hasClass("active") && $("#box").hasClass("active"))\n      toggle($("#box"), anim1);\n  });\n  $(".lottie--shuffle").on("click", function () {\n    var lottie = $(this).find("#shuffle");\n    toggle_for_shuffler(lottie, anim3);\n  });\n
Run Code Online (Sandbox Code Playgroud)\r\n
.wrap {\n    height: 32px;\n    width: 32px;\n    border: 2px solid white;\n  }\n  .button {\n    display: flex;\n    color: white;\n    align-items: center;\n    cursor: pointer;\n    height: 46px;\n    max-width: 270px;\n    min-width: 270px;\n    margin-top: 9px;\n    margin-right: 0.5rem;\n    margin-bottom: 6px;\n    border-style: none;\n    border-radius: 6px;\n    background-color: #4aabf0;\n    font-size: 16px;\n  }\n  .lottie--slider {\n    background-color: #756fe4;\n  }\n  .lottie--shuffle {\n    background-color: #fff;\n    border: 2px solid blue;\n  }\n  #slider {\n    width: 200px;\n  }\n  #box path,\n  #slider path {\n    fill: white;\n    stroke: white;\n  }\n  #box svg {\n    min-height: 32px;\n    max-height: 32px;\n  }\n  #slider svg {\n    max-height: 26px;\n  }\n  #shuffle svg {\n    max-height: 62px;\n  }\n  #shuffle svg,\n  #box svg,\n  #slider svg {\n    transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);\n  }\n  #box.active > svg {\n    transform: scale(0.9) translatey(3px) !important;\n    transform-origin: center;\n    transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);\n  }\n  .container {\n    margin: 0px auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    align-content: center;\n  }\n  .state {\n    min-width: 90px;\n    margin-left: 0.9rem;\n  }\n  .lottie--shuffle {\n    color: blue\n  }\n  @keyframes pulse {\n    0% {\n      transform: scale(0.6);\n    }\n  \n    50% {\n      transform: scale(1.1);\n    }\n  \n    100% {\n      transform: scale(1);\n    }\n  }\n
Run Code Online (Sandbox Code Playgroud)\r\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Document</title>\n</head>\n<body>\n    <link rel="stylesheet" href="style.css">\n    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.min.js" integrity="sha256-/56Y/jYu6730zlN8iulnNWn2IcVa4wK/ogwk7n9p2JY=" crossorigin="anonymous"></script>\n<script src="lottie.js"></script>\n<div class="container">\n  <div class="button lottie--box">\n    <div id="box"></div>\n    <div class="state">closed</div>\n  </div>\n  <div class="button lottie--slider">\n    <div id="slider"></div>\n    <div class="state">closed</div>\n  </div>\n  <div class="button lottie--shuffle">\n    <div id="shuffle"></div>\n    <div class="state">closed</div>\n  </div>\n</div>\n<script src="script.js"></script>\n</body>\n\n</html>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

归档时间：

查看次数：

1333 次

最近记录：

5 年，3 月 前
相关归档
HTML5 websockets:最大打开连接数？ 48
如果用户拒绝在firefox中共享地理位置,则函数失败从未被调用 47
如何在<input>元素中创建标签？ 41
使div的一部分透明 31
正则表达式以任何顺序匹配查询中的所有单词 27
防止触发JQuery的多次单击事件 22
Heatmap.js无法渲染 21
从Controller传递Html字符串以查看ASP.Net MVC 21
jquery结合事件功能 20
使用jQuery更改选项的文本 17
难疑归档
JavaScript闭包如何工作？ 7644
检查字典中是否已存在给定键 2683
如何在Git中更改多个提交的作者和提交者名称以及电子邮件？ 2282
什么是复制和交换习语？ 1907
Make .gitignore会忽略除少数文件之外的所有内容 1531
你什么时候应该使用escape而不是encodeURI/encodeURIComponent？ 1371
在关系数据库中存储分层数据有哪些选项？ 1281
Django会扩展吗？ 1101
使用node.js作为简单的Web服务器 1068
Ukkonen的简明英语后缀树算法 1065