Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2017, 14:06
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Перевод 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 ? Посоветуйте что то дельное
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2017, 15:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Black_Star,
код обратной анимации можно?
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2017, 15:58
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Конечно, вот

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 14.02.2017 в 17:22.
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2017, 16:49
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

<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>

Последний раз редактировалось Paguo-86PK, 15.02.2017 в 18:48.
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2017, 17:08
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Спасибо, рони
А есть ли возможность полностью перейти от 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Black_Star
А есть ли возможность полностью перейти от SMIL к JS ?
смотрите как устроены svg плагины и ищите обучающую документацию по анимации svg
Ответить с цитированием
  #8 (permalink)  
Старый 14.02.2017, 17:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Black_Star
"],["0",to="242.5"]];
опечатка у меня была
Ответить с цитированием
  #9 (permalink)  
Старый 14.02.2017, 17:58
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Black_Star,
Библиотека http://snapsvg.io/
и примеры использования http://codepen.io/collection/edpyJ/
Ответить с цитированием
  #10 (permalink)  
Старый 14.02.2017, 18:25
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пример тестовых заданий на js junior elshaarawy Учебные материалы 3 26.03.2015 15:17
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28
вопрос про возможности JS для рисования и анимации macdack Библиотеки/Тулкиты/Фреймворки 3 15.07.2011 00:13
Cоздание анимации на JS и Canvas Severtain Общие вопросы Javascript 5 14.05.2011 20:40