83 lines
3.3 KiB
Plaintext
83 lines
3.3 KiB
Plaintext
include ../components/mixins.pug
|
|
|
|
|
|
doctype html
|
|
html(lang="ru")
|
|
head
|
|
meta(charset="utf-8")
|
|
title Трансформация и анимация
|
|
script(src="svg_playground/d3.v7.min.js")
|
|
script(src="svg_playground/main.js")
|
|
script(src="svg_playground/image.js")
|
|
script(src="svg_playground/path.js")
|
|
body
|
|
+navbarMixin("SVG Playground")
|
|
|
|
form#setting
|
|
p.path-anim-related-inverse
|
|
| Координаты рисунка
|
|
br
|
|
label(for="cx") x:
|
|
input#cx(type="number", value="300", max="600", min="0")
|
|
label.anim-related(for="cx_finish") до:
|
|
input#cx_finish.anim-related(type="number", value="300", max="600", min="0")
|
|
br
|
|
label(for="cy") y:
|
|
input#cy(type="number", value="300", max="600", min="0")
|
|
label.anim-related(for="cy_finish") до:
|
|
input.anim-related#cy_finish(type="number", value="300", max="600", min="0")
|
|
|
|
p.path-anim-related
|
|
| Пути перемещения
|
|
br
|
|
select#pathSelect
|
|
option(value="0") Буквой "Г"
|
|
option(value="1") По кругу
|
|
option(value="2") Спиралью
|
|
|
|
p
|
|
| Масштаб
|
|
br
|
|
label(for="sx") по x:
|
|
input#sx(type="number", value="1", max="100", min="-100")
|
|
label.anim-related(for="sx_finish") до:
|
|
input#sx_finish.anim-related(type="number", value="1.5", max="100", min="-100")
|
|
br
|
|
label(for="sy") по y:
|
|
input#sy(type="number", value="1", max="100", min="-100")
|
|
label.anim-related(for="sy_finish") до:
|
|
input#sy_finish.anim-related(type="number", value="1.5", max="100", min="-100")
|
|
|
|
p
|
|
| Поворот
|
|
br
|
|
label(for="r") x:
|
|
input#r(type="number", value="0", max="360", min="-360")
|
|
label.anim-related(for="r_finish") до:
|
|
input#r_finish.anim-related(type="number", value="360", max="360", min="-360")
|
|
|
|
p.anim-related
|
|
| Время анамации (мс)
|
|
br
|
|
label(for="duration") x:
|
|
input#duration(type="number", value="2000", max="10000", min="1")
|
|
|
|
p
|
|
input#applyButton.anim-related-inverse(type="button", value="Нарисовать")
|
|
input#clearButton(type="button", value="Отчистить")
|
|
|
|
p
|
|
| Включить Анимацию?
|
|
input#enableAnimCheckbox(type="checkbox")
|
|
br
|
|
label.anim-related(for="animAlongPathCheckbox") Перемещение вдоль пути?
|
|
input#animAlongPathCheckbox.anim-related(type="checkbox")
|
|
select#animTypeSelect.anim-related
|
|
option(value="0") linear
|
|
option(value="1") elastic
|
|
option(value="2") bounce
|
|
br
|
|
input#startAnimButton.anim-related(type="button", value="Анимировать")
|
|
|
|
svg
|