运动的两种形式

最新推荐文章于 2022-06-16 23:20:01 发布

magicfly9527

最新推荐文章于 2022-06-16 23:20:01 发布

阅读量395

点赞数

分类专栏： javascript 文章标签： javascript js move

本文链接：https://blog.csdn.net/magicfly9527/article/details/46325063

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1 基于位移版的缓冲运动，

存在问题，

1{} 里面，运动变量有大有小时，运动效果体验差

2缩小浏览器时，因为定时器运动变得缓慢，所以打开，才再次运动

    	
                 function move(obj, json, fn) {
			clearInterval(obj.timer);
			obj.timer = setInterval(function() {
				var bStop = true;
				for (var attr in json) {
					var iCur = 0;
					//。获取对象的初始属性，对透明度作特别处理
					if (attr == 'opacity') {
						iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
					} else {
						iCur = parseInt(getStyle(obj, attr));
					}
					//计算速度，目标减去初始除上8，8为自定义的值，经过实践
					var iSpeed = (json[attr] - iCur) / 8;
					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
					//停止开关，当没达到目标时，为停止状态
					if (iCur != json[attr]) {
						bStop = false;
					}
					if (attr == 'opacity') {
						obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ') ';
						obj.style.opacity = (iCur + iSpeed) / 100;
					} else {
						obj.style[attr] = iCur + iSpeed + 'px';
					}
				}
				//当为TRUE时，开关打开，如有回调函数，就使用回调函数
				if (bStop) {
					clearInterval(obj.timer);
					if (fn) {
						fn.call(obj)
					}
				}
			}, 30)
		}
		function getStyle(obj, attr) {
			if (obj.currentStyle) {
				return obj.currentStyle[attr];
			} else {
				return getComputedStyle(obj, false)[attr];
			}
		}

2 时间版，引用Tween.

<!doctype html>
<html>
<head lang="zh">
    <meta charset="utf-8">
    <title>灵域</title>
    <meta name="renderer" content="webkit">
    <script>
   //t 时间变化量time，B初始量 begin，C变化量change，D，时间duraction
		var Tween = {
                        linear:function(t,b,c,d){
				return t*c/d+b;
			},
			easeIn:function(t,b,c,d){
				return c*(t/=d)*t+b;
			}

		}

    	function move(obj, json,times,fx, fn) {

			clearInterval(obj.timer);

			var iCur = {};

			var startTime = now();

			for(var attr in json){

				if (attr == 'opacity') {

						iCur[attr] = parseInt(parseFloat(getStyle(obj, attr)) * 100);

					} else {

						iCur[attr] = parseInt(getStyle(obj, attr));
					}

			}

			obj.timer = setInterval(function() {

				var changeTime = now();

				//

			    var t = times  - Math.max(0,startTime- changeTime+times);

				for (var attr in json) {

					var value = Tween[fx](t,iCur[attr],json[attr]-iCur[attr],times);

					//console.log(value);
					
					if (attr == 'opacity') {

						obj.style.filter = 'alpha(opacity=' + value + ') ';

						obj.style.opacity = value / 100;

					} else {

						obj.style[attr] = value + 'px';
					}
				}

				if (t==times) {

					clearInterval(obj.timer);

					if (fn) {

						fn.call(obj)
					}
				}

			}, 13)
		}


		function getStyle(obj, attr) {

			if (obj.currentStyle) {

				return obj.currentStyle[attr];

			} else {

				return getComputedStyle(obj, false)[attr];
			}
		}


		function now(){

			return new Date().getTime();
		}

		window.οnlοad=function(){

			var oDiv = document.querySelector('#div1');

			oDiv.οnmοuseοver=function(){

				move(this,{left:800},2000,'easeIn',function(){
					alert(1);
				})

			}



		}
    </script>
<style>
#div1{width:100px; height:100px; background:green; border:1px solid #000;position: absolute;left:400px; top:80px;}

</style>
</head>
<body >
<div id="div1"></div>
</body>
</html>