小米笔记本Air评测：忧喜参半
今年的PC界，整体上有两个特点：疲软、混乱。
产品性能过盛，几年前的电脑在今天用起来依旧顺畅，移动智能设备的发展也令PC的用途范围发生缩减，上游的大哥大们缔造了这样一个局面，而事到如今他们之中有人早不得不已忍受副作用&&产品性能不再是瓶颈，个人电脑逐渐变成了个性消费品，只有具备特殊需求的用户才会去买新机，普通人则缺乏更新PC的动力。
那么，在这个局面之下，有没有可能存在一种解决方案，它让普通消费者能够在诱人的价位上获得产品性能的提升，也让新类型的用户能够获得充分张扬个性的条件？
老话说：鱼和熊掌没法兼得。具体到笔记本电脑这个领域，此说法在PC整机行业似乎更是亘古不变，但凡高性价比几乎必然没有高设计品位，但凡高设计品位几乎必然价格高高在上。对此，&勤劳勇敢&&充满智慧&的中国人民是看不过眼的，于是就有了小米笔记本，在产品层面上，它满足一些苛刻要求，而价格很便宜。
外围厂牌进入PC市场，这样的事件在今年已经不是第一遭。这类事件，其前景很难被业界看好，毕竟如今PC产业整体下滑之趋势相当明显。小米笔记本固然有备而来，其明确指向细分市场的方针是不言而喻的。然而，PC作为最为普及的IT产品之一，目前在部署量和性能合格率方面都非常饱满，究竟开拓怎样的细分需求才能扩大营业？特别是对于小米这样的新晋厂牌来说，小米笔记本Air在产品层面和其它各方面是否能够在真正意义上为PC行业提供一针兴奋剂？这很难估计，要想预测个大概，我们就先来看看这产品吧。
您可能也感兴趣:&&&&&&&&&&&&
官方微博/微信
每日头条、业界资讯、热点资讯、八卦爆料，全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb官方微博期待您的关注。
↑扫描二维码
想在手机上看科技资讯和科技八卦吗？想第一时间看独家爆料和深度报道吗？请关注TechWeb官方微信公众帐号：1.用手机扫左侧二维码；2.在添加朋友里，搜索关注TechWeb。
小米笔记本
小米笔记本air
小米笔记本Air评测
小米笔记本Air怎么样
小米笔记本价格
相关的资讯有：
小米笔记本
小米笔记本air
小米笔记本Air评测
小米笔记本Air怎么样
小米笔记本价格
相关的博文有：
本周最推荐
失眠是很多人都会经历过的痛苦的...
投影机升级激光光源之后，进入这个市场的品牌多了起来，并且很多原有品牌也开始在激光光源的时代布局新的市场。比如原本工程投影...
Copyright (C)
All rights reserved.
请选择一张图片分享
要转发到新浪微博，请
要转发到QQ空间，请比特客户端
您的位置：
详解大数据
详解大数据
详解大数据
详解大数据
小米笔记本的庐山真面目！性能党真要哭了
小米 小米笔记本
　　世界上除了飞机大炮，真的没有小米不敢造的。从到电视，小米的产品几乎涵盖了生活中所有的智能硬件门类。除了飞机大炮，没有雷布斯不敢造的。而有关小米的消息一直沸沸扬扬，让各位看官雾里看花、水中望月，丈二和尚摸不着头脑。
　　世上没有不透风的墙，随着小米挖来了曾担任Idea产品的集团副总裁魏骏等消息被逐渐揭开，米本终于有了消息。目前最新的消息显示，小米笔记本可能会于明年首季度正式量产，由英业达、仁宝分食订单，笔记本将分12.5英寸和13.3英寸两款。价格虽然诱人，但是追求发烧性能的伙伴们也许会失望了。
　　轻薄办公本
　　小米笔记本两个可能的产品方向，一是二合一形态的变形本，一是传统形态笔记本。许多人猜测小米笔记本会走“游本”路线，通过发烧的性能和堪称屠夫的价位震撼市场。鉴于目前游戏本很流行，所以这样猜测看起来很有道理。
　　但是看完小米笔记本的尺寸之后，小编可以告诉你，小米笔记本注定是一款轻薄本，性能强劲之流。12英寸和13英寸一直是轻薄本的御用尺寸，尽管有很多的小尺寸笔记本性能强大，代价是极为高昂的价格。以Dell的外星人系列为例，13英寸的版本价格高达1.1万元，这显然和小米追求性价比的思路不符合。
　　另外，轻薄本这几年正大行其道，Surface 销量逐步攀升， Pro 与 Pixel C 的面世都直接证明了二合一产品的市场潜力。国产OEM厂商也借着 Core M 的东风大力发展二合一设备。最新推出的 Surface book 已经被认定为是大屏设备的标杆，加外接键盘的模式已经被认定为未来windows的标准模式。
　　小米想要借着这股东风一展拳脚就不足为奇了，它擅长的就是移动设备，又有 MIUI 平板系统和小米云服务可以直接拿来用，做二合一笔记本可以说是轻车熟路。所以说，指望小米笔记本可以爽玩英雄联盟的各位可以歇歇了，这款设备终究是一个生产力设备，而且价格很便宜，据传不会超过4000元。
　　怎样的轻薄本才是好本
　　对于小米笔记本如何呈现，相信只有雷布斯心里面有答案。如果非要为小米笔记本定义一个标准，小编觉得首先一点是需要一块全高清的触摸屏幕。笔记本和平板、手机操纵体验最大的不同是输入设备，大尺寸的触摸屏显然更符合未来笔记本设备的发展方向，如果还是采用传统本的屏幕，就意味着小米笔记本还没有推出就已经过时了。
　　至于配置，据中国家报道，雷军现身意外“中国30周年庆典”。在满场PC和智能硬件的合作伙伴中，小米是为数不多的手机厂商代表。对于为何为英特尔捧场，雷军表示：“小米和英特尔目前有很多合作，有的能说有的不能说。”小米在之前从未和英特尔展开合作，此次露面显然是为了小米笔记本做准备。
　　英特尔最近几年在方面并无建树，但是在移动cpu方面有了长足的进步。其系列芯片已经能够流畅的运行windows10，并且非常省电，可以帮助产品的续航时间顺利的突破4个小时。小编推测，小米最有可能采用英特尔i5 u系列芯片，这样才能在相同的价格上面完虐对手。
　　有传言说小米将采用系统，小编觉得这个不靠谱。据小编所知，Linux所以分支之中，只有安卓和乌班图对触摸的支持较好，但是二者在软件拓展性较差，不适合当作生产力设备。小编在这里作出推测，未来的小米平板的形态应该是这样的：采用全高清的触摸屏幕，有着 air的轻薄外观，以及强大的cpu和最新的windows系统。
[ 责任编辑：郭文 ]
去年，手机江湖里的竞争格局还是…
甲骨文的云战略已经完成第一阶段…
软件信息化周刊
比特软件信息化周刊提供以数据库、操作系统和管理软件为重点的全面软件信息化产业热点、应用方案推荐、实用技巧分享等。以最新的软件资讯，最新的软件技巧，最新的软件与服务业内动态来为IT用户找到软捷径。
商务办公周刊
比特商务周刊是一个及行业资讯、深度分析、企业导购等为一体的综合性周刊。其中，与中国计量科学研究院合力打造的比特实验室可以为商业用户提供最权威的采购指南。是企业用户不可缺少的智选周刊！
比特网络周刊向企业网管员以及网络技术和产品使用者提供关于网络产业动态、技术热点、组网、建网、网络管理、网络运维等最新技术和实用技巧，帮助网管答疑解惑，成为网管好帮手。
服务器周刊
比特服务器周刊作为比特网的重点频道之一，主要关注x86服务器，RISC架构服务器以及高性能计算机行业的产品及发展动态。通过最独到的编辑观点和业界动态分析，让您第一时间了解服务器行业的趋势。
比特存储周刊长期以来，为读者提供企业存储领域高质量的原创内容，及时、全面的资讯、技术、方案以及案例文章，力求成为业界领先的存储媒体。比特存储周刊始终致力于用户的企业信息化建设、存储业务、数据保护与容灾构建以及数据管理部署等方面服务。
比特安全周刊通过专业的信息安全内容建设，为企业级用户打造最具商业价值的信息沟通平台，并为安全厂商提供多层面、多维度的媒体宣传手段。与其他同类网站信息安全内容相比，比特安全周刊运作模式更加独立，对信息安全界的动态新闻更新更快。
新闻中心热点推荐
新闻中心以独特视角精选一周内最具影响力的行业重大事件或圈内精彩故事，为企业级用户打造重点突出，可读性强，商业价值高的信息共享平台；同时为互联网、IT业界及通信厂商提供一条精准快捷，渗透力强，覆盖面广的媒体传播途径。
云计算周刊
比特云计算周刊关注云计算产业热点技术应用与趋势发展，全方位报道云计算领域最新动态。为用户与企业架设起沟通交流平台。包括IaaS、PaaS、SaaS各种不同的服务类型以及相关的安全与管理内容介绍。
CIO俱乐部周刊
比特CIO俱乐部周刊以大量高端CIO沙龙或专题研讨会以及对明星CIO的深入采访为依托，汇聚中国500强CIO的集体智慧。旨为中国杰出的CIO提供一个良好的互融互通 、促进交流的平台，并持续提供丰富的资讯和服务，探讨信息化建设，推动中国信息化发展引领CIO未来职业发展。
IT专家新闻邮件长期以来，以定向、分众、整合的商业模式，为企业IT专业人士以及IT系统采购决策者提供高质量的原创内容，包括IT新闻、评论、专家答疑、技巧和白皮书。此外，IT专家网还为读者提供包括咨询、社区、论坛、线下会议、读者沙龙等多种服务。
X周刊是一份IT人的技术娱乐周刊，给用户实时传递I最新T资讯、IT段子、技术技巧、畅销书籍，同时用户还能参与我们推荐的互动游戏，给广大的IT技术人士忙碌工作之余带来轻松休闲一刻。
微信扫一扫
关注Chinabyte&小米笔记本电脑详情
小米笔记本电脑详情
选择轻薄，还是选择性能？如果只强调性能，就没有容纳了一块 13.3'屏幕和全尺寸键盘，却够轻够薄的全金属机身。如果只追求轻薄，就没有快3倍的硬盘，快了15%的内存，更不会有让游戏性能提升至2.1倍的独立显卡。轻薄、高性能外还有更多创新，全贴合技术、无边式玻璃、双天线&WiFi…选择轻薄，还是选择性能，我们选择小米笔记本Air，做高性能的轻薄笔记本＊。轻薄全金属机身做高性能的轻薄笔记本笔记本内存硬盘更快，键盘屏幕更大，13.3' 配备独立显卡，再谈轻薄是否异想天开？高度定制的元器件让主板更精密，全贴合技术让屏幕更纤薄，高密度电池技术则让电量不减，电池体积更小。一系列创新让笔记本兼具性能与轻薄，还有漂亮的全金属机身，你可以随时单手拿起它，或放到任何电脑包里。12.5' 集成显卡13.3' 独立显卡全高端配置做轻薄本中的高性能本小米追求性能，即使面对轻薄，我们依然坚持。对性能的坚持，让轻薄笔记本不止用来上网或办公，甚至能用来创作、编辑视频或玩大型游戏。更快的英特尔第六代处理器，更快的DDR4内存，更快的PCIe固态硬盘，更快的独立显卡和更快的GDDR5显示内存，有了这样的全高端配置，你终于不必再纠结选择轻薄本还是性能本。2.1倍18%不是所有的轻薄本都有独立显卡我们极少见到轻薄本配备独立显卡，但这并非不可能。通过为笔记本配备一个单独的图形处理器，专门处理图像及3D游戏，让游戏性能提升至2.1倍。高清逼真的画面，流畅的动画，让你在喜爱的游戏中流连忘返。GeForce 940MX1GB GDDR5英特尔&酷睿(TM)i5处理器英特尔第六代酷睿i系列处理器相比上一代速度提升18%之多，功耗却大大降低强大的性能甚至可用来进行4K视频剪辑。13.3'版本标配英特尔&酷睿(TM)i5处理器，也可选择配备英特尔&酷睿(TM)m系列的12.5'版本，更加安静省电。酷睿 i52.7GHz全贴合与超窄边这个全高清屏有点不一样分辨率高达，清晰度是24'桌面显示器的1.8倍。相同的1080p分辨率显示效果并非一样：小米笔记本屏幕边框更窄，仅为5.59mm，屏幕占比更高。无边式保护玻璃，四周不再有凸出的边框，让你使用时更加专注。一种叫全贴合的技术，将屏幕组件间的空气层缩减4倍，减少空气折射引发的眩光，让你在室内室外都有出色的显示效果＊。1920 x 10807H硬度，无边式玻璃5.59mm 超窄边框高能量密度大电池这么轻薄机身更轻薄，待机却更持久，这科学吗？这是因为采用了一种能量密度更高的电池，高达578Wh/L的能量密度，让电池体积缩小，电量却丝毫不减，带来9.5小时的续航时间。支持1C快充技术，半小时就能充一半电量。待机久，充电快，无论旅途或家中，你都可以随时随地使用＊。11.5h9.5h环绕立体声AKG 扬声器，来自奥地利的艺术之声我们知道你喜欢音乐和电影，所以对于笔记本的扬声器也不敢含糊，邀请来自奥地利的音响品牌AKG，为小米笔记本定制扬声器。在精心调校2个高音质喇叭同时，对低音进行了适当增强，配合Dolby Audio(TM)&Premium环绕音效技术，让你获得更好的音乐、游戏、电影音质。丰富的接口现在多了一个USB-C新一代高端笔记本已经开始选择USB-C，小米笔记本也不例外。一个接口，兼具充电、视频输出、数据传输多种用途，你还可以使用配件进行扩展。除了USB-C，还具备全尺寸HDMI、2个 USB3.0以及耳机接口。丰富的接口，让你甚至能够连接两台4K显示器进行工作。聪明的适配器，让笔记本更加强大有了它，你的电脑接口扩展了1.5倍！HDMI接口扩展至2个，USB接口扩展至3个。更多专业设备都能连接到小米笔记本上，例如，你可以拥有3个显示屏，外接移动硬盘。免密码解锁小米手环,你的电脑密码最快输入密码的方式，就是免输密码，让小米手环2成为你的密码吧。佩戴小米手环2 打开电脑，无需任何操作，电脑就已经安全解锁。除了轻薄与高性能，小米笔记本还有许多创新，手环解锁就是其中一项。功能亮点你的小米笔记本，越用越喜爱小米笔记本的创新源自点点滴滴：相同的轻薄，不同的全金属机身。相同的固态硬盘，不同的高速接口。相同的8GB内存，不同的DDR4标准。相同的千兆WiFi，不同的双天线设计。相同的全高清屏幕，不同的全贴合工艺…点点滴滴的创新，就是为了更轻、更快、更流畅、更清晰，这是我们的笔记本，饱含了我们的诚意。GDDR5PCIe SSDDDR4无边式玻璃全尺寸键盘多点触控环绕音效双 4K 输出2X2 WiFi小米笔记本Air 12.5'更轻更薄，像杂志一样随身携带电脑能像杂志一样随身携带吗？对于小米笔记本Air 12.5'&这是理所当然。屏幕有12.5'之大，尺寸却仅如时尚杂志般大小，它比13.3'版本轻16%，甚至还要薄12%。轻薄同时，它仍然是12.5'左右笔记本中的高端配置，保留了齐全的接口，同时也更安静省电。更轻更薄11.5小时超长续航静音无风扇设计12.5'笔记本高端配置
相关专题推荐
支付与账户
扫描下载国美Plus
扫描下载客户端
国美在线电子商务有限公司&&办公地址:上海市嘉定区沪宜公路号一楼A区&&客服电话:&&|&&本公司游戏产品适合18岁以上成年人使用
(C)&&国美在线电子商务有限公司版权所有&&京公安网备62&&沪ICP备号&&沪B2-号小米笔记本参数再曝：谁说要上阿童木？
　　【PConline资讯】小米将于7月27日举办发布会推出其笔记本产品的消息前几天就已经传的沸沸扬扬，虽然一直都说&小米笔记本&，但去实际上是由小米生态链企业田米科技出品。从注册信息看，北京田米科技有限公司是2015年7月份注册的，今年3月份通过核准运营，注册资本100万元。　　据悉，小米笔记本将有11寸、13寸两款型号，分别由英业达、纬创代工，据说分别面向办公和游戏。外观方面，小米笔记本会和苹果MacBook Air十分相似，但目前高端笔记本所推崇的Thunderbolt雷电接口不会出现，充电器是类似于华为MateBook笔记本的USBType-C类型，最大充电功率65W(20V/3.25A)。　　至于大家关注的硬件配置部分，之前的消息称小米笔记本会采用IntelAtom处理器，不过最新爆料推翻了这一说法。小米笔记本将会采用低压低功耗的IntelSkylake-U系列处理器，其中高配版采用Core&i7-6500U(双核四线程2.5-3.1GHz/HD520/TDP15W)，8GB内存，不支持触控。低配版应该是同类型的Core&i5-6300U不太可能是Atom，这也保证了其整体性能表现将不会出现大的断层。编辑有话说：　　其实小米要出笔记本这事儿在华为MateBook亮相之前就已经出现了，至于说为什么现在才到来，那得去问雷军了。就目前得到的有关小米笔记本的消息，外观部分到是没有什么出人意料的，毕竟&雷布斯&，与MacBook Air长得像也是情理之中的。硬件部分这几天大家吵得比较火，大多围绕在处理器部分。实话来讲，作为小米的第一代笔记本，个人而言，应该不会上阿童木，有悖小米一贯追求的超高性价比的宗旨。当然这一切在发布会到来之前纯属猜测，它到底如此，只有时间来证明了。
笔记本论坛帖子排行
最新资讯离线随时看
聊天吐槽赢奖品刚开始经营博客的时候，我写过不少&扒皮&系列的文章，主要介绍一些知名站点上有趣的交互效果，然后试着实现它们。后来开始把注意力挪到一些新颖的前端技术上，&扒皮&系列便因此封笔多时。今天打算重开&扒皮&的坑，不过咱挂个优雅点的名字&&&优秀网站看前端&，顾名思义的，也是寻觅一些值得玩味的趣味网站，来学习它们的前端技术和交互理念。
作为本系列的开篇，我们拿&买手机送国土&的小米来打头阵，缘由是鄙人有着更换手机的打算又刚好看上小米note高配版，于是逛了下小米note的介绍页面，感觉交互做的挺不错，特别是CSS3动画部分，不妨就直接写篇文章和大家一同来学习和分享。
小米note的介绍页面地址如下，大家可以先去领略它的交互效果：
该网站首先吸引我的是其在标题头等地方使用的字体，由于本身也喜欢搞设计，所以一眼就注意到这两行细体字绝非宋体黑体和雅黑，check了一下，字体名为FZLTXHK（也就是方正兰亭纤黑体）：
会不会有点小诧异，常规我们是很不推荐在网页上通过font-face来引入第三方中文字体的，毕竟一个完整的中文字体包常规都是好几M的大小，一来得让客户端花时间请求、浪费用户流量，二来会造成页面字体效果切换的闪动（FOUT&&flash of unstyled text）现象。
小米作为一个注重用户体验的公司，相信也不会做这么不合常理的事情（喂，没打算聊国土啊喂）。那么字体这块，小米自然也是动了些手脚&&只封装了页面上需要使用到的文字。不信？你可以试着把用到第三方字体的标题内容更改为其它内容，你会发现很多文字是不被该字体所支持的：
那么小米的射鸡狮真是辛苦，每次修改页面都要手动打包新的字体，真是兢兢业业可歌可泣。。。。其实未然，毕竟现在不是刀耕火种的原始社会，我们可以直接请node包加持~
于是 && 这款工具可以粉墨登场啦（别乱用成语啊亲~）&&&字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
字蛛的使用方式在其官网上已经解释的很清楚了，本文不赘述，但先聊聊@font-face的匹配格式，也就是聊一聊WEB上常用的字体格式。
@font-face中引入的字体文件可以通过format方法来帮助浏览器匹配到对应的字体格式，常规各浏览器所支持的字体格式有如下几种：
一、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有（IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+）；
二、OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有（Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+）；
三、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有（IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+）；
四、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有（IE4+）；
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有（Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+）。
那么综上所述，一个@font-face只要匹配了.eot 和 其它某种字体（最好是.woff），就基本能在大多数浏览器上正常显示了。不过查看小米的样式（），它只匹配了.woff（也就是IE8-将降级为常规字体）。另外，小米将该字体文件以base64编码形式直接inline在css上，此举有个好处&&减少了一次文件请求，也能有效防止上文提过的FOUT现象。
不过这个base64怎么折腾出来的？或许小米用字蛛之类的工具获得字体压缩文件后，再通过某种方式（比如在转换）将其转为base64编码形式即可。
另外小米还使用了一个CSS3样式：
-webkit-font-smoothing:antialiased
该属性可以使页面上的字体抗锯齿，使用后字体看起来会更清晰舒服（特别适用于字号较小的文本内容）。
有三种可选值：
none | subpixel-antialiased | antialiased
它们的区别见下图：
transition动画
小米的页面到处都充满了视觉差滚动效果，有种随时给你小惊喜的感觉：
如上图的动画，是由transition实现的，大致步骤如下：
⑴ 给所有要动画的元素设置transition属性，比如 transition:transform 1s ；
⑵ 给所有动画元素添加一个class="visible" ，该class中定义了动画的最终状态；
⑶ 页面DOMReady的时候遍历所有动画元素（$(".visible")），检查它们是否还没被滚动条滚上来，如果还在窗口可视区域下方，则移除它们"visible"的class。该步骤主要是用于处理用户下拉页面到某个位置然后刷新页面，这时要求窗口可视区域及其上方的元素都应跳过动画的状态，直接到达动画最终状态；
⑷ 监听onscroll事件，移动到某个动画元素的位置时，则移除该元素名为"visible"的class。
我们可以粗略地写个场景和脚本来实现：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&动画模拟&/title&
&script src="jq.js"&&/script&
article,div{margin: 380px 0;border: solid 1px gray;}
article & section{width:50px;height:50px;background:red;transform: translate3d(-100px, -60px, 0);opacity: 0;transition: all .8s;}
article & section.visible {transform: translate3d(0, 0, 0);opacity: 1;}
div & span{background:blue;transform: scale(.2);opacity: 0;transition: all 2s;}
div & span.visible {transform: scale(1);opacity: 1;}
div & p {width:50px;height:50px;background:yellow;transform: translate3d(90px, 100px, 0);opacity: 0;transition: all 1.5s;}
div & p.visible {transform: translate3d(0, 0, 0);opacity: 1;}
$(function(){
var elmArr = [],
$win = $(window);
$(".visible").each(function(i,elm){
$(elm).data("ot",$(elm).offset().top);
elmArr.push(elm);
dealClass(1);
$win.on("scroll",dealClass);
function dealClass(isRemove){
var top = $win.height() + $win.scrollTop();
if(isRemove!=1) { //滚动页面时的判断，并添加class="visible"
for (var i = 0,$ i & elmArr. i++) {
$elem = $(elmArr[i]);
if ($elem.data("ot") &= top) {
$elem.addClass("visible");
elmArr.splice(i, 1);
//初始化页面时的判断，并删除class="visible"
for (var i = 0,$ i & elmArr. i++) {
$elem = $(elmArr[i]);
if ($elem.data("ot") &= top) {
$elem.removeClass("visible");
&section class="visible"&&/section&
&/article&
&span class="visible"&hello&/span&
&p class="visible"&&/p&
效果如下：
transition动画效果默认是线性展示的（linear），我们通过设置其timing-function属性可以让效果变得更灵活，比如这个效果：
此处的transition-timing-function属性被设置为&cubic-bezier(.15, .73, .37, 1.2) ，表示按照该贝塞尔曲线函数来执行动画（了解更多请）。
你可以试着把我们上方例子中的 transition:XXX 修改为：
&transition: transform 1.5s cubic-bezier(.15, .73, .37, 1.2),opacity 1s;
然后查看其效果：
如果在transition的最后加上一个时间单位，可以延迟触发动画效果。比如上面五个手机（5个&li&标签）是按顺序依次出来的，那么我们可以给第2个&li&设定0.2秒的延迟，给第3个&li&设定0.4秒的延迟，给第4个&li&设定0.6秒的延迟。。。
我们拿第2个&li&的transition来示例：
transition:transform 1s cubic-bezier(.15, .73, .37, 1.2) .2s;
由于在末尾写上了0.2s的transition-delay值，故第二个手机会相较第一个手机晚0.2秒执行动画。
animate动画
animate很适用于那些需要分段展示的，或者有周期性的非过渡性动画，比如双4G的介绍区域就使用了animate（该效果）：
该卡槽是由一个div（卡槽本身）内嵌一个span（最后淡入显示的镂空处文本）组成的，div触发动画时（跟transition一样加个触发class）直接从下往上显示（2s），而span虽然是同时被触发动画，但它延迟2s才执行，所以营造了&在div动画结束后，span才开始触发动画&的视觉效果。
我们照样拿前面的例子来修改：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&动画模拟&/title&
&script src="jq.js"&&/script&
body,html{height: 100%;}
@-webkit-keyframes ani-fade-in {
opacity: 0
opacity: 1
@keyframes ani-fade-in {
opacity: 0
opacity: 1
@-webkit-keyframes ani-fade-in-up {
-webkit-transform: translateY(100px);
opacity: 0
-webkit-transform: translateY(0);
opacity: 1
@keyframes ani-fade-in-up {
-webkit-transform: translateY(100px);
opacity: 0
-webkit-transform: translateY(0);
opacity: 1
article{margin: 500px 0;}
div{width:50px;height:50px;background:green;opacity: 0;}
div.visible{-webkit-animation:ani-fade-in-up 2s ease forwards;animation:ani-fade-in-up 2s ease forwards;}
div & span{background:blue;opacity: 0;}
div.visible & span {-webkit-animation:ani-fade-in 1s 2s ease forwards;animation:ani-fade-in 1s 2s ease forwards;}
$(function(){
var elmArr = [],
$win = $(window);
$(".visible").each(function(i,elm){
$(elm).data("ot",$(elm).offset().top);
elmArr.push(elm);
dealClass(1);
$win.on("scroll",dealClass);
function dealClass(isRemove){
var top = $win.height() + $win.scrollTop();
if(isRemove!=1) { //滚动页面时的判断，并添加class="visible"
for (var i = 0,$ i & elmArr. i++) {
$elem = $(elmArr[i]);
if ($elem.data("ot") &= top) {
$elem.addClass("visible");
elmArr.splice(i, 1);
if(i&0) $win.off("scroll",dealClass);
//初始化页面时的判断，并删除class="visible"
for (var i = 0,$ i & elmArr. i++) {
$elem = $(elmArr[i]);
if ($elem.data("ot") &= top) {
$elem.removeClass("visible");
&section&123&/section&
&/article&
&div class="visible"&
&span&hello&/span&
效果如下：
其实这段代码中涉及动画的最关键的部分不外乎这两行：
div.visible{-webkit-animation:ani-fade-in-up 2animation:ani-fade-in-up 2s ease forwards;}
div.visible & span {-webkit-animation:ani-fade-in 1s 2sanimation:ani-fade-in 1s 2s ease forwards;}
其中span动画延迟2秒执行，执行过程为1s，另外两者都使用了forwards来保持最终状态。
另外在介绍wifi的地方还有一个有趣的循环动画：
这是在animation中将其动画执行次数设置为infinite ：
@-webkit-keyframes ani-circle-scale {
-webkit-transform: scale(0);
margin-left: 0
-webkit-transform: scale(1);
margin-left: -999px;
opacity: 1
opacity: 1
opacity: 0
div{-webkit-animation:ani-circle-scale 8s ease-out forwards infinite;}
更多animation的知识点可查阅。
在，小米还使用了video来展示一个小动画（有些复杂点的展示效果直接使用小尺寸的视频来展示也是个不错的选择）：
此处代码为：
&video id="exporevideo" poster="/webfile/images/2014/cn/goods/minote/camera/ca-49.png"&
&source src="/webfile/images/2014/cn/goods/minote/camera/jingtou.mp4" type="video/mp4"&
&source src="/webfile/images/2014/cn/goods/minote/camera/jingtou.webm" type="video/webm"&
&img src="/webfile/images/2014/cn/goods/minote/camera/ca-49.png" alt=""&
两个source分别匹配了mp4和webm格式的视频文件，其中mp4是为了兼容IE9+和Safari，webm是为了兼容旧版的Firefox和Opera。除了mp4和webm，其实还有ogg格式可选，各浏览器对视频格式的支持度可查看（非常详尽）。
最后的那张img图片是用来优雅降级的，也就是不支持&video&标签的浏览器会直接显示为这张图片。
小米在其中还对全体img使用了 -ms-interpolation-mode:bicubic &属性，它可以让IE下被缩小的图片保持较高质量，而不是变得模糊、带锯齿。不过该样式其实只对IE7有作用，因为IE8+的缺省值已设定为bicubic（IE7-下为nearest-neighbor ，图片被缩放后质量会很差）。
另外小米对其样式和脚本均做了混淆和压缩处理，不过这已不是什么新奇的东西，只是使用了
等前端辅助工具罢了。
本篇就介绍到这里，实际上小米官网上还有很多本章未提及的有趣交互，有兴趣的朋友可以去仔细摸索一番。
话说最近也是蛮拼的，博客越写越长、越写越晚，醉了。。。
阅读(...) 评论()}