регистрация
856материалов
3280комментариев
235тем на форуме
6815пользователей

SVG-часы с JavaScript анимацией


Описание:

Использование JavaScript в сочетании с векторной графикой позволяет получать очень интересные решения. Здесь приведен пример SVG-анимации в виде аналоговых часов. Преимущество векторной графики над растровой в ее масштабируемости. При увеличении изображения его качестве не меняется. Это очень удобно, если шаблон вашего сайта адаптируемый. Эти часы реализованы на основе svg-графики. Скрипт используется для вычисления величин углов, на которые надо поворачивать стрелки на основе системного времени. А для отрисовки часов уже используются возможности svg-графики. Так как все изображение это обычный текст, то его легко настроить. Это можно делать даже динамически, используя те же скрипты. Возможности такой графики ограничены только вашей фантазией и навыками программирования. Она не подходит только для создания очень детализованных изображений. И так, приступим к установки.

Установка:

Для начала скачиваете архив с нашего сайта, распаковываете его, и папку JS загружаете в свой файловый менеджер.

Теперь, где хотите видеть часы, вставляете код:
Код
<div class="filler"></div>
<svg width="200" height="200">
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="2.5" dy="2.5"/>
</filter>
<g>
<circle id="shadow" style="fill:rgba(0,0,0,0.1)" cx="97" cy="100" r="87" filter="url(#innerShadow)"></circle>
<circle id="circle" style="stroke: #FFF; stroke-width: 12px; fill:#20B7AF" cx="100" cy="100" r="80"></circle>
</g>
<g>
<line x1="100" y1="100" x2="100" y2="55" transform="rotate(80 100 100)" style="stroke-width: 3px; stroke: #fffbf9;" id="hourhand">
<animatetransform attributeName="transform"
attributeType="XML"
type="rotate"
dur="43200s"
repeatCount="indefinite"/>
</line>
<line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px; stroke: #fdfdfd;" id="minutehand">
<animatetransform attributeName="transform"
attributeType="XML"
type="rotate"
dur="3600s"
repeatCount="indefinite"/>
</line>
<line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px; stroke: #C1EFED;" id="secondhand">
<animatetransform attributeName="transform"
attributeType="XML"
type="rotate"
dur="60s"
repeatCount="indefinite"/>
</line>
</g>
<circle id="center" style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;" cx="100" cy="100" r="3"></circle>
</svg>

А это код в нижнюю часть сайта:
Код
<script src='/js/SVG-Clock.js'></script>

<script>var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));

var cx = 100;
var cy = 100;

function shifter(val) {
return [val, cx, cy].join(' ');
}

var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));

for(var i = 1; i <= 12; i++) {if (window.CP.shouldStopExecution(1)){break;}
var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
el.setAttribute('x1', '100');
el.setAttribute('y1', '30');
el.setAttribute('x2', '100');
el.setAttribute('y2', '40');
el.setAttribute('transform', 'rotate(' + (i*360/12) + ' 100 100)');
el.setAttribute('style', 'stroke: #ffffff;');
document.querySelector('svg').appendChild(el);
}
window.CP.exitedLoop(1);
</script>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 15.03.2017 в 17:00
Материал просмотрен: 494 раза
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

Пожаловаться
Сказать спасибо

2 комментария


S
Классные часики
bootstraptema_
Замените:
Код

<script src='/js/SVG-Clock.js'></script>  
  
  <script>var hands = [];  
  hands.push(document.querySelector('#secondhand > *'));  
  hands.push(document.querySelector('#minutehand > *'));  
  hands.push(document.querySelector('#hourhand > *'));  
  
  var cx = 100;  
  var cy = 100;  
  
  function shifter(val) {  
  return [val, cx, cy].join(' ');  
  }  
  
  var date = new Date();  
  var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;  
  var minuteAngle = 360 * date.getMinutes() / 60;  
  var secAngle = 360 * date.getSeconds() / 60;  
  
  hands[0].setAttribute('from', shifter(secAngle));  
  hands[0].setAttribute('to', shifter(secAngle + 360));  
  hands[1].setAttribute('from', shifter(minuteAngle));  
  hands[1].setAttribute('to', shifter(minuteAngle + 360));  
  hands[2].setAttribute('from', shifter(hoursAngle));  
  hands[2].setAttribute('to', shifter(hoursAngle + 360));  
  
  for(var i = 1; i <= 12; i++) {if (window.CP.shouldStopExecution(1)){break;}  
  var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');  
  el.setAttribute('x1', '100');  
  el.setAttribute('y1', '30');  
  el.setAttribute('x2', '100');  
  el.setAttribute('y2', '40');  
  el.setAttribute('transform', 'rotate(' + (i*360/12) + ' 100 100)');  
  el.setAttribute('style', 'stroke: #ffffff;');  
  document.querySelector('svg').appendChild(el);  
  }  
  window.CP.exitedLoop(1);  
  </script>


на

Код

<script>
var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));
var cx = 100;
var cy = 100;
function shifter(val) {
  return [val, cx, cy].join(' ');
}
var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;
hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));
for (var i = 1; i <= 12; i++) {
  var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  el.setAttribute('x1', '100');
  el.setAttribute('y1', '30');
  el.setAttribute('x2', '100');
  el.setAttribute('y2', '40');
  el.setAttribute('transform', 'rotate(' + (i * 360 / 12) + ' 100 100)');
  el.setAttribute('style', 'stroke: #ffffff;');
document.querySelector('svg').appendChild(el);
}
</script>
avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0