[larvaexotech]

#webdev #css #javascript #php

Na wstępie sorki za otagowanie tego #javascript i #php ale chciałem dotrzeć do szerszego grona odbiorców bo troszkę się napociłem nad postem :) Przebaczcie Mircy!

Jakiś czas temu prosiłem o pomoc w zrozumieniu jak działa efekt "cooldowna" znaleziony w internecie tutaj:
(kliknij na szary kwadrat żeby zobaczyć efekt)

http://codepen.io/agrayson/pen/grfiy

Niestety nikt nie potrafił odpowiedzieć sensownie, więc poświęciłem troszkę czasu, pobawiłem się, pokobminowałem itp żeby wyczaić jak to zostało zrobione i udało mi się to zrozumieć. Dlatego przeklejam oryginalnego posta z dyskusji tutaj, żeby inni też wiedzieli:

To jest straszliwie potężny hack który w SVG rysuje kółko w centrum elementu (parametry x=50% y=50%) z bardzo grubą linią. Linia ma tak ogromną grubość, że zastadniczo sama "kreska" tego kółka zasłania cały element SVG.

Coś w tym stylu (to tylko durny rysunek poglądowy):
http://s15.postimg.org/oek88r0uj/Screenshot_99.png

Zwiększamy grubość stroke ("kreski") na taką wielką że zasadniczo zasłania cały kontenerek.

Drugim parametrem jest dash-array który powoduje, że kreska zamiast być tradycyjną to staje się przerywana a wartość tego parametru to odstępy pomiędzy kreskami i długości samych kresek, coś w tym stylu:

http://s29.postimg.org/9whiwhnfr/Screenshot_100.png

Czerwony to kreska bez dash array, żółta to kreska z lekkim dash-array a zielona to kreska z wysokim dash-array.
Jest jeszcze jeden parametr, dash offset który z kolei powoduje, że cały wzór tych przerw jest przesunięty, tzn. np. wartość dash-offset 0 przy dash-array 5 oznacza, że linia przerywana zaczyna się od zerowego pixela, idzie aż do 5tego pixela po czym następuje przerwa pięcopikselowa. Gdy dash-offset ustawimy na 3 to najpierw będą 3 piksele przerwy, potem 5 pixeli kreski, 5 pixeli przerwy itp...

I teraz konkluzja - ten hack polega na tym że wstawiamy kółko z kreską o ogromnej szerokości i ustawiamy jej tak duży dash-array że jeden odcinek przerywanej linii jest tak długi że zajmuje dokładnie cały obwód tego koła.

http://s30.postimg.org/ed9lrwmmp/Screenshot_101.png

Innymi słowy, dash-array ustawiamy tak wysoki, że jedna kreseczka naszej linii przerywanej jest tak długa że pokrywa 100% obwodu koła. Zatem mamy kółko w środku elementu SVG o linii tak grubej że przesłania cały element SVG, ustawione jako linię przeywaną z długością odcinka równą obwodowi całego koła.

I teraz, gdy zwiększymy wartość dash-offset to "kreska" tego koła zaczyna biec nie od początku tylko od N-tego piksela, a z racji tego że jeden odcinek przerywanej kreski wynosi 100% obwodu koła, w rzeczywistości w kole zaczyna się robić wycinek, tak jak narysowane tutaj:

http://s10.postimg.org/bnv096ypl/Screenshot_102.png

Z racji tego że w rzeczywistości kreska ma ogromną szerokość to daje to taki efekt "cooldowna" z gier komputerowych że koło stopniowo się odkrywa.

Dodam jeszcze, że odkrywa się dokładnie tak jak napisałem, tzn. dziura pojawia się w z lewej strony i biegnie wokoło aż dojdzie do prawej strony - niestety w grach cooldowny przebiegają w odrotnym kierunku, tzn. lecą zgodnie ze wskazówkami zegara. Więc ten kierunek również by się przydało zmienić, niestety jednak specyfika masakry którą robimy na tym kółku powoduje że przekształcenie SVG spowoduje że kółko się narysuje błędnie (zaufajcie mi). Zamiast tego zróbmy cos takiego:

Zamykamy naszego SVG w jednego DIVa:

I teraz w CSS do klasy circle-container dodajemy transforma który wykona lustrzane odbicie względem osi pionowej:

.circle-container {
-webkit-transform: scale( -1.0 , 1.0 );
transform: scale( -1.0 , 1.0 );
}

Dla osób niewtajemniczonych (np. bez doświadczenia w gamedev), podanie ujemnej skali X powoduje że element zostaje odbity w poziomie gdyż samo "skale" jest po prostu przesunięciem wierzchołków obiektu w OpenGL a -1 powoduje że wierzchołki prawe są przesunięte w taki sposób że stają się lewe co 'wywraca' obraz do góry dnem :)

I to w zasadzie tyle panowie.

[rukh]

@larvaexotech:
Przykład z CSS-TRICKS (serwery chyba nie działają w tym momencie)
Co tam jest:
2 półokręgi i 2 przykrycia.
1 przykrycie wykonuje półobrót i znika. 2 przykrycie wykonuje półobrót i chowa się za prawym półkolem.

[larvaexotech]

@rukh: hmm ciekawa koncepcja, aczkolwiek nie jestem pewien w jaki sopsób element II zakryje koło np. w sytuacji gdy progress będzie wynosił 5-10%? wtedy dolna część koła IV chyba zostanie odkryta.