Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перевод SMIL анимации в JS (часть вторая) (https://javascript.ru/forum/misc/67395-perevod-smil-animacii-v-js-chast-vtoraya.html)

Black_Star 15.02.2017 18:04
Перевод SMIL анимации в JS (часть вторая)
 
Добрый день уважаемые. Есть такое пример анимации
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

<style>
	#Heart {
	width: 600px;
	border: 1px solid #000;
	cursor: pointer;
}

#Heart .tailMainPath {
  -webkit-animation: tailStroke 800ms linear;
          animation: tailStroke 800ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#Heart .tailMainPathReturn {
  -webkit-animation: tailStrokeReturn 800ms linear;
          animation: tailStrokeReturn 800ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes tailStroke {
  0% {
    stroke-dasharray: 0 149.425;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 149.425 0;
    stroke-dashoffset: 149.425;
  }
}

@keyframes tailStroke {
  0% {
    stroke-dasharray: 0 149.425;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 149.425 0;
    stroke-dashoffset: 149.425;
  }
}

@-webkit-keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 149.425 0;
    stroke-dashoffset: 149.425;
  }
  100% {
    stroke-dasharray: 0 149.425;
    stroke-dashoffset: 0;
  }
}

@keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 149.425 0;
    stroke-dashoffset: 149.425;
  }
  100% {
    stroke-dasharray: 0 149.425;
    stroke-dashoffset: 0;
  }
}
</style>

<body>

	<svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">

	<defs>
		<path id="PathTail_MainPath"   d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
		c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
		<path id="PathTail_MainUp"   d="M295.2,254.3 305.7,241.2"/>
		<path id="PathTail_MainBottom"   d="M295.2,254.3 307.4,258"/>

		<path id="tailMainPath"  d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
		c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>

		<path id="tailMainUp" d="M296.8,252.3 305.7,241.2"/>
		<path id="tailMainBottom" d="M295.2,254.3 307.4,258"/>
		
	</defs>

	<use xlink:href="#PathTail_MainPath" fill="none";   stroke="#000" stroke-width="11"/>
	<use xlink:href="#tailMainPath" fill="none";  stroke="#A50808"  stroke-linecap="round"  stroke-width="9"/>
</svg>

<script>
	window.onload =function(){


		var	myHeart = $("#Heart");
		var current = 0;

		var PathTail_MainPath = $("#PathTail_MainPath");
		var tailMainPath = $("#tailMainPath");

		myHeart.click(function () {

			if (current++ % 2 == 0) {

	 		 //  PathTail_MainPath.toggleClass("tailMainPath, tailMainPathReturn");
			// tailMainPath.toggleClass("tailMainPath, tailMainPathReturn");

			PathTail_MainPath.removeClass("tailMainPathReturn");
			tailMainPath.removeClass("tailMainPathReturn");

			PathTail_MainPath.addClass("tailMainPath");
			tailMainPath.addClass("tailMainPath");

			console.log("one");
		} else {

			PathTail_MainPath.removeClass("tailMainPath");
			tailMainPath.removeClass("tailMainPath");

			PathTail_MainPath.addClass("tailMainPathReturn");
			tailMainPath.addClass("tailMainPathReturn");

	  //       PathTail_MainPath.toggleClass("tailMainPath, tailMainPathReturn");
			// tailMainPath.toggleClass("tailMainPath, tailMainPathReturn");
			console.log("two");
		}
	});

};
</script>
</body>
</html>

Подскажите пожалуйста, таких два момента как решить:
1) Почему на втором действии остается красная точка от пути?Как от этого избавится?
2) Почему у меня не получается переписать JS код под .toggleClass ?(Оно мне сразу добавляет и стирает оба класса)

Black_Star 15.02.2017 21:16
Методом научного тыка, удалось выяснить что .toggleClass() работает адекватно только если один из классов уже имеется. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
 
<style>
    #Heart {
    width: 600px;
    border: 1px solid #000;
    cursor: pointer;
}
 
#Heart .tailMainPath {
  -webkit-animation: tailStroke 500ms linear;
          animation: tailStroke 500ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#Heart .tailMainPathReturn {
  -webkit-animation: tailStrokeReturn 500ms linear 125ms;
          animation: tailStrokeReturn 500ms linear 125ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes tailStroke {
  0% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
}

@keyframes tailStroke {
  0% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
}

@-webkit-keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
  100% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
}

@keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
  100% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
}
</style>
 
<body>
 
    <svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
 
    <defs>
        <path id="PathTail_MainPath" class="tailMainPathReturn"  d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
        c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
 
        <path id="tailMainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
        c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
         
    </defs>
 
    <use xlink:href="#PathTail_MainPath" fill="none";   stroke="#000" stroke-width="11"/>
    <use xlink:href="#tailMainPath" fill="none";  stroke="#A50808"  stroke-linecap="round"  stroke-width="9"/>
</svg>
 
<script>
    window.onload =function(){
 
 
        var myHeart = $("#Heart");
        var current = 0;
 
        var PathTail_MainPath = $("#PathTail_MainPath");
        var tailMainPath = $("#tailMainPath");
 
        myHeart.click(function () {
 
            if (current++ % 2 == 0) {
 			
 			PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
			tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
 
            console.log("one");
        } else {
 
        	PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
			tailMainPath.toggleClass("tailMainPath tailMainPathReturn");

            console.log("two");
        }
    });
 
};
</script>
</body>
</html>

Буду очень благодарен если кто-то подскажет откуда ж берется та фигова точка, и как от нее избавится

Paguo-86PK 16.02.2017 00:17
Кривовато, но точка исчезла
 
Вoт к сожалению, изучил svg не очень хорошо. Но, точка устранилась, хотя и "кривым решением".
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
 
<style>
    #Heart {
    width: 600px;
    border: 1px solid #000;
    cursor: pointer;
}
 
#Heart .tailMainPath {
  -webkit-animation: tailStroke 500ms linear;
          animation: tailStroke 500ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#Heart .tailMainPathReturn {
  -webkit-animation: tailStrokeReturn 500ms linear 125ms;
          animation: tailStrokeReturn 500ms linear 125ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes tailStroke {
  0% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
    stroke-width: 9;
  }
  99% {
    stroke-width: 9;
  }
  100% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
}

@keyframes tailStroke {
  0% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
    stroke-width: 9;
  }
  99% {
    stroke-width: 9;
  }
  100% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
}

@-webkit-keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
    stroke-width: 9;
  }
  99% {
    stroke-width: 9;
  }
  100% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
    stroke-width: 0;
  }
}

@keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
    stroke-width: 9;
  }
  99% {
    stroke-width: 9;
  }
  100% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
    stroke-width: 0;
  }
}
</style>
 
<body>
 
    <svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
 
    <defs>
        <path id="PathTail_MainPath" class="tailMainPathReturn"  d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
        c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
 
        <path id="tailMainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
        c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
         
    </defs>
 
    <use xlink:href="#PathTail_MainPath" fill="none";   stroke="#000" stroke-width="11"/>
    <use xlink:href="#tailMainPath" fill="none";  stroke="#A50808"  stroke-linecap="round"  stroke-width="9"/>
</svg>
 
<script>
        var current = 0;
    window.onload =function(){
 
 
        var myHeart = $("#Heart");
 
        var PathTail_MainPath = $("#PathTail_MainPath");
        var tailMainPath = $("#tailMainPath");
 
        myHeart.click(function () {
 
            if (current++ % 2 == 0) {
 			
 			PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
			tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
 
            console.log("one");
        } else {
 
        	PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
			tailMainPath.toggleClass("tailMainPath tailMainPathReturn");

            console.log("two");
        }
    });
 
};
</script>
</body>
</html>
Точка, по-видимому, берётся из-за обнуления(?) пути(???), что самому интересно.:blink:
P.S.: Пытался устранить точку разными способами…:-?

Black_Star 16.02.2017 10:45
Спасибо, за совет.
Хотя метод действительно диковинный :write:

Black_Star 16.02.2017 16:01
Вообщем если долго посидеть проблему можно решить)
http://codepen.io/BlackStar1991/pen/dNLNrZ
Ещё раз спасибо :thanks:

рони 16.02.2017 17:13
Black_Star,
:)


Часовой пояс GMT +3, время: 21:37.