动画效果之时间轴对象构造器（即逐个执行动画）

你的名字 2024-04-19 07:13 84阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>时间轴对象的测试</title>
    		<style type="text/css">
    			div { 
    				width: 100px;
    				height: 100px;
    				background: pink;
    			}
    
    			.change1 { 
    				width: 300px;
    				background: blue;
    				/* transition: width 3s; *//* 仅仅width过渡变化 */
    				/* 过渡效果，在三秒内，咋change1中的所有变化三秒完成 */
    				transition: all 3s;
    
    			}
    
    			.change2 { 
    				height: 300px;
    				background: yellow;
    				transform: translate(100px, 100px);
    				/* 样式变换位置，同样三秒执行完毕 */
    				transition: all 3s;
    			}
    		</style>
    	</head>
    	<body>
    		<h5>效果为：在2s之后开始执行change1，用时3s，执行过后<br>
    			即在5s后执行change2，用时3s，整个动画用时8s
    		</h5>
    		<div id="demo" class=""></div>
    		<script type="text/javascript">
    			var TimeLine = function() { 
    				this.order = []; //动画序列
    				//几秒后执行,执行的函数,日志
    				this.add = function(timeout, func, log) { 
    					//给动画序列赋值,以便调用
    					this.order.push({ 
    						timeout: timeout,
    						func: func,
    						log: log
    					})
    
    					//调用动画序列
    					this.start = function(ff) {  //支持快进
    						for (s in this.order) { 
    							(function(me) {  //匿名函数,后面括号内的参数相当于传参,执行
    								var fn = me.func; //相当与 this.order[s].func
    								var timeout = me.timeout;
    								var log = me.log;
    
    								timeout = Math.max(timeout - (ff || 0), 0); //即不能最小为0;ff默认0
    								setTimeout(fn, timeout)
    								setTimeout(function() {  //可不写，就是看下传递的参数
    									console.log('time=>', timeout, 'log=》', log)
    								}, timeout)
    							})(this.order[s]) //执行每一次的结果,如果不是自执行函数,呢么只会返回最候一个内容
    							//即最后的结果是执行每一次定时器
    						}
    						console.log(this.order)
    
    					}
    				}
    			}
    
    			//执行过程
    			//1,定义一个对象
    			var demo = new TimeLine();
    			var id=document.getElementById("demo")
    			
    			//2,添加必要属性
    			demo.add(2000,function(){ 
    				id.className="change1";
    			},'这是是第一个动画，下面是第二个动画')
    			demo.add(5000,function(){ 
    				// id.className="change1 change2";
    				id.classList.add("change2");//一样的效果
    			})
    			
    			//3,开始执行
    			// demo.start(2000);//在两秒后执行
    			demo.start();
    		</script>
    	</body>
    </html>

### 进阶，简化代码 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>时间轴对象的封装</title>
    		<style type="text/css">
    			div { 
    				width: 100px;
    				height: 100px;
    				background: pink;
    			}
    
    			.change1 { 
    				width: 300px;
    				background: blue;
    				transition: all 3s;
    
    			}
    
    			.change2 { 
    				height: 300px;
    				background: yellow;
    				transform: translate(100px, 100px);
    				/* 样式变换位置，同样三秒执行完毕 */
    				transition: all 3s;
    			}
    		</style>
    	</head>
    	<body>
    		<h3>效果为：在2s之后开始执行change1，用时3s，执行过后<br>
    			即在5s后执行change2，用时3s，整个动画用时8s<br>
    			也可以跳转到指定时间开始执行
    		</h3>
    		<div id="demo" class=""></div>
    		<script type="text/javascript">
    			/* Timeline函数是时间轴函数，即逐个播放动画 success public @param fn obj 触发的函数 @param skiptime num 跳转到几秒开始 @param time num 几秒后开始 @param comment str 注释 return void */
    			function TimeLine(obj) { 
    				obj.fn = obj.fn || function() { };
    				obj.skipTime = obj.skipTime || 0;
    				obj.time = Math.max(obj.time - obj.skipTime) || 0;
    				obj.comment = obj.comment || '注释';
    
    				var arr = [];
    				arr.push({ 
    					time: obj.time,
    					fn: obj.fn,
    					comment: obj.comment,
    					skipTime: obj.skipTime
    				})
    				for (var key in arr) { 
    					(function() { 
    						setTimeout(arr[key].fn, arr[key].time)
    						setTimeout(function() { 
    							console.log('时间在' + arr[key].time + '秒开始播放;触发的函数为 \n' 
    										+ arr[key].fn + ';直接跳转到' + arr[key].skipTime + 
    										'秒；注释：' +	arr[key].comment)
    						}, arr[key].time)
    					})(arr[key])
    				}
    				// console.log(arr)
    			}
    			TimeLine({ 
    				time: 2000,
    				fn: function() { 
    					demo.classList.add("change1");
    				},
    				comment: '这是第一个过程的动画'
    			})
    			TimeLine({ 
    				time: 5000,
    				fn: function() { 
    					demo.classList.add("change2");
    				},
    				comment: '这是第二个过程的动画'
    			})
    		</script>
    	</body>
    </html>