用HTML5CSS3实现媲美原生应用的交互体验_尤雨溪

1尤雨溪微博@尤小右用HTML5/CSS3实现媲美原生应用的交互体验2整体架构CSS3Transform&Transition多点触控API滑块PuzzleDemo3摆脱“这是一个网页”的设计思维4UI框架jQueryMobileSenchaTouchjQTouch...5基于服务器端的MVC框架(RubyonRails,Django,CodeIgniter,Yii...)vs.基于客户端的框架(Backbone.js,Ember.js,Spine.js...)用MVC理念开发javascript前端应用6后台只是API界面的生成转移到终端7根据应用的重量级选择适合的架构8Backbone.jsroutermodelsviewstemplates9前端模版语言JohnResig’sMircoTemplateejs-embeddedjavascript{{Mustache}}HandlebarsJadeHaml10模块化YUI3Require.jsSea.js自定义编译脚本11//定义一个模块one.jsdefine([“libs/underscore”,“libs/backbone”],function(_,Backbone){...return{//此模块的API};});//在主文件里调用此模块require([“one”],function(one){...});Require.js简单例子12或者你也可以什么都不用。13CSS3Transform&Transition14CSS3Transform&Transitiontransform:functionrotate(ndeg)rotateX(ndeg)rotateY(ndeg)rotateZ(ndeg)translate(xpx,ypx)translateX(xpx)translateY(ypx)translate3d(xpx,ypx,zpx)scale(n)scaleX(n)scaleY(n)skew(n)skewX(n)skewY(n)matrix(a,c,b,d,tx,ty)15CSS3Transform&Transitiontransform-origin50%050%100%16CSS3Transform&Transitiontransition:propertydurationtiming-functiondelay例子：transition:all1slinear;/*用all属性的时候要谨慎*/transition:color.3sease-in-out;transition:transform0scubic-bezier(0,0,0.2,1);17CSS3Transform&Transitiontransitioneasingfunctionlineareaseease-inease-outease-in-outcubic-bezier(x1,y1,x2,y2)18CSS3Transform&Transitioncubic-bezier(x1,y1,x2,y2)19CSS3Transform&Transition.drag{transition:transform0scubic-bezier(0,0,0.2,1);}20CSS3Transform&Transition强制硬件加速translate3d(x,y,z)或者任何只适用于3D的属性，比如-webkit-perspective-webkit-backface-visibility21HTML5MultiTouchAPI22HTML5MultiTouchAPI3种基本事件touchstarttouchmovetouchendmousedownmousemovemouseup*click事件是通用的23HTML5MultiTouchAPI事件对象$(document.body).on(„touchstart‟,function(e){console.log(e.touches[0].pageX);});e.touches=一个包含touch对象的数组e.touches.length=当前触摸点的数量e.touches[0]=第一个触摸点24HTML5MultiTouchAPI事件对象e.touchese.targetTouchese.changedTouches更多兼容性细节://puzzle.youyuxi.com作者:ThomasFuchs(script.aculo.us作者，Prototype.js团队核心成员)针对移动端轻量化的jQuery27LESS给CSS加上嵌套，变量，运算和Mixin让你写出更模块化，更易维护的CSS支撑TwitterBootstrap的核心技术28PuzzleDemo$(document).ready(function(){PUZZLE.init(document.body);});29PuzzleDemovarPUZZLE=(function($,window,undefined){//在此闭包中干活...//对外暴露APIreturn{init:function(container){//初始化代码}};})(Zepto,window);30PuzzleDemo//要用到的一些变量varanimating=false,tileSize=72,animationSpeed=150,setTimeout=window.setTimeout;31PuzzleDemo//一个简单的容纳HTML模版的对象//一个模版其实就是一个返回HTML字符串的函数vartemplates={board:...,tile:function(id){return„...‟;},shuffleButton:...};32PuzzleDemo//Utilityfunction//返回一个可以用在$().css()里面的CSS对象varcssTransform=function(x,y){vartranslation='translate('+x+'px,'+y+'px)';return{'-webkit-transform':translation,'-moz-transform':translation,'-ms-transform':translation,'-o-transform':translation,'transform':translation};};33PuzzleDemo//滑块对象varTile=function(id,board){this.id=id;this.board=board;this.render();};Tile.prototype={render:function(){...},update:function(position){...},getMovableDirection:function(){...},getNeighbor:function(direction){...}};34PuzzleDemo//滑块对象的render()方法render:function(){this.el=$(templates.tile(this.id));}35PuzzleDemo//滑块对象的update()方法update:function(position){this.position=position;this.x=(position%4)*tileSize;this.y=~~(position/4)*tileSize;this.el.data('position',position).css(cssTransform(this.x,this.y));}36PuzzleDemo//底板对象varBoard=function(){this.buildTiles();this.shuffle();this.render();this.update();};Board.prototype={buildTiles:...,shuffle:...,render:...,initEvents:...,update:...,...};37PuzzleDemo//在底板对象上委托事件处理initEvents:function(){varboard=this,touch={};board.el.delegate('.tile','touchstartmousedown',function(e){...}).delegate('.tile','touchmovemousemove',function(e){...}).delegate('.tile','touchendmouseup',function(e){...});}