JavaScript 多个属性一起变化

矫情吗；* 2022-07-13 09:09 137阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<title>运动效果</title>
    		<meta charset="utf-8" />
    	</head>
    		<style>
    			div {
    				width: 150px;
    				height: 150px;
    				background: aliceblue;
    				opacity: 1;
    				border-radius:75px;
    			}
    		</style>
    		<script>
    			window.onload = function(){
    				var oDiv = document.getElementsByTagName('div')[0];
    				oDiv.onclick = function(){
    					mixedAnimation(this,{"width":500,"height":500,"opacity":0.5,"border-radius":250},2000);
    				}
    				function mixedAnimation(obj,options,time)
    				{
    					//记录所有的起始属性
    					var start = [];
    					//记录所有属性的变量量
    					var delta = [];
    					//循环遍历 
    					for (var name in options) {
    						//将所有的起始属性，保存在start[]数组中
    						start[name] = parseFloat(getStyle(obj,name));
    						//将所有属性的变化量，保存在delta[]数组中
    						delta[name] = options[name] - start[name];
    					}
    					//计算变换的总次数（向上取整）
    					var total = Math.ceil(time/30);
    					//记录现在的变换次数是哪一次
    					var count = 0;
    					
    					var timer = setInterval(function(){
    						//记录 变化次数	
    						count++;
    						for (var name in options) {
    							//定义unit
    							var unit = 'px';
    							if(name == 'opacity') {
    								unit = '';
    							}
    							//如果是最后一次变化
    							if (count == total) {
    								obj.style[name] = options[name] + unit;
    							} else {
    								obj.style[name] = start[name]+delta[name]*count/total + unit;
    							}
    						}
    						if (count == total){
    							clearInterval(timer);
    							timer = null;
    						}
    					
    					},30);
    					
    				}
    				function getStyle(obj, attr)
    				{
    					if (typeof(obj.currentStyle) == 'undefined') {
    						return getComputedStyle(obj,null)[attr];
    					}
    					return obj.currentStyle[attr];
    				}	
    			}
    		</script>
    	<body>
    		<div></div>
    	</body>
    </html>