Анимация SVG с помощью JS
200
03 января 2019, 12:30
Есть рисунок svg -шный , там необходимо чтоб лента (белого цвета) по нажатию мигала зеленым цветом ,а коробок медленно двигался по этой ленте , при повторном нажатии останавливался или же дальше двигалась коробочка по ленте . Как можно это реализовать ?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu.css">
<script src="biblioteka/bibl.jquery"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="biblioteka/Chart.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<meta charset="UTF-8">
<title>СЕВГОК</title>
</head>
<header id="header-1">
<p class="pump1">ЧАО "ЦГОК" ЦПО 1 УЧАСТОК №2<br>
Гистограммы распределения гранулометрического состава окатышей<br>
по чашевым окомкователям</p>
</header>
<div id="clock" style="height:40px">
<script>
setInterval(function(){
var d = new Date();
document.getElementById('clock').innerHTML = d.toLocaleTimeString();
},1000);
</script>
</div>
<body>
<script type="text/javascript" src = "javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="but1" >Пуск конвейера</button>
<div class="container">
<div id="icon" style= "text-align:center;">
<!-- КОНВЕЙЕР -->
<object id="convier" type="image/svg+xml" data="images/CONVIER.svg" width="1920" height="600"></object>
</div>
</div>
<div id="mainmenu">
<ul>
<li><a href="index.php">График реальный</a></li>
<li><a href="page2.php">График за час</a></li>
<li><a href="page3.php">График за смену</a></li>
<li><a href="page4.php">График за сутки</a></li>
</ul>
</div> <!--первый график-->
</body>
</html>
ОБЬЕКТ КОРОБКА
<g>
<rect x="-1242" y="1847.9" id="st3" width="616" height="592"/>
<rect x="-1098" y="2023.9" id="st4" width="344" height="264"/>
<rect x="-1091" y="2103.9" id="st5" width="336" height="80"/>
<g>
<rect x="-952.4" y="1493.1" id="st3" width="30.5" height="164"/>
<rect x="-1186" y="1555.7" transform="matrix(0.866 -0.5 0.5 0.866 -975.6908 -365.9571)" id="st3" width="30.5" height="164"/>
<rect x="-1357" y="1726.7" transform="matrix(0.5 -0.866 0.866 0.5 -2237.2253 -257.6283)" id="st3" width="30.5" height="164"/>
<rect x="-547.8" y="1726.7" transform="matrix(0.5 0.866 -0.866 0.5 1300.0775 1365.5593)" id="st3" width="30.5" height="164"/>
<rect x="-718.8" y="1555.7" transform="matrix(0.866 0.5 -0.5 0.866 724.5828 571.1907)" id="st3" width="30.5" height="164"/>
</g>
</g>
ЛЕНТА
<path id="st1" d="M8440.2,3728.9H-2280.6c-331.4,0-600-268.6-600-600v0c0-331.4,268.6-600,600-600l10720.8,0
c331.4,0,600,268.6,600,600v0C9040.2,3460.3,8771.6,3728.9,8440.2,3728.9z"/>
СТИЛИ
<style type="text/css">
#st0{fill:#FC1717;stroke:#000000;stroke-miterlimit:10;}
#st1{fill:none;stroke:#FFFFFF;stroke-width:20;stroke-linecap:round;stroke-miterlimit:10;}
#st2{stroke:#000000;stroke-miterlimit:10;}
#st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
#st4{fill:#F48282;stroke:#000000;stroke-miterlimit:10;}
#st5{fill:#FF0000;stroke:#000000;stroke-miterlimit:10;}
</style>
Answer 1
Не знаю, как на счёт мигающей зелёной линии на красном фоне... Я это вижу так:
window.onload = function() {
let oConveyor = document.querySelector('#conveyor');
let oBeltMove = document.querySelector('#belt_move');
let oBeltAlarm = document.querySelector('#belt_alarm');
let oBoxMove = document.querySelector('#box_move');
let oBoxAlarm = document.querySelector('#box_alarm');
document.querySelector('.but1').addEventListener('click', function() {
if (oConveyor.animationsPaused()) {
oConveyor.unpauseAnimations();
oBeltMove.style.animationPlayState = 'running';
oBeltAlarm.classList.remove('belt_alarm');
oBoxMove.style.animationPlayState = 'running';
oBoxAlarm.classList.remove('box_alarm');
} else {
oConveyor.pauseAnimations();
oBeltMove.style.animationPlayState = 'paused';
oBeltAlarm.classList.add('belt_alarm');
oBoxMove.style.animationPlayState = 'paused';
oBoxAlarm.classList.add('box_alarm');
}
});
/*
setInterval(function() {
var d = new Date();
document.getElementById('clock').innerHTML = d.toLocaleTimeString('ru-RU');
}, 1000);
*/
}#conveyor {
width: 100%;
}
#belt_move {
animation: belt_move 1s infinite linear;
}
.belt_alarm {
animation: belt_alarm 1s infinite linear;
}
#box_move {
animation: box_move 12.65s infinite linear;
}
.box_alarm {
animation: box_alarm .5s linear infinite;
}
@keyframes box_move {
0%, 100% {
stroke: rgba(0, 0, 0, 0);
fill: rgba(0, 153, 0, 0);
}
10%, 90% {
stroke: rgba(0, 0, 0, 1);
fill: rgba(0, 153, 0, 1);
}
}
@keyframes box_alarm {
0%, 60% { fill: rgba(255, 0, 0, 1); }
61%, 100% { fill: rgba(255, 0, 0, 0); }
}
@keyframes belt_move {
to { stroke-dashoffset: 5; }
}
@keyframes belt_alarm {
0%, 100% { stroke: rgba(255, 0, 0, 0); }
50% { stroke: rgba(255, 0, 0, 1); }
}<body>
<header id="header-1">
<p class="pump1">ЧАО "ЦГОК" ЦПО 1 УЧАСТОК №2<br> Гистограммы распределения гранулометрического <br>состава окатышей по чашевым окомкователям</p>
</header>
<div id="clock" style="height:40px"></div>
<button class="but1">Пуск конвейера</button>
<div class="container">
<div id="icon" style="text-align:center;">
<!-- Conveyor -->
<svg id="conveyor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
<defs>
<!-- Сhain star reference -->
<circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4"/>
<path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16"/>
<g id="cog">
<use xlink:href="#c"/>
<use xlink:href="#d"/>
<use xlink:href="#d" transform="rotate(45 20 20)"/>
</g>
<!-- Box reference -->
<rect id="box" x="13" y="2" width="10" height="10" stroke-width="1"/>
</defs>
<!-- Alarm belt -->
<path id="belt_alarm" stroke-width="2" stroke="transparent" fill="transparent" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z" />
<!-- Conveyor belt -->
<path id="belt_move" stroke-width="1" stroke="#000" fill="transparent" stroke-dasharray="2.6 2.45" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z" />
<!-- 1st chain star -->
<use xlink:href="#cog">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-337.5 20 20" to="22.5 20 20" dur="8s" repeatCount="indefinite"/>
</use>
<g transform="translate(60.45 0)">
<!-- 2nd chain star -->
<use xlink:href="#cog">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-337.5 20 20" to="22.5 20 20" dur="8s" repeatCount="indefinite"/>
</use>
</g>
<!-- Box -->
<g id="box_move">
<g id="box_alarm">
<use xlink:href="#box">
<animateTransform attributeType="xml" attributeName="transform" type="translate" from="0 0" to="64 0" dur="12.65s" repeatCount="indefinite"/>
</use>
</g>
</g>
</svg>
</div>
</div>
<div id="mainmenu">
<ul>
<li><a href="index.php">График реальный</a></li>
<li><a href="page2.php">График за час</a></li>
<li><a href="page3.php">График за смену</a></li>
<li><a href="page4.php">График за сутки</a></li>
</ul>
</div>
<!--первый график-->
</body>Источник
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47699 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30546 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23727 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9981 visits
- Php curl запрос через прокси с авторизацией 9240 visits
- Работа с captcha vk api 8117 visits
READ ALSO
![как определить значение высоты скрола в модальном окне? [закрыт]](https://hostciti.net/images/nophoto.png "как определить значение высоты скрола в модальном окне? [закрыт]")
© "hostciti.net" 28.1.2025 | 04:18