js基本知识比较系列四：动画

最新推荐文章于 2024-09-08 08:30:00 发布

strayyiyi

最新推荐文章于 2024-09-08 08:30:00 发布

阅读量217

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/strayyiyi/article/details/70886144

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

javascript原生运动

function startMove(obj, json, fn) {
	clearInterval(obj.iTimer);
	var iCur = 0;
	var iSpeed = 0;
		
	obj.iTimer = setInterval(function() {
		
		var iBtn = true;
					
		for ( var attr in json ) {
							
			var iTarget = json[attr];
			
			if (attr == 'opacity') {
				iCur = Math.round(css( obj, 'opacity' ) * 100);
			} else {
				iCur = parseInt(css(obj, attr));
			}
			
			iSpeed = ( iTarget - iCur ) / 8;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			
			if (iCur != iTarget) {
				iBtn = false;
				if (attr == 'opacity') {
					obj.style.opacity = (iCur + iSpeed) / 100;
					obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
				} else {
					obj.style[attr] = iCur + iSpeed + 'px';
				}
			}
			
		}
		
		if (iBtn) {
			clearInterval(obj.iTimer);
			fn && fn.call(obj);
		}
		
	}, 30);
}

function css(obj, attr) {
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	} else {
		return getComputedStyle(obj, false)[attr];
	}
}

jquery :

动画方法： hide() show() fadeIn() fadeOut() slideUp() slideDown()

fast:200毫秒 normal: 400毫秒 slow:600毫秒

自定义动画：

$(selector).animate({params},speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

(1)累加： animate({left:"+=500px"},300);

(2)多重动画：animate({left:"500px",height:'200px'},3000)

(3)停止动画： stop(clearQueue,gotoEnd)

(4)是否在动画中： is(":aniamted")

(5)延迟动画: delay()

(6)其他动画： toggle(speed,[callback]) slideToggle(speed,[easing],[callback]) fadeTo(speed,opacity,[callback]) fadeToggle(speed,[easing],[callback])

fadeTo(600,0.2);

(7)缓冲效果 :

使用jquery.easing.js插件

$('.div4').animate({
width:'500px',
opacity: 1
},1000,'easeOutBounce');

多个属性

$(myElement).animate({  
    left: [500, 'swing'],  
    top: [200, 'easeOutBounce']  
});

css3动画

animation:

animation: name duration timing-function delay iteration-count direction;

.div3{
			width:100px;
			height:100px;
			border:1px solid blue;
			animation:myfirst 5s linear 2s infinite alternate;			
		}	
		@keyframes myfirst{
			0%   {background: red;}
		        25%  {background: yellow;}
                        50%  {background: blue;}
                        100% {background: green;}
		}

svg动画推荐文章：http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

webgl

上述比较推荐文章：http://blog.csdn.net/zqjflash/article/details/44903859