Форум

Black_Star · #1 (**permalink**) 14.02.2017, 14:06

Добрый день уважаемые, подскажите пожалуйста как перевести параметры из 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 ? Посоветуйте что то дельное

рони · #2 (**permalink**) 14.02.2017, 15:31

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

Black_Star · #3 (**permalink**) 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>

рони · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 14.02.2017, 17:08

Спасибо, рони

А есть ли возможность полностью перейти от 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>

рони · #7 (**permalink**) 14.02.2017, 17:20

Сообщение от Black_Star

А есть ли возможность полностью перейти от SMIL к JS ?

смотрите как устроены svg плагины и ищите обучающую документацию по анимации svg

рони · #8 (**permalink**) 14.02.2017, 17:23

Сообщение от Black_Star

"],["0",to="242.5"]];

опечатка у меня была

Dilettante_Pro · #9 (**permalink**) 14.02.2017, 17:58

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

Black_Star · #10 (**permalink**) 14.02.2017, 18:25

Спасибо

Форум

Справочник

Discord чат

Курсы javascript