-

H5融媒体设计与制作大赛

比赛专用框架

比赛时是不允许自己带u盘进去,因此只能将框架代码记忆下来,进入以后可在准备阶段将代码写下来,在比赛开始时,将框架代码通过主办方提供的u盘传给队友,以便分工完成不同的场景分片。框架以Application为核心,Scene为选手需要完成的内容,交互动画则需要自己在css中设定好,或者在Scene中自己灵活去改变。框架示例如下:

window.onload = function() {
	var app = Application()

	app.scenes = [
		Scene1(app),
	]

	app.run()

}

var log = console.log.bind(console)

var $ = function(sel) {
	var s = document.querySelectorAll(sel)
	return s.length > 1 ? s : s[0]
}

var Application = function() {
	var o = {
		scenes: [],
		scene: null,
		w: window.innerWidth,
		h: window.innerHeight,
		dragable: true,
		moved: false,
		current: 0,
		start: 0,
		end: 0
	}

	o.setup = function() {
		o.scene = $(".scene")
		window.addEventListener("resize", function() {
			o.w = window.innerWidth
			o.h = window.innerHeight
		})
		window.addEventListener("touchstart", function(e) {
			o.start = e.targetTouches[0].clientY
		})
		window.addEventListener("touchmove", function(e) {
			o.end = e.targetTouches[0].clientY
			o.moved = true
		})
		window.addEventListener("touchend", function(e) {
			// 1、阻止时间冒泡
			e.stopPropagation()
			e.stopImmediatePropagation()
			// 2、计算位移量的绝对是值是否超过
			var moveY = o.end - o.start
			var abs = Math.abs(moveY)
			var overBorder = abs >= o.h * 0.2
			if(o.dragable && o.moved && overBorder) {
				if(moveY > 0) {
					o.goBackScene()
				} else {
					o.goNextScene()
				}
			}
		})
		return o
	}

	o.run = function() {
		var s = o.scenes[o.current]
		s && s.run && s.run()
	}

	o.replace = function() {
		var p = o.current * o.h
		o.scene.style.transform = "translateY(" + -p + "px)"
		o.dragable = false
		o.run()
	}

	o.ready = function() {
		o.dragable = true
	}

	o.goBackScene = function() {
		var next = o.current - 1
		o.current = next < 1 ? o.current : next
		o.replace()
	}
	o.goNextScene = function() {
		var next = o.current + 1
		o.current = next >= o.scenes.length ? o.current : next
		o.replace()
	}

	return o.setup()
}

var Scene1 = function(app) {
	var o = {
		progress: 0
	}

	o.run = function() {
		var p = document.querySelector(".progress")

		var timer = setInterval(function() {
			o.progress += Math.random() * 10 + 2;

			if(o.progress >= 100) {
				o.progress = 100
				clearInterval(timer)
				setTimeout(function() {
					app.goNextScene()
				}, 400)
			}
			p.innerText = Math.floor(o.progress) + "%"

		}, 400)

	}

	return o
}

var Scene2 = function() {
	var o = {
		current: 0,
	}
	o.setup = function() {
		var doms = $('.hidden')
		var domAction = function(event) {
			o.current += 1
			var dom = doms[o.current]
			// classList es5方法 
			dom && dom.classList.remove('hidden')
		}
		for(var i = 0; i < doms.length; i++) {
			doms[i].addEventListener('transitionend', domAction)
			doms[i].addEventListener('webkitTransitionEnd', domAction)
		}
		doms[0].classList.remove('hidden')

	}
	o.run = function() {
		o.setup()
	}
	return o
}

参与推荐步骤

1、在进入赛场时,首先完成框架的编写。
2、完成整个项目的目录、文件等准备工作。
3、比赛开始时,首先将任务一、任务二的任务书分开,一人研究任务一,两人研究任务二,任务二的队员将任务二的场景分配好后完成下一步。
4、一个队友完成切图工作,另一个队友完成加载界面的Scene编写,等待队友将加载界面图切完,将第一个场景完成。
5、接着按照分工分别完成场景布局和逻辑代码的编写。
6、预留半个小时以上的时间进行代码合并,检查内容是否正确,这个时间越长越好,以防出现bug。不管如何都要先将一份完成的放入u盘,就算有bug也要放,因为比赛时间到了是需要离桌的。


0/255

tric

给你带个狗头