menu
Krylan | Krzysztof Koperkiewicz
Blog

#06 Round Timer – tworzymy w CSS odmierzacz czasu

2017-04-06 / DSP2017 / Komentarze (0) / Wyświetleń: 819

Czas jest ważną częścią mojego projektu. Gracze mają 10 sekund na udzielenie odpowiedzi na pytanie – im szybciej to zrobią, tym więcej punktów otrzymają. Trzeba jednak też pokazać graczom, ile czasu im pozostało. W tym celu wymyśliłem sobie linię, będącą obwodem koła, która będzie stawała się coraz krótsza. Natomiast pośrodku tego koła, znajdować się będzie cyfra, która będzie wskazywać ilość sekund do końca pytania.

Przeszukiwałem internet w poszukiwaniu rozwiązania, jak tego dokonać, bo szczerze było to dla mnie nowością – co innego zwykły, prostokątny pasek. Tutaj sprawę mieliśmy bardziej skomplikowaną. Niestety, internetowe rozwiązania nie do końca odpowiadały temu, co chcę zrobić. Jedno z nich było jednak najbliżej tego – wystarczyło, że trochę zmieniłem kod, potem go skróciłem i miałem dokładnie to, czego oczekiwałem. Przedstawie Wam go i pokażę, jak działa.

W HTML-u tworzymy nowe tagi, które będą naszym licznikiem:

<div id="question-timer" data-time="10">
	<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
	  <circle id="circle" class="circle-animation" r="20" cy="80" cx="80" stroke-width="10" stroke="#6fdb6f" fill="none" />
	</svg>
</div>


Okay, nasze koło będzie w SVG. W stworzonym atrybucie "data-time" przechowuję informację, jaką liczbę ma wyświetlić w środku koła. W samym SVG możemy zmienić różne parametry koła, takie jak grubość obwodu, kolor, czy średnicę (uwaga, zmiana tego ostatniego wiąże się także ze zmianą dwóch innych rzeczy).

Następnie piszemy w CSS style, które umożliwią nam animowanie tego koła:

#question-timer{
    position: absolute;
    left: 0;
    right: 0;
	top:40px;
}
#question-timer svg {
	position: absolute;
	top: 50%;left: 0;right: 0;
	transform: translateY(-50%) rotate(-90deg);
}
#question-timer .circle-animation{
	stroke-dasharray: 125; /* this value is the pixel circumference of the circle (2*pi*r) */
	stroke-dashoffset: 125;
	transition: all 0.1s linear;
}
#question-timer:before {
	content: attr(data-time);
	position: absolute;
	display: block;
	top: 50%;left: 0;right: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
	font-size: 22px;
}


Kilka styli nie jest tu niezbędnych (tutaj są, ponieważ ich potrzebowałem w swoim przypadku). Najważniejszą częścią tego kodu jest "stroke-dasharray" oraz "stroke-dashoffset". Należy pamiętać, że jeśli zmienimy średnicę naszego koła, musimy w tym miejscu w CSS zmienić te wartości, licząc ze wzoru: 2*pi*r

Kiedy już to mamy, wystarczy nam tylko w JS napisać funkcję, która będzie ten czas odmierzała:

function runTime(i_max, callback){
	var time = 0;
	var initialOffset = 0;
	var i = i_max;

	var interval = setInterval(function(){
		document.querySelector('#question-timer').dataset.time = Math.ceil(i);
		document.querySelector('.circle-animation').style.strokeDashoffset = 125-(125*(i/i_max));
		if (i <= time){
			document.querySelector('.circle-animation').style.strokeDashoffset = 125;
			clearInterval(interval);
			if (typeof callback === "function") {
				callback();
			}
			return;
		}
		i -= 0.1;
	}, 100);
}


No tutaj już wszystko robi się automatycznie. Wystarczy zamienić moje wartości "125" na te, które zostały wyliczone z wcześniej podanego wzoru. Kiedy wywołujemy tę funkcję, podajemy jako pierwszy argument czas, który ma odmierzać, a w drugim (opcjonalnym) funkcję, która ma zostać wywołana po skończeniu się czasu. I to wszystko.

Tutaj działające demo z mojego CodePena:


Poprzedni post
#05 Bęben maszyny jest pusty, następuje zwolnienie blokady...
Następny post
#07 Przyciski udostępniania treści w sieciach społecznościowych – część 1

Wygląda na to, że nic tu nie ma
Uszczęśliw kotka i napisz komentarz