21.03.2017, 17:43
|
|
Интересующийся
|
|
Регистрация: 15.04.2011
Сообщений: 26
|
|
|
SVG + CSS = разный тайминг
Подскажите, что не так? Линия должна прорисовываться 10 секунд и круг смещаться должен вдоль этой же линии 10 секунд, но на практике все не так  ((
<html><body><head>
<style>
.my_path {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: dash 10s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 100%;
}
to {
stroke-dashoffset: 0%;
}
}
</style>
</head>
<svg width="400" height="300">
<path class="my_path" d="M 50,100 L 100,100 L 200,100 L 250,100"
fill="rgb(100, 100, 100)" stroke="#888" stroke-width="2"/>
<circle cx="0" cy="0" r="10" fill="rgb(99,199,99)">
<animateMotion begin="0s" dur="10s"
path="M 50,100 L 100,100 L 200,100 L 250,100" />
</circle>
</svg>
</body></html>
|
|
22.03.2017, 09:35
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
|
Сообщение от Dimasick
|
|
Линия должна прорисовываться 10 секунд и круг смещаться должен вдоль этой же линии 10 секунд
|
Что-то подсказывает мне, что ты не так интерпретировал значения атрибутов... 
Так вроде синхронно получается.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.my_path {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: dash 10s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 100%;
}
to {
stroke-dashoffset: 0%;
}
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<svg width="400" height="300">
<path class="my_path" d="M 50,100 L 100,100 L 200,100 L 250,100"
fill="rgb(100, 100, 100)" stroke="#888" stroke-width="2"/>
<circle cx="0" cy="0" r="10" fill="rgb(99,199,99)">
<animateMotion begin="0s" dur="6s"
path="M 50,100 L 100,100 L 200,100 L 250,100" />
</circle>
</svg>
</body>
</html>
|
|
23.03.2017, 11:16
|
|
Интересующийся
|
|
Регистрация: 15.04.2011
Сообщений: 26
|
|
|
И какие же значения атрибутов я не так интерпретировал? ksa, написать 6s вместо 10s - это не выход, мне нужно понимать, как правильно согласовывать эти значения.
|
|
23.03.2017, 11:48
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
|
Сообщение от Dimasick
|
|
И какие же значения атрибутов я не так интерпретировал?
|
Того же dur у animateMotion...
Он вроде как и описан
|
Цитата:
|
|
Определяет продолжительность анимации
|
http://webix.pro/svg/spravochnik/atr...ml#dur-animate
Но ведь JS не является ЯП реального времени.
|
Сообщение от Dimasick
|
|
написать 6s вместо 10s - это не выход, мне нужно понимать, как правильно согласовывать эти значения
|
К сожалению - никак этого не сделать.
Все эти временные "задержки", "отсечки" в JS весьма условны. Сильно зависят от загруженности браузера и быстродействия железа, на котором все происходит...
Кроме как "подбор" мало что подойдет тебе для решения такой, казалось бы простенькой, задачки... |
|
23.03.2017, 12:19
|
|
Интересующийся
|
|
Регистрация: 15.04.2011
Сообщений: 26
|
|
ок, сформулирую вопрос иначе: можно ли методами svg организовать прорисовку линии (path) так, чтобы она равномерно (!) увеличивала свою длинну? при этом желательно, чтобы растущий конец линии имел какой-нибудть маркер в виде кружка? я кодга смотрю на свою исходную реализацию, то вижу, что JS работает равномерно, а вот именно SVG - нет. удивляет еще то, что если stroke-dasharray и stroke-dashoffset задавать в пикселях, то все работает нормально, НО если в процентах - то ненормально а мне нужны именно проценты, т.к. я заранее не знаю, какая линия у меня будет (она будет генериться при создании страницы). |
|
23.03.2017, 14:37
|
|
Интересующийся
|
|
Регистрация: 15.04.2011
Сообщений: 26
|
|
|
задача решена с помощью
len = path.getTotalLength();
|
|
|
|
