抖动效果

使用js实现字体或div放大抖动的动画效果

js代码：（rumble.js）

var styleChange = function(obj){
	var style = '';
	for( var i in obj){
		style = style + i+':'+obj[i]+';';
	}
	return style;
}

function jrumble(target,options){
	// JRUMBLE OPTIONS
	//---------------------------------
	var defaults = {
		rangeX: 2,
		rangeY: 2,
		rangeRot: 1,
		rumbleSpeed: 10,
		durationTime: 1000,
		posX: 'left',
		posY: 'top'
	};

	for( var i in options)
		defaults[i] = options[i];
	var opt = defaults;

	var result =  target.map(function(singleObj){
			
		// VARIABLE DECLARATION
		//---------------------------------
		var singleObject = singleObj;		
		var rumbleInterval;	
		var rangeX = opt.rangeX;
		var rangeY = opt.rangeY;
		var rangeRot = opt.rangeRot;
		rangeX = rangeX*2;
		rangeY = rangeY*2;
		rangeRot = rangeRot*2;
		var rumbleSpeed = opt.rumbleSpeed;
		var durationTime = opt.durationTime;			
		var objPosition = singleObject.style.position || 'static';
		var objXrel = opt.posX;
		var objYrel = opt.posY;
		var objXmove;
		var objYmove;
		var inlineChange;
		
		// SET POSITION RELATION IF CHANGED
		//---------------------------------
		if(objXrel === 'left'){
			objXmove = parseInt(singleObject.style.left,10) || 0;
		}
		if(objXrel === 'right'){
			objXmove = parseInt(singleObject.style.right,10) || 0;
		}
		if(objYrel === 'top'){
			objYmove = parseInt(singleObject.style.top,10) || 0;
		}
		if(objYrel === 'bottom'){
			objYmove = parseInt(singleObject.style.bottom,10) || 0;
		}
		
		// RUMBLER FUNCTION
		//---------------------------------			
		function rumbler(elem) {		
			// Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值
			// 例如：var a=Math.random()*2+1，设置一个随机1到3(取不到3)的变量。		
			var randBool = Math.random();
			var randX = Math.floor(Math.random() * (rangeX+1)) -rangeX/2;
			var randY = Math.floor(Math.random() * (rangeY+1)) -rangeY/2;
			var randRot = Math.floor(Math.random() * (rangeRot+1)) -rangeRot/2;	
			
			// IF INLINE, MAKE INLINE-BLOCK FOR ROTATION
			//---------------------------------
			if(elem.style.display === 'inline'){
				inlineChange = true;
				elem.style.display = 'inline-block';
			}
		
			// ENSURE MOVEMENT
			//---------------------------------			
			if(randX === 0 && rangeX !== 0){
				if(randBool < .5){
					randX = 1;
				}
				else {
					randX = -1;
				}
			}
			
			if(randY === 0 && rangeY !== 0){
				if(randBool < .5){
					randY = 1;
				}
				else {
					randY = -1;
				}
			}

			var newStyle = {
				'-webkit-transform': 'rotate('+randRot+'deg) scale(1.1)', 
				'-moz-transform': 'rotate('+randRot+'deg) scale(1.1)', 
				'-o-transform': 'rotate('+randRot+'deg) scale(1.1)', 
				'transform': 'rotate('+randRot+'deg) scale(1.1)',
			}
			// RUMBLE BASED ON POSITION
			//---------------------------------
			if(objPosition === 'absolute'){
				newStyle['position'] = 'absolute';
				newStyle[objXrel] = objXmove+randX+'px';
				newStyle[objYrel] = objYmove+randY+'px';
				var style = styleChange(newStyle);
				elem.setAttribute('style', style);
			}
			if(objPosition === 'fixed'){
				newStyle['position'] = 'fixed';
				newStyle[objXrel] = objXmove+randX+'px';
				newStyle[objYrel] = objYmove+randY+'px';
				var style = styleChange(newStyle);
				elem.setAttribute('style', style);
			}
			if(objPosition === 'static' || objPosition === 'relative'){
				newStyle['position'] = 'relative';
				newStyle[objXrel] = randX+'px';
				newStyle[objYrel] = randY+'px';
				var style = styleChange(newStyle);
				elem.setAttribute('style', style);
			}
		} // End rumbler function
		
		// EVENT TYPES (rumbleEvent)
		//---------------------------------	
		var resetRumblerCSS = {
			'position':objPosition,
			'-webkit-transform': 'rotate(0deg) scale(1)', 
			'-moz-transform': 'rotate(0deg) scale(1)', 
			'-o-transform': 'rotate(0deg) scale(1)', 
			'transform': 'rotate(0deg) scale(1)'
		};
		resetRumblerCSS[objXrel] = objXmove+'px';
		resetRumblerCSS[objYrel] = objYmove+'px';
		
		var rumblee = singleObj;
		rumbleInterval = setInterval(function() { 
			rumbler(rumblee); 
		}, rumbleSpeed);
		setTimeout(function(){
			clearInterval(rumbleInterval);
			var style = styleChange(resetRumblerCSS);
			rumblee.setAttribute('style', style);
			if(inlineChange === true){
				rumblee.style.display = 'inline';
			}
		},durationTime);
	});

	return result;
}

1 参数解析：

1） rangeX：左右震动的像素值

2） rangeY：上下震动的像素值

3） rangeRot：中心旋转的角度值

4） rumbleSpeed：抖动的速度

5） durationTime：抖动持续时间

6） posX：X轴的相对位置设置，即规定是以左边还是以右边为基线修改位置

7） posY：Y轴的相对位置设置，即规定是以上边还是以下边为基线修改位置

2 传入参数解析：

1） target：需要使用抖动效果的目标数组

2） options：修改抖动效果的对象

3 主要方法：

var randBool = Math.random();
var randX = Math.floor(Math.random() * (rangeX+1)) -rangeX/2;
var randY = Math.floor(Math.random() * (rangeY+1)) -rangeY/2;
var randRot = Math.floor(Math.random() * (rangeRot+1)) -rangeRot/2;	

主要使用了Math.random()方法，该方法是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值。

例如：

var a=Math.random()*2+1，设置一个随机1到3(取不到3)的变量。

通过此方法计算出随机的旋转角度值、随机的上下移动像素值和随机的左右移动像素值，从而达到抖动的效果。

4 setAttribute(attributename,attributevalue)方法：

1）语法：

element.setAttribute(attributename,attributevalue)

2）参数：

attributename：必需。希望添加的属性的名称（String）。

attributevalue：必需。希望添加的属性值（String）。

5 styleChange()函数的作用：

此函数主要是把对象里面的字段串联转换为字符串。

由于实现抖动效果的主要方法是动态地修改目标标签的css，而这里使用了setAttribute()方法来修改style数据。而此方法的第二个参数必须是字符串，故增加了此方法。

html Domo代码：（index.html）

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义抖动频率的抖动动画</title>
	<style type="text/css">
	.demo-box {
		width: 80px;
		background: #f36;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		height: 45px;
		line-height: 45px;
		margin: 50px auto;
		text-align: center;
	}

	</style>
</head>
<body>
<div class="demo-box" id="demo">
	134
</div>
<!--
<script type="text/javascript" src="js/rumble.js"></script>-->
<script type="text/javascript" src="js/rumble2.js"></script>
<script type="text/javascript">
var domo = document.getElementById("demo");
var options = {
		rangeX: 1,
		rangeY: 1,
		rangeRot: 5,
		durationTime:800
	};
domo.addEventListener('click',function(){
	jrumble([domo],options);
});
</script>
</body>
</html>