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

Black_Star 14.02.2017 14:06
Перевод SMIL анимации в JS
 
Добрый день уважаемые, подскажите пожалуйста как перевести параметры из SMIL анимации в разряд JS анимации. Приведу пример:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<svg width="300" height="200">
		<defs>
			<path id="base" d="M150 100m0-50a100 50 0 0 0 0 100a100 50 0 0 0 0-100z" fill="none">
				<animate attributeName="stroke-dasharray" from="0 485" to="485 0" begin="0s" dur="2s"/>
				<animate attributeName="stroke-dashoffset" from="0" to="242.5" begin="0s" dur="2s"/>
			</path>
		</defs>
		<use xlink:href="#base" stroke="orange" stroke-width="14"/>
		<use xlink:href="#base" stroke="yellow" stroke-width="10"/>
	</svg>
</body>
</html>

Необходимо что б по непарному клацанью мыши кольцо отрисовывалось, а при парном анимация уходила в обратном направлении (в SMIL анимации это просто поменять местами параметры from и to) как данное чудо организовать на JS ? Посоветуйте что то дельное :victory:

рони 14.02.2017 15:31
Black_Star,
код обратной анимации можно?

Black_Star 14.02.2017 15:58
Конечно, вот 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg width="300" height="200">
        <defs>
            <path id="base" d="M150 100m0-50a100 50 0 0 0 0 100a100 50 0 0 0 0-100z" fill="none">
                <animate attributeName="stroke-dasharray" from="485 0" to="0 485" begin="0s" dur="2s"/>
                <animate attributeName="stroke-dashoffset" from="242.5" to="0" begin="0s" dur="2s"/>
            </path>
        </defs>
        <use xlink:href="#base" stroke="orange" stroke-width="14"/>
        <use xlink:href="#base" stroke="yellow" stroke-width="10"/>
    </svg>
</body>
</html>

рони 14.02.2017 16:42
Black_Star,
как вариант, но предполагаю что js для этого не нужен
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
var f = [["0 485","485 0"],["0","242.5"]];

$('svg').click(function() {
  $('animate',this).each(function(indx, el){
      var k = f[indx].reverse();
      $(el).attr({from : k[0], to : k[1]})

      });
})
});
  </script>
</head>

<body>
 <svg width="300" height="200" id="startButton">
    <defs>
      <path id="base" d="M150 100m0-50a100 50 0 0 0 0 100a100 50 0 0 0 0-100z" fill="none">
        <animate attributeName="stroke-dasharray" from="0 485" to="485 0" begin="0s;startButton.click" dur="2s"/>
        <animate attributeName="stroke-dashoffset" from="0" to="242.5" begin="0s;startButton.click" dur="2s"/>
      </path>
    </defs>
    <use xlink:href="#base" stroke="orange" stroke-width="14"/>
    <use xlink:href="#base" stroke="yellow" stroke-width="10"/>
  </svg>

</body>
</html>

Paguo-86PK 14.02.2017 16:49 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    :hover {
        animation-name: anim1a;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <defs>
	<path id='base' d='M150 100m0-50a100 50 0 0 0 0 100a100 50 0 0 0 0-100z' fill='none'>
		<animate attributeName='stroke-dasharray' from='485 10' to='10 485' begin='dblclick + anim2.end' dur='2s' fill='freeze' restart='whenNotActive' id='anim1' />
		<animate attributeName='stroke-dasharray' from='10 485' to='485 10' begin='0s; (dblclick + anim1.end)' dur='2s' fill='freeze' restart='whenNotActive' id='anim2' />
		<animate attributeName='stroke-dashoffset' from='242.5' to='0' begin='anim1.begin' dur='2s' fill='freeze' />
		<animate attributeName='stroke-dashoffset' from='0' to='242.5' begin='anim2.begin' dur='2s' fill='freeze' />
	</path>
        </defs>
        <use xlink:href="#base" stroke="orange" stroke-width="14"/>
        <use xlink:href="#base" stroke="yellow" stroke-width="10"/>
    </svg>
</body>
</html>

Black_Star 14.02.2017 17:08
Спасибо, рони :thanks:
А есть ли возможность полностью перейти от SMIL к JS ? 
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
var f = [["0 485","485 0"],["0",to="242.5"]];
 
$('svg').click(function() {
  $('animate',this).each(function(indx, el){
      var k = f[indx].reverse();
      $(el).attr({from : k[0], to : k[1]})
 
      });
})
});
  </script>
</head>
 
<body>
 <svg width="300" height="200" id="startButton">
    <defs>
      <path id="base" d="M150 100m0-50a100 50 0 0 0 0 100a100 50 0 0 0 0-100z" fill="none">
        <animate attributeName="stroke-dasharray" from="0 485" to="485 0" begin="0s;startButton.click" fill="freeze" dur="500ms"/>
        <animate attributeName="stroke-dashoffset" from="0" to="242.5" begin="0s;startButton.click" fill="freeze" dur="500ms"/>
      </path>
    </defs>
    <use xlink:href="#base" stroke="orange" stroke-width="14"/>
    <use xlink:href="#base" stroke="yellow" stroke-width="10"/>
  </svg>
</body>
</html>

рони 14.02.2017 17:20
Цитата:
Сообщение от Black_Star
А есть ли возможность полностью перейти от SMIL к JS ?
смотрите как устроены svg плагины и ищите обучающую документацию по анимации svg

рони 14.02.2017 17:23
Цитата:
Сообщение от Black_Star
"],["0",to="242.5"]];
опечатка у меня была

Dilettante_Pro 14.02.2017 17:58
Black_Star,
Библиотека http://snapsvg.io/
и примеры использования http://codepen.io/collection/edpyJ/

Black_Star 14.02.2017 18:25
Спасибо :thanks:


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