米总的房间 网站项目新开张！
好久不见！这是时隔3年的第一篇百合帖！
其实帖子一直有在写，只不过大多是技术相关的笔记（在技术专题的blog里）
想写百合帖的话，每次写完了都要commit，我毕竟也是个好吃懒做之徒，所以3年来我就写了2篇…
不过最近在重温水星的魔女，突发奇想，要不做一个水魔的网站吧！
嗯…那做什么好呢？只是做一个介绍用的？很久之前刚学网站的时候就做过这种的，很适合自嗨，但对其它人来说没什么趣味性
那就做一个 米总的房间 吧！！！我一拍脑门做了这个决定
思路
灵感来源是一些模拟现实场景的个人网页，比如网页界面模拟旧台式电脑的桌面和图标
我想模拟米总的房间，里面有她的平板、照片墙、和狸猫的结婚照、书本、手办
这些部件是可点击的链接，导航到各自的内页
每个页面都会有小创意，不过基本上会遵循原作的风格（istj的一种特质？），所以我截了很多图作参考
制作过程
其实已经做到一半才想到要记录，所以会从项目的中间部分开始，以后会陆陆续续补充回来吧
目前已经基本做完主页，正在做平板的内页
米总的平板
虽然原图是狸猫的手机，不过很有借鉴的价值～
可以猜一下各个图标都对应什么程序哦（坏笑
为了精益求精，图标除了PS抠出来的番茄，都用了SVG
诶，Hot桑和Cool桑也用了SVG？！！没错，我用AI画这俩小人画了一晚上…（AI菜鸟，切勿参考
原作里点击图标会有个颜色和大小都改变的动效，研究了一下代码怎么写，发现把svg图片换成代码就可以轻松实现，于是重构了一下代码
Hot桑&Cool桑 胜利护身符
对这个情节还有记忆的同学就知道了，这个app是用来远程控制风灵的，最后米总强迫狸猫输掉决斗（泪
虽然有点虐，但也是米总为了狸猫辛辛苦苦做的app啊！！当然要把它呈现出来咯！
米总一按下Hot桑和Cool桑，生日快乐歌开始播放，风灵即刻歇菜
不得不说生日快乐歌真是水魔贯穿始末的重要线索
个人觉得实现这个界面的要点有：
- “Remote Control System”标题的背景是渐变色
- 点击护身符图标后的动效
上下文字的淡入淡出动效、图标变化的动效 - 底部的“Happy birthday to you!♪”跑马灯
- 生日快乐bgm的选定
因为没有ost释出所以要自己挑一个类似原作的，缓慢又悲伤的调调 - 变换后的文字有一部分被米总的手遮住了…
好彩这个世界有AI帮我分析（笑 - 字体大小的调整
因为不希望它们自动换行或把图标挤开
因为图标变化过程的动效实在太难厘清了，所以目前先做完了除此之外的界面
话不多说，这就来看我的半成品吧！当当当当————
话说大家有没有发现，明明是米总的手机，“Completed”用的颜色是Hot桑的橙色，而不是Cool桑的蓝色
明明蒙着眼在色盘上戳一下就完了，还很特意挑个橙色诶，谁爱惨了我不说
————n年过后————
好了，我带着更细致的研究成果回来了！
经过逐帧分析，图标的动效我已研究透彻（被夸的节奏（暗示
整体的动效主要分成2部分：
- 一个巨大的五角星缩小成合适大小，留在图标中间
- 俩小人从水平方向上被挤扁的状态，变成正常大小
只要个个击破就好啦！
另外，仔细研究过后，我还发现了这个界面很多设计细节：
- “Please tap”比较贴近图标，示意用户点击图标
- 上文的”Activate…”比下文的“Completed”更快出现，符合程序运作逻辑
没想到小小界面让我学了这么多设计知识，不得不给设计师加鸡腿了～
高达公司
米总之所以为米总，当然离不开高达公司了
那么米总点开高达公司app之后想看什么呢？
有图有证据！
所以就决定给高达app的内页安排一个大屏版的，让米总看够看爽www
这个内页按理说没什么难点，单纯只想嵌入视频的话，直接去YouTube复制粘贴iframe代码就行了
但是我捣鼓着捣鼓着，发现这样做有几个问题：
- YouTube的播放器太乱了
YouTube的播放器除了基本的功能以外，还会有关联视频、频道介绍等额外信息 - 小屏幕的体验不佳
如上所述，因为额外信息过多，同时跨域的iframe不支持修改样式，小屏幕浏览时播放器的字体和部件大小都不合适
所以我放弃了嵌入YouTube的方法
如果可以直接获取视频直链，就可以用系统默认的播放器了
但YouTube视频是分包获取的，直链又有过期时间，非常不方便
于是我想到了获取X或者Facebook的直链，结果真的可行
我从X的水魔官号获取了宣传视频的直链，用video元素就可以轻松嵌入干净清爽的视频播放器了
在电脑上看一切都非常美妙，但当我用iPhone手机测试时，发现视频没有缩略图
查了一下，原来这是iOS为了防止带宽浪费
只要让视频跳过0.001秒，就可以强制预先加载，缩略图就出现啦！