个人中心
gpt4 book ai didi

javascript - Greensock-DrawSVG

转载 作者：行者123 更新时间：2023-11-28 14:27:22 31 4
gpt4 key购买 nike

我正在尝试使搜索栏具有动画效果。我能够在您单击时使其绘制，当您再次单击时它会返回到原始位置(使用 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所示

关于javascript - Greensock-DrawSVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54507509/

31 4 0
文章推荐： html - 如何让 CSS 工具提示在 Shiny 数据表中工作？
文章推荐： css - 如何与切换按钮在同一行显示导航元素？
文章推荐： html - 位置 : absolute;
文章推荐： ios - 如何使 UIButton 始终位于加载的 subview Controller 之上？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com