Vytvářejte Spinning Rays pomocí CSS3 animací a JavaScriptu

Thomas Fuchs, tvůrce skript 2 (druhá iterace skriptaculous) a Zepto.js (mobilní rámec JavaScriptu), vytváří vynikající animované prvky pomocí JavaScriptu. Sám o sobě je legendou a má to dobrý důvod:jeho práce pomohla inspirovat vývojáře na celém světě, aby opustili Flash a rozhodli se pro vývoj v JavaScriptu pro plynulé uživatelské rozhraní. Jeden jednoduchý efekt, který se mi líbí, je rotace paprskového obrazu na webu script2. Dovolte mi, abych vám ukázal, jak to Thomas dokázal!

CSS

Do vaší šablony stylů je potřeba přidat velmi málo CSS:

#rays	{ 
	background:url(rays.png) 0 0 no-repeat; 
	position:absolute; 
	top:0; 
	left:0; 
	width:490px; 
	height:490px; 
	transform:scale(1) rotate(16.768rad);
}

Obrázek paprsků by měl být obrázek na pozadí a pravděpodobně je nejlepší nastavit rozměry prvku. Můžete také nastavit počáteční hodnotu rotace.

JavaScript

Efekt rotujících paprsků funguje tak, že se pomocí JavaScriptu aktualizují vlastnosti animace CSS3 specifické pro prohlížeč. Prvním krokem je detekce prohlížeče:

var cssPrefix = false;
switch(Browser.name) {
	case "safari":
		cssPrefix = "webkit";
		break;
	case "chrome":
		cssPrefix = "webkit";
		break;
	case "firefox":
		cssPrefix = "moz";
		break;
	case "opera":
		cssPrefix = "o";
		break;
	case "ie":
		cssPrefix = "ms";
		break;
}

K detekci prohlížeče jsem se rozhodl použít objekt prohlížeče MooTools. jQuery a další knihovny poskytují metodu, jak získat aktuální prohlížeč. Jak poznáte podle kódu, tento efekt bude podporovat prohlížeče založené na Webkitu (Chrome, Safari, Webkit-mobile), Firefox a Opera. Jakmile je detekován aktuální prohlížeč, nastavíte direktivu setInterval, která bude pravidelně aktualizovat stupeň otočení prvku:

// Spin them rays!
if(cssPrefix) { // Skip IE!
	var rays = document.getElementById("rays"), degrees = 0, speed = 0.05;
	setInterval(function() {
		degrees += speed; // degree adjustment each interval
		rays.setAttribute("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
	},20);
}

S MooTools by to vypadalo takto:

// Spin them rays!
if(cssPrefix) { // Skip IE!
	var rays = $("rays"), degrees = 0, speed = 0.05;
	(function() {
		degrees += speed; // degree adjustment each interval
		rays.set("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
	}).periodical(20);
}

Zjistil jsem, že interval přiřazení třídy 20 milisekund poskytuje hladký, ale jemný přechod. Koneckonců nechcete, aby paprskový pohyb ukradl pozornost uživatele. Chcete-li přidat trochu zábavy, můžete upravit rychlost animace, když uživatel najede myší dovnitř a ven z prvku:

rays.addEvents({
	mouseenter: function() { // 5x! Warp speed!
		speed = 0.25;
	},
	mouseleave: function() { // Back to normal;
		speed = 0.05;
	}
});

Jemnost je klíčem k využití tohoto efektu...efektivně. Použití vlastností CSS k přechodu rotace prvku je ještě optimálnější, protože jsou nativní pro prohlížeč. Budete si chtít být jisti, že tento efekt na dané stránce příliš nevyužijete, protože mnoho souběžných animací může být pro jakýkoli prohlížeč zatěžující. Rád bych také zdůraznil, že Safari a Chrome zvládají tyto animace nejlépe.