我正在尝试使搜索栏具有动画效果。我能够在您单击时使其绘制，当您再次单击时它会返回到原始位置(使用 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});
关于javascript - Greensock-DrawSVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54507509/