css3动画旋转动画_使用CSS3动画和JavaScript创建旋转光线

css3动画旋转动画

Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt for JavaScript development for smooth UI's.  One simple effect I enjoy is the script2 website's rotation of a ray image.  Let me show you how Thomas did it!

脚本2 (scriptaculous的第二次迭代)和Zepto.js(移动JavaScript框架)的创建者Thomas Fuchs使用JavaScript创建了出色的动画元素。 他本身就是一个传奇人物，这有充分的理由：他的工作帮助激发了各地的开发人员放弃Flash并选择JavaScript开发以实现流畅的UI的意愿。 我喜欢的一个简单效果是script2网站对射线图像的旋转。 让我告诉你托马斯是如何做到的！

View Demo 观看演示

CSS (The CSS)

There's very little CSS to add to your stylesheet:

几乎没有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);
}

The rays image should be a background image and it's probably best to set the element's dimensions. You can set an initial rotation value as well.

射线图像应该是背景图像，最好设置元素的尺寸。 您也可以设置初始旋转值。

JavaScript (The JavaScript)

The spinning rays effect works by using JavaScript to update browser-specific CSS3 animation properties.  The first step is detecting the browser:

旋转光线效果通过使用JavaScript来更新特定于浏览器CSS3动画属性而起作用。 第一步是检测浏览器：

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;
}

I've chosen to use MooTools' Browser object to detect the browser.  jQuery and other libraries provide a method by which to get the current browser.  As you can tell by the code, this effect will support Webkit-based browsers (Chrome, Safari, Webkit-mobile), Firefox, and Opera. Once the current browser is detected, you set forth a setInterval directive to perodically update the degree rotation of the element:

我选择使用MooTools的Browser对象来检测浏览器。 jQuery和其他库提供了一种获取当前浏览器的方法。 如代码所示，该效果将支持基于Webkit的浏览器(Chrome，Safari，Webkit-mobile)，Firefox和Opera。 一旦检测到当前浏览器，就可以设置setInterval指令来定期更新元素的度旋转：

// 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);
}

With MooTools it would look like:

使用MooTools，它看起来像：

// 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);
}

I've found a 20 millisecond class assignment interval provides a smooth but subtle transition.  After all you don't want the ray movement to steal the user's attention. To add some fun you could adjust the speed of the animation when the user mouses in and out of the element:

我发现20毫秒的类分配间隔提供了一个平稳但细微的过渡。 毕竟，您不希望射线运动吸引用户的注意力。 要添加一些乐趣，您可以在用户将鼠标移入和移出元素时调整动画的速度：

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

View Demo 观看演示

Subtlety is the key to using this effect...effectively.  Using CSS properties to transition the element's rotation is even more optimal, seeing as they're native to the browser.  You'll want to be sure not to use this effect to much on a given page, as many concurrent animations can be taxing to any browser.  I'd also like to point out that Safari and Chrome handle these animations best.

微妙是有效使用此效果的关键。 鉴于CSS属性是浏览器的本机，因此使用CSS属性转换元素的旋转效果甚至更好。 您将要确保不要在给定页面上过多使用此效果，因为许多并发动画可能会给任何浏览器带来负担。 我还要指出，Safari和Chrome可以最好地处理这些动画。

翻译自: https://davidwalsh.name/javascript-spin

css3动画旋转动画