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

<!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>
posted @ 2022-04-02 09:48  coderwcb  阅读(45)  评论(0)  编辑  收藏  举报