javascript - 绿 socks -DrawSVG

我正在尝试使搜索栏动画化。我能够使它在您单击时绘制，并在您再次单击时返回到原始位置（使用greensock-drawSVG）。

我希望能够在不刷新页面的情况下再次单击，并使一切正常运行。到目前为止，只有drawSVG是唯一不能恢复活动的东西。

我也不确定为什么drawSVG属性在这里不起作用，它在我自己的计算机上确实起作用。（I am attaching a gif of the animation from my computer）

var $SearchBar = $('#SearchBar');
var $searchIcon = $('#searchIcon');
var $drawSearch = $ ('#drawSearch');
var $leftX = $('#leftX');
var $rightX = $('#rightX');
var $changeColor = $('#changeColor');
//this is my variable for when to draw the search bar
var searchVisible = false;
var $black = ('#000');
TweenMax.set($SearchBar, {stroke:'#000'});
TweenMax.set([$searchIcon, $leftX, $rightX, $changeColor],{transformOrigin: '50% 50%'});
TweenMax.set([$drawSearch, $leftX, $rightX, $changeColor], {alpha:0});
TweenMax.set([$leftX], {rotation:-45, scale:0.75});
TweenMax.set([$rightX], {rotation:45, scale:0.75});
searchVisible = false;

//funciton to click the searchIcon
function clickSearch(){
  console.log("click");
      if (searchVisible === true) {
        searchVisible = false;
        console.log("Yes i see the search draw");
        TweenMax.to($changeColor, 2, {alpha:0,scale:0});
        TweenMax.to([$leftX],0.25, {rotation:-45});
        TweenMax.to([$rightX],0.25, {rotation:45});
        TweenMax.to([$rightX,$leftX],0.25, {alpha:0,delay:0.25});
        TweenMax.to($drawSearch,1,{drawSVG: 0, delay:0.5});
        TweenMax.to($searchIcon, 0.5, {rotation: 0, delay:1.5});


      }
      else {
        console.log("No i dont see the searchdraw");
        searchVisible = true;
        TweenMax.to($changeColor, 2, {alpha:1,scale:100});
        TweenMax.to($searchIcon, 0.25, {rotation: -20});
        TweenMax.to($searchIcon, 0.25, {rotation: 88, delay:0.25});
        TweenMax.set([$drawSearch],{alpha:1});
        TweenMax.from($drawSearch,0.75,{drawSVG:0, delay:0.50});
        TweenMax.to([$leftX, $rightX], 0.25,{alpha:1,delay:1});
        TweenMax.to([$leftX],0.25, {rotation:0, delay:1});
        TweenMax.to([$rightX],0.25, {rotation:0,delay:1});
      }


}
//listener for clickSearch function
$SearchBar.on("click", clickSearch);

section {
  background-color: #900C3F;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: pointer; }
  section svg {
    height: 100vh;
    width: 100vw; }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <title>SCSS template</title>
</head>

<body>

  <section>
    <svg id="SearchBar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <style>
        .st0 {
          fill: #41718e;
          stroke: #900C3F;
        }

        .st1 {
          stroke-linecap: round
        }

        .st1,
        .st2 {
          fill: none;
          stroke: #fff;
          stroke-width: 8;
          stroke-miterlimit: 10
        }
      </style>
      <circle id="changeColor" class="st0" cx="390.24" cy="178.54" r="24.04" />
      <g id="searchIcon">
        <path class="st1" d="M409.27 199.36l21.05 21.21" />
        <circle class="st2" cx="390.38" cy="178.62" r="24.72" />
      </g>
      <path class="st1" d="M365.47 220.65l-325.13 1.56.32-66.54 289.96-1.16" id="drawSearch" />
      <path id="leftX" class="st1" d="M58.31 175.9l24.62 24.61" />
      <path id="rightX" class="st1" d="M82.49 175.77l-24.61 24.62" />
    </svg>
  </section>


  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Greensock -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  <!-- Greensock Draw SVG -->
  <script src="http://dugraphicdesign.com/winterWeb3/DrawSVGPlugin.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/ScrollToPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/TextPlugin.min.js"></script>
  <script src="js/scripts.js"></script>
</body>

</html>

最佳答案

DrawSVGPlugin.js插件未加载。没有此插件，DrawSVG功能将无法使用。

使用https加载的页面不会使用http加载javascript。这被称为"mixed content"，并且出于安全原因被浏览器阻止。

至于动画，我认为这是因为您尝试使用.from()而不正确初始化元素的状态。

与drawSVG一样，不要使用整数作为"100%"属性，而应使用百分比。当您使用整数时，这些整数将被解释为原始长度，这可能需要一些时间才能弄清楚。使用百分比时，DrawSVG会为您解决。

无需弄乱先前的状态，而是根据需要为"0%"或"100%"设置动画。

所以用

TweenMax.set([$drawSearch], {drawSVG:"0%"});

然后使用

TweenMax.to($drawSearch, 1, {drawSVG:"0%", delay:0.5});

和

TweenMax.to($drawSearch, 0.75, {drawSVG:"100%", delay:0.50});

如https://repl.it/@ouroborus/GrubbyFuzzyDatalog中所示