最近研究一些图片格式的转换，然而放到项目里面兼容不大理想，成效不大，感觉自己在兜圈子，迷茫ing...鉴于很久很久没有更新博客文章了，毕竟上一篇文章也是去年4月份的了，更新一下，满足下连我自己都不知道有没有的 真粉 需求…呵呵哒…

这阵子忙的大一点的项目，应该算 WE大会，那就说下它呗，先上个链接：WE大会
大概的交互流程是这样的：用户进入官网，会播放一段开场视频，伴随着带感音乐，然后主题渐显，今年2016的主题是 无境，镜子相关的题材，至于当时脑爆的时候各种镜子哲学逻辑特效什么的，这里就不多说，毕竟前端文章，不能给姚老板，LEO，扎扎他们太多机会秀场，额呵呵q(๑¯ ε ¯ ๑)p…

开场首屏还是很重要的，用户的第一印象分就打在这了，大背景渐隐渐显效果，从三棱镜切换六棱镜再切换五棱镜的变幻，契合主题用，此处做了一个鼠标探照灯的特效，如下图所示：





鼠标会‘照亮’所在的地方，并对大标题产生一个小光影，投影距离与鼠标方向反向偏移；
也许你会对此处探照灯的特效感兴趣，我大致分析下实现的原理，正如上面说的，背景是一个棱镜切换的效果，那要么就是一组图片帧来切换，要么就是一个大视频，F12查看下元素，没错，它是一个视频，那探照灯是不是就是做了一个白色羽化的圆形图片，叠上去的呢？可以自行试下，叠出来的效果，不是照亮的感觉，反而会有一种被雾霾遮挡的感觉，脏脏的不够透彻…不过为了实现这个效果，我有做了一张圆形图片，不过不是白色，是黑色的，也许你已经懂了，黑色穿透，这个是 蒙版 的特性…我在bg_effect_area层里面，总共打了2个层，一个是bg_img也就是背景层，背景层的视频上方，叠了一个黑色半透明蒙版，压低整体视频的亮度用；一个是bg_mask也就是蒙版层，里面也放了个视频，不过与bg_img层不同的是，bg_mask层没有黑色半透明蒙版，因为这个视频，就是探照灯的显示区域，在bg_mask的行内，动态赋值了一个-webkit-mask-position，用于同步鼠标与蒙版图片的位置，所以用户看到的照亮，其实是单独一个蒙版后的圆形区域视频，也许这样说会有点抽象，那把bg_img删除，如下图所示：





剩下的效果，应该就不难理解了，视频一式两份同时播放，于是用户的眼睛就被欺骗了，以为是一个视频局部被照亮，特效就像魔术，其实说穿了也就那样…请叫我 真·魔术师 …

首屏往下滑，满屏切换的方式进入演讲嘉宾页，在退出与进入的过程中，容器里面的元素会有相对的位移视觉，最远的元素会最晚入场，让过渡画面柔和，减少整屏切换的那种硬朗感觉，比如 右下角的菜单回按顺序的向上渐隐，呼应大屏的上移；演讲嘉宾 这页的话，其实第一感觉是真锅挺帅的啊…也许是因为带 真 的缘故q(๑¯ ε ¯ ๑)p…这页其实平平无奇，只不过嘉宾的一些异动，导致修改了几个版本，鼠标滑过头像，会出现嘉宾的详细介绍，用了个table table-cell让文字垂直居中，略过不作详谈…

往届回归 这页的话，花心思比较多，因为有几层的嵌套作为一个单页要有多页的感觉，鼠标滑过每个主题，背景将替换为当年主题的设计主调调，15年是沙，14年是星空，13年，好吧，也是星空，额呵呵…点击年份数字切换对应主题卡片幻灯片，不想点的话，也可以拖动，判定是优先显示屏幕上多于2分之一的卡片，多于的时候，就切过去，小于的时候就吸回来；

点击年份卡片，该年份对应的WE大会嘉宾详情满屏显示从右入场，年份卡片会呼应着被向左右推开，嘉宾详情层的嘉宾也会有所呼应，多一点互动，让页面的入场不会太干巴巴，然后…嘉宾图片那个大哟，特写那个帅哟…嘉宾照片默认黑白显示，鼠标滑过左右拉伸 宽度400->440，变为彩色，这里照片黑白彩色切换的话，用-webkit-filter的grayscale灰度滤镜做了处理，这样就不用出两套图片切换，毕竟尺寸那大，层高up，其它嘉宾照片位置相对不变…可以滚轮滚动滑动嘉宾列表查看其它的嘉宾，也可以鼠标拖动下面小滑块，快速移动查看，这里细节位置的逻辑判定会多一些，毕竟页面会感觉屏幕分辨率进行响应，而且考虑到如果用户拖动一半要滑动，或者滑动一半要拖动，快速的拖动摇摆，超越边界等细节问题；
点击嘉宾照片，嘉宾照片默认彩色往左拉开，展开该嘉宾的详情以及嘉宾当年在WE大会上的演讲视频，点击右侧"X"号，可返回上一级嘉宾列表，嘉宾照片回归默认黑白，再点击"X"号，则回到再上一级年份卡片处；

往届回归下滑，大会介绍页只是一些媒体的报道，不作分析；

哦，对了，首页右上角有两个按钮，一个可以切换中英文版本，点击之后不用切换页面，通过样式控制个别元素的背景图片实现快速切换，目的是要 快…而里面个别元素涉及文本的，如 演讲嘉宾的详情介绍，往届回归的介绍，则把中英文资料打包成一个JSON文件，点击中英文版本切换就加载文件替换文本，有关嘉宾文本元素是动态生成再插入到页面容器的；而音乐按钮，则是一个背景音乐，这里音乐的节奏跟视频的节奏是一致的，需要跟品牌小伙伴沟通，首屏的开场视频跟背景视频怎么做到无缝切换，背景音乐也起到一个连贯的作用。

话说这个网站跟我之前做的不同的地方，是上面所有的动效都是基于tween.js写的，之前项目大部分，js只是作为配角增删类名触发CSS3动画而已，这次发现涉及的js计算动画有点多，CSS加的有点累，然后就基于tween写了个CSSAnimate(elem,param)的动画函数，减少一堆动画复用，使用的话，比如：

CSSAnimate($(".elem"),{
     "width":{start:0,end:100,unit:"px"},
     "margin-left":{start:0,end:20,unit:"px"},
     "translate_y":{start:0,end:200,unit:"px"},
     "opacity":{start:0,end:1,unit:""},
     "duration":200,
     "delay":300,
     "onComplete": func
});

用起来还是挺方便的，讲人话：2个参数，一个是你要让它动的元素，一个是你要它怎么动，如上所示：
我是想要让这个.elem元素，宽度从0px变到100px，margin-left从0px变到20px，transform translateY方向从0px移动到200px，透明度从0变到1，动画过程200ms，延迟300ms，动画执行完成后，执行func函数；
有没有简单易懂，与jquery的animate不同的是多了一个起始的动画状态，好处自行体会啦，函数代码我就不发啦，想用的自己上去扒啦…不过那只是我一边赶项目一边抽出来的，减少动画代码复用的，难免会有疏漏或者bug，且用且珍惜哈，咩哈哈……

好吧，为了防止看文章的朋友们被我口水淹没，不知道扒哪些东西，整理下关键字给到大家：

mask蒙版，filter滤镜，CSS3动画，tween.js缓动，table布局，json加载…剩下的就要自行度娘啦，只能帮到这里啦，再透就没酒喝啦…

哦，对了，我只做了webkit的动画了，moz没做哦，你问IE有没有动画？IE只能正常体验浏览，动画全砍哦…网站上还有其它一些线条伸缩、箭头移动、颜色透明小动画，这里就不做具体描述了，别问为什么，因为懒，就是喜欢看你想干但又干不掉我的样子，blablablabla^q(๑¯ ε ¯ ๑)p…