水一篇代码相关的 blog. 最近在做微信小程序, 设计稿上有一个省略号依次颜色变化组成的 loading 组件. 据说来自微信 UI 设计标准, 可是哪里都找不到, 只能自制了. 顺便吐槽一下小程序的设计和文档, 真是 tmd... 思路 效果主要就是省略号中各个点周期性交替闪烁. 闪烁可以有多种表现形式, 如颜色或者透明度变化, 这方面倒不是什么大问题. 如何支持任意个数的"点"是需要思考的地方. 经过一些实验, 打算采取通过子元素作为 stub…
最近在把前面做的几个视(wan)觉(piao)向的代码迁出到新的repo, 并添加了一些新的效果. 除了巩固了一下 Canvas API 和高中三角函数知识外, 还是学到了若干 Tricks. 其中一个是 Canvas 的尾迹效果, 或者说淡出(fade out)效果. example 如果独立思考的话, 首先想到的方法大概是: 缓存上一帧 Canvas 在渲染当前帧之前, 先把缓存帧加一个 alpha 值并绘制在 Canvas 上 继续当前帧所有元素的绘制 但这个方法的问题是, Canvas…
Talk is cheap, show me the GitHub 想尝试这个玩意很久了. 早先听一个独立游戏开发者讲自己心路历程, 提到了自己一直维护的消除类游戏并赚点小钱的故事. 就像一道上好的面试题一样, 切入起来很简单, 要多少有多少要多深有多深. 整个实现过程也没什么好说的, 都是可以预见情况. 设计和实现并无什么优劣之分, 毕竟只是最小实现, 50…
注: 本页的 demo 需要较新的浏览器(推荐 Chrome70+)才能正常执行 大概<妇联 4>上映的时候, google 也上线了一个无限手套的特效(点此链接再点屏幕右侧的手套). 搜索结果中的条目, 随机的一半机会随风消逝, 同时附加一些屏幕滚动以及搜索总数目的变化. 除了敬佩还是敬佩! 从那时就有了复刻一下这个效果的想法. 简单考察了一下, 控制台打出了的 log…
这是一道我经常在面试中会问的css题：如何实现Android平台上常见的，线条长度会变化的Loading组件： 这是一个我自己也答不出来的题, 问这个题的目的只是试探一下候选人是不是思维特别敏捷或者真的有深厚的css知识，而且也只当附加题助兴。如果真的思路正确甚至能完美答出，那真是遇见水平超出自己的人了。可惜并没有遇到，哪怕是思路靠边的也没有，看来此题并不是一个特别好的面试题。 第一次发现这个的纯css实现， 是在使用公司的。具体Inspect的细节已经不急不清楚了，只记得是根据边框dash…
4 月 1 号打开了 StackOverflow, 看见满屏幕中二元素还以为自己走错了板块. 后来才想到愚人节的事情. 除了独角兽和超 gay 配色, 还有个鼠标下雪的效果还行, 就想着做做看. 思路 目标区域监听事件, 获取鼠标位置. 图形: canvas 还是 DOM? 仔细看原实现, 雪花其实就是*号. 这样 DOM 会方便一些, 但 canvas 也不是不行. 动画: 动画部分由, 和 x, y…
在测试前端解析一个比较大的 Excel 文件时候, 发现我们的 button 的 spinner 卡住了. 印象中即使线程阻塞了, 有些 GPU 加速的东西依然应该有效. 怀疑又是某种 css in js 的弱智用法(没错, 我就是讨厌 css in js). 查看了一下元素发现是用了 svg 的animateTransform. 写法上面感觉跟 css 差不多都是一堆 + . 难道这样也会阻塞吗? 所以做了个测试 demo 结果是, 虽然长得像, 但 css animation…