站内搜索

今天是 TPAC 的最后一天，上午没有什么特别想听的，下午有中文兴趣小组的会议，这个当然是要去听一下的。文力走了之后我和博文住了一间，不幸的是他晚上睡觉也打呼噜，不过幸运的事是我好像安稳睡着了。早上因为之前没和他定好时间起床，我起的比较早不敢吵醒他就等了许久，等了一个多少时，实在是等不住了就起来洗漱了。然后又等了一个多小时，实在是等不住了就把他叫醒问下他的房卡在哪我先去吃饭去了。因为我要把我的房卡拿走的话屋里头就没电了。吃完饭回来发现他还在睡觉就又等了一个多小时，因为早上十一点前需要退房，时间比较紧我怕到时候赶不上。等到快十一点的时候他总算是醒了，收拾收拾就赶紧退房去了。

注：福冈博物馆打卡

本来想早上早点起来去海边沙滩看看的，结果还是败给了懒觉睡到了七点半。洗漱后去吃了酒店的早饭，服务员会把每个人带到座位上而不是随便坐感觉服务还是挺周到的。吃的种类比较多，不过早上我还是喜欢喝个粥。不足的是油条炸的太硬了，泡了好久才泡软。

注：酒店和风日式早餐

当然我还是没忘记我是来参会的，早饭完后就去参会了。上午的应该是统一的会，不过语速都比较快只听了个大概（其实是没听懂）。有一个是说如何让 W3C 的规范更加可持续化的，还有一个是说之前 W3C 和 MDN 联合推出的针对开发者的调查报告的结果。

注：中华人民共和国驻福冈领事馆

前段时间我开源了一个叫 Animaris 的项目，这个项目是使用 ThinkJS + MongoDB + React + Antd 开发的移动端 WebView 接口文档系统。平常大家见到的接口文档无非就是 HTTP API 接口文档，要么就是框架/库提供的接口方法文档。对于这种 WebView 的接口提供文档基本上没有。借着业务的需求我做了这么一个项目，用来解决以下两个问题：

1. 移动端接口编写并生成可视化文档
2. 移动端接口前端开发环境模拟问题

如果有相关需求的同学也欢迎使用，感兴趣的同学也欢迎 star。咳咳，回到本文的重点，项目开发的差不多的时候我就准备给它设计一款 LOGO 了，以下是成品效果图。虽然我没有学过绘画没有很好的设计功底，但是我相信简单的形状也能发挥不错的效果，那么我就给大家讲讲我是如何设计这款 LOGO 的。另外由于动画效果有兼容问题，最好使用 Chrome 等现代浏览器查看本文哦~

名字由来

讲 LOGO 之前我要先说一下项目名称。Animaris 的中文名为仿生兽，而仿生兽是一种利用风力来模拟生物动作的机械。

仿生兽是由荷兰艺术家泰奥杨森（荷兰语：Theo Jansen）利用塑胶、木头等常见的无生物物体所创造，借由力学的原理和风力的推动 ，可以做出一些仿生物的动作，甚至可以自行躲避障碍物。

via: https://zh.wikipedia.org/wiki/仿生獸

其实最开始这个项目名叫 WebViewMock 的，因为当时没有想到一个很好的名字，最后就用项目的功能来命名了，非常的贴切。后来是在刷微博的过程中有个人发了一个仿生兽的视频，我才想起来之前我也看过这个东西。灵机一动觉得仿生兽这个理念不是和 Mock 正好契合么，区别在于一个是模拟生物行为，一个是模拟接口行为。

寻找素材

绘制 LOGO 一般都要和项目名或者项目功能做关联，既然项目名叫仿生兽那我的第一反应当然是画一个仿生兽试试啦！不过当我搜索了下仿生兽的图片后，这个方案就被我 pass 了，这需要画的细节也太多了吧！对我来说完！全！不！可！能！啦！

不过既然实物不行我就看看有没有其它人画的简版学习一下，最终我找到了以下的素材，用几何线条描述了仿生兽的一只角的形状。那我觉得这个非常简单就能表达出寓意，应该还蛮适合我的。所以就准备基于这个形状进行下一步的加工。

碎片拼接

因为这个项目是 Node.js 的项目，所以我都会想要将项目的 LOGO 和 Node.js 的 LOGO 六边形结合起来。因为之前做 LOGO 惯用的手法就是碎片拼接，所以当我看到素材的这个三角形块拼接在一块的时候第一反应就是可以先是六边形然后崩开变成仿生兽的肢体形状。

正负设计

当然除了碎片拼接我也想尝试一点新的创意，也不知是不是最近 @优秀网页设计 上推荐的正负形设计比较多的原因，无意中我突然想到可以利用两只仿生兽肢体来组成一个六边形形状。虽然简单但是感觉要比之前的老思路更有设计感。

平面正负形是设计上比较常见的手法，简单的原理就是一张图上将明暗两色系对调之后能出现另外一幅图的手法。文字解说可能大家不太好理解，大家如果看看下面这张图，是不是很好理解了。相信下面的图和类似的图大家在平常的生活中也看过不少。

我觉得正负形给设计带来的最大的好处就是一个平面能画两种内容，两种内容可以相辅相成也可以形成鲜明的反差，最后将主旨突出的更明显。例如下面这张枪击事件的图，正面是枪，负面是人，相辅相成的效果让人更能理解枪支的可怕。

关于更多正负形相关的内容可以参阅《一组创意正负形艺术插画》以及《正负形设计》。

动画设计

确定好最终效果后，就要开始想象如何制作动画了。正如我之前在《SVG 动画实践》中所讲的那样，我一直坚信即使是简单的动画效果，只要你富有想象力，都是能做出很好看的动画的。那其实仿生兽的关节肢体第一下就让我想到了可以使用路径变形动画 来做。可以做一个模拟关节由直立变弯曲的过程，最终形成 LOGO。那初始动画的时候两个直立的肢体一上一下对称组合一下正好可以变成一个矩形。

那其实初始动画的矩形其实没那么好的寓意，刚开始看的时候也没有那么好看。所以我想要改进一下初始动画的状态，于是乎我突然想到了 Animaris 里面的 A 字母，一左一右两个不正好就是两个肢体吗？另外当我在做这个动画的过程中我发现我之前是将两个肢体类似太极镜像的形式放置的，那如果我将两个直立的肢体按照 A 字母这样放置最终生成的东西会是什么样子呢？

简单勾勒了一下发现效果还不错诶！于是乎最终就定案了初始形状是 A 最终变化成图示的这种形状的动画过程。

矢量动画

方案定好之后就要上 Sketch 上构建矢量图形了，正如《SVG 动画实践》中所讲的那样，使用 CSS3 实现路径轨迹动画的话需要注意锚点数一致的问题，由于最终效果有两个关节，所以需要7个锚点。也就意味着最终 A 的 / 分支一笔也需要包含7个锚点。同时要保证绘制的形状位置是在同一个位置，这样能保证导出的 SVG 没有平移的效果。

JS Bin on jsbin.com

脑洞环节

当我画完这个 LOGO 之后我盯着它看了许久，觉得它好像什么东西。想了好久最后觉得这顶上的两个东西怎么这么像阿猫阿狗的耳朵！于是我按照猫咪的样子添了比较简单的耳朵还有胡须，奈何没有绘画天赋，中间的猫脸一直都没有画出来。由于中间的负形空间本来就是想要表达 Node.js 的官方 LOGO 的，最终我决定将 Node.js 的 LOGO 放到中间，完成了整体的设计。

JS Bin on jsbin.com

后记

以上就是一个简单的 LOGO 动画设计的过程，这个过程让我想起了昨天有同事说过的一句话“开局一张图，内容全靠编”。对应到我这次的动画设计里面还真是非常贴切了。整个的过程需要比较大的脑洞，当然支撑这些灵感的还是需要不断的在纸上绘制以及观察，注意身边的一些小细节，并将其运用到内容中。

老实说，在上过管理课，看过前几本管理学相关的书之后再回过头来看这本书，发现这本书讲的东西大部分其实还是之前的那些。所以其实管理要掌握的知识就是这些，区别在于大家是否掌握了。

开篇给我们介绍了什么是管理，如何才是有效的管理者，让我想起了上一本书《卓有成效的管理者》上看到的内容了。“管理是通过别人活着和别人一起使活动完成得更有效的过程。”

前言

最近借着同事去参加 ModernWeb2017 会议的机会，去台湾游玩了一下，具体游记可见之前的几篇文章：

• 台湾行之高雄（一）
• 台湾行之高雄（二）
• 台湾行之台南
• 台湾行之台中
• 台湾行之台北（一）
• 台湾行之台北（二）
• 台湾行之台北（三）

总体来说台湾给我的感觉像是2000年左右的大陆，除了台北其它的几个城市给我的感觉都是很平和一点都不浮躁，生活起来特别舒服。

前言

昨晚至萱一张照片炸出了一堆地陪，秀贞盛情难却最后定下了早上到火车站见一面。不得不说本次台南的这个商旅实在是不行，必须要下午三点钟才能入住不说（我们十二点就到了），甚至连早餐都非常一般。虽然说价钱便宜，但也没便宜到这种什么都可以随便的价钱吧，摊手！

图为东海大学内一角（不要问我为什么要在这里插入此图，我是不会和大家说实在是没地方放图了的→_→）

嗯，看了下时间，有将近一个礼拜没写日志了。最近的日子过得颇为堕落，除了偶尔出去吃吃饭剩下的时间基本上就呆在寝室了（其实是呆在电脑和床边了[噘嘴斜眼中]）。上上网看看小说，偶尔看看视频，写代码也没什么动力，整个人都负能量爆棚，唯有躲到小说和电影的世界中忘记现实。

前天接受亚琴的邀请去她那里蹭饭去了。自从高中毕业之后除了一些玩的非常好的朋友（其实也就那么两个而已[继续噘嘴斜眼中]）外，因为家庭原因基本上都没参加过同学聚会的我都没有见过任何的高中同学了。亚琴算是之前玩的还可以的同学啦，嘿嘿！虽然坐了将近两个小时的地铁以及最后一段路程还迷路了，不过看在吃到美食的份上我就不吐槽什么了，恩哼！自家做的酸菜鱼火锅什么的果然就是爽啊，比食堂什么的好吃爆了，要感动哭了有么有T_T！

晚上又一起组团去通宵KTV了，不得不说亚琴的生活过的够小资的。熬到五点多我实在熬不住了就困了。完事之后蹭蹭蹭的干着早班地铁回的学校。虽然没有平常的地铁拥挤，我也有坐到位置，不过相较于六点多这个点来说还是觉得人好多啊。而且大清早的坐车的基本都是些务工的工人，不得不说工人真是辛苦啊。

回来之后还非常有闲情的去教工食堂吃了个早餐。各色食物都点了一点之后发现，教工食堂的早餐还真是没什么吃的。回寝室之后立马就倒床睡觉了（我会告诉你倒床之前我还玩了两把节奏大师么！）。以至于师姐打电话过来我也完全没反应，见我手机被连环夺命Call了，蒙哥实在是看不下去了就把我摇醒了（蒙哥我要睡觉啊T_T!!!）。这才想起来因为很久之前帮过师姐一点忙所以她答应中午请我吃饭的，上午打电话过来商量着去哪里吃来着。跟师姐愉快的吃了午饭之后又继续回到床上做“扑街”状了，结果一睡就睡到了晚上七点，呜呜呜，我是睡神么！

---

今天微博上的好友 @孚辰_ 分享了一个用无数个Checkbox做画板的网站： http://www.mrdoob.com/lab/javascript/checkbox_painter 。看到的瞬间我就想是不是可以利用方程式画些乱七八糟的东西出来，比如爱心啊什么的。不过在试验爱心之前我先把普通的三角函数都试了个遍，嘿嘿！

• Sin(x)版：http://t.cn/8F26pvJ
• Cos(x)版：http://t.cn/8F26jmi
• Tan(x)版：http://t.cn/8F26do9

最后是爱心版了。之前想直接用笛卡尔心形线的方程式，不过看样图好像不是很好看。网上传的一些公式用起来也比较费力，最后还是用分段函数解决了。将爱心分为上下两部分，上半部分由两个半圆组成，下半部分由两跟相交直线构成。废话不多说，直接放上效果地址：http://t.cn/8F2SkBp。

最后的最后放上我的“画心”代码：

d=document;
var m = {
    e: d.querySelectorAll(\'input\'),
    r: parseInt( d.body.clientWidth / 20 ),
    c: parseInt( d.getElementById(\'container\').clientHeight / 19),
    o: function() {return {x: 0,y: Math.floor(m.c / 2)};},
    g: function(x, y) {return m.e[(m.o().y - y) * m.r + x];}
};
var e = function(x, y) {
    if( y>=0 )  
        return Math.pow(x - 28,2) + Math.pow(y,2) <= 50 || Math.pow(x - 14,2) + Math.pow(y,2)  <= 50 ? true : false;
    else 
        return y >= -x+6 && y >= x-36? true : false;
};
for(x=m.o().x;x<m.r;x++) {
    for(y=m.o().y;y>-m.o().y;y--) {
        m.g(x,y).checked = e(x,y);
    }
}

又到了一年几度，一个礼拜一次的抢小米活动了。昨天古哥就通知我让我预约好做好准备的。上个礼拜我也提前在冰剑大哥那预约了一个让他帮我抢一个（传说中的一抢一个准的神啊）的。到十二点的时候，跟平常一样，即使我准备工作再丰富也还是一样悲剧的没有抢到。冰剑抢到的时候跟我说简直犹如福音降临有木有，我赶忙就给蒙哥说了一声。等我说不是我抢到的，是网友抢到的，蒙哥就问了一句“靠谱么”。我当时的第一反应是“这有什么不靠谱的？”，第二反应就是“怎么会不靠谱”！虽然最后还是完美的交易了，不过跟之前的一些经历对比，引发了我的深思，为什么我这么容易相信我的网友？

我看大家都对网上的交易都非常的小心翼翼，有时候让我都觉得费解。我和Jclyn经常钱转来转去，也经常拖别人买票买东西什么的，虽然从来都没考虑过信任问题，不过意外的事情一次也没有发生就是。我也经常在v2ex上收购一些二手产品，卖家基本上是我打钱过去了后来才发货，对此我也没表示有丝毫的不满，也没有什么忧虑，就像是正常的操作一样的进行着，最后也总能安然收到货。到底是什么原因让“网友”这个词带有“不信任”的色彩了呢？

仔细思考一下，我发现我所接触的所谓的网友，已经不是原本意义上的网友了，而是我身边朋友一般的存在。我认识的网友要么是博客之间认识的，要么是写代码认识的，请求帮忙或者被请求帮忙的网友也基本上都是聊了不止一次两次的（一年两年也也不是没有）存在。博客就是给人一种非常信任的感觉，能了解到对方的生活，知道他，间接地我们就开始信任他了。在v2ex中能够互相信任，我想最主要的原因还是基于v2ex这种小众的带有个人主义色彩的平台吧，这个平台是值得让人信任的，并且平台上的人也是值得让人信任的。

渐渐地，我也慢慢接受了这个观点，不是我容易相信网友，而是我信任的“网友”，都是我的朋友，朋友之间还有什么能不信任的呢？

难得的周六，依旧是生活中从来没上午。下午跑到办公室来也不是很想做事，写了会儿代码也不是很有激情。干脆就把昨天下的电影拿出来看了。《极乐空间》和《横道世之介》，前一部是最近出的（其实也挺久了）但是一直懒得看，后一部是军军说挺不错的。正好中间好像是腾讯弹窗《爸爸去哪儿》的新一期了吧（大概），就手贱点进去看了一下。先声明一下，之前我还没有看过《爸爸去哪儿》，只是听他们说非常搞笑。进去看了之后就停不下来了，一个下午一直在那里笑啊！哈哈！看一会《爸爸去哪儿》，笑不住的时候又切回《极乐空间》。一个那么血腥暴力，一个那么亲子欢乐，搞得木哥下午一直在说我神经病，哈哈！可是真的不能怪我，真的很搞笑啊！

《横道世之介》是晚上看的，日剧的风格比较浓重，果然是军军的口味，嘿嘿！整片都是平平淡淡的，通过一个一个的朋友和恋人的回忆，拼接起了横道世之介短暂的一生。他的普通在于他出现的普通，也在于他消失的普通。他的强大在于“当你死后，朋友回忆起你来时，应该都会笑着的吧”，虽然大家已经不记得他长什么模样，他的生活琐事，但是大家都还记得，他是一个开朗的人，是个爱笑的人，是一个把快乐传染给大家的开朗的小伙子。

前两天看了某大大写的文章，说要勤写日记，就用流水账的格式就可以了。然后我就很开心了，因为不管是哪里我写的东西都非常的流水账呢。从初中一直骂道高中的流水账格式终于在这里被"正身"了，我鼓起了一股莫名的动力开始我的勤更生涯（不知道能撑到下一个"加油站"么)。

昨天晚上小董拿他电脑过来给我折腾，让我解决下发热问题。我就帮他把电脑拆了清清灰重新涂了一下硅脂。这里要吐槽一下三星和戴尔的电脑，设计的一点都不合理，就拆风扇这么小的事情，非得整的要拆个机器才行么？！顺带表扬一下联想，在这方面就做的很人性化。嘛，这是题外话，回到拆机正题上。本来一路顺风，连螺丝都没有多出来的情况，应该是没什么事情发生的。结果天有不测风云，不知道怎么搞的开不了机了，看了下显示屏没亮，我开始以为是显示屏的插头没插好，又拆了一遍发现正常，然后外接显示器发现也还是不亮，证明不是显示屏的原因。拆开来看了半天也没看出来哪里有问题，没办法只能非常沮丧的给他装好让他明天拿店里头去看看咯。结果今天打电话过来说是有根线没装好，人家再拆了一次就正常了，不过散热的问题还是没有解决就是。哎，果然还是咱技术没到家么？

今天早上生活中再一次没有了上午，窝床上看《薄樱鬼》了。花了几天的时间把它给看了一遍，总结来说就是有点受不了，揪心的很。跟平常热血励志剧不同，讲的是一群守旧派的朋友在历史的潮流抛弃并一个个战死的故事。天人永诀这种题材是最让我受不了的了，特别是一群有着羁绊的人们，为了自己的理想，犹如鲤跃龙门般的努力着，但最终却无力回天，惨死异地。最后活下来的人们也是凄凄惨惨戚戚，让人唏嘘不已。

吃完午饭就去办公室了，刚坐下没一会儿之前让我帮忙指导MapGIS的一个师姐（我师兄的同学）就发来SOS求救信号了。说是放大缩小没搞好，结果搞得不同文件的大小不一样了。电话里头她还挺急的（别人画了一个多礼拜的图呢，能不急么），然后电话指导没搞定被叫去她们单位亲自去处理去了。她们单位在奥体委，离我们这也还算近就是。过去看了下还真是挺头疼的，连七八糟的啥都改了。不过好在咱也不是吃素的，虽然花了点时间，不过也总算是解决了就是。

有时候感觉帮助别人解决问题（当然要解决了问题了）还真是一件挺快乐的事情啊！不过谁又说不是呢！嘿嘿！