行歌_

最近在水果公众号上看到一段菊花绽放的动画，丝般润滑的感受，吹弹可破的花瓣，让我忍不住看了下究竟，将所得整理了下，作为小技巧分享给大家。 具体看下图，视频转换成GIF质量下降，有兴趣可以去水果公号看。 瞄了下源代码，居然是用SVG动画拼成的序列帧。序列帧是什么？水果前端为什么好好…

可能每个人的童年都有个时空穿梭梦，印象深刻的是第一次看《机器猫》，主角康夫卧室的抽屉就是时空隧道的入口，跳进隧道的那一刻，时间浮光掠影般从身边流过，仿佛进入了异世界。 这次我们用three.js实现一个3d隧道穿梭效果，打开异世界的大门。 它也可以是一个跑酷游戏原型，又或者是3…

今年的梅雨很敬业，已经折腾了一个月，仍然没有要下班的意思，经常是前一秒大太阳，下一秒被浇成落汤鸡，大家管这叫暴力梅。 为了蹭下暴力梅的热度，今天给大家带来一阵文字雨，先来看下效果。 作者是Google的创意开发者cmiscm，有兴趣可以在github上搜下。 文字撞击水面后飞溅…

越来越多的公众号在图文消息中加入了SVG动画交互效果，SVG支持事件触发动画，相对于单独做一个H5而言，由于公众号消息依托于微信服务器，为广告主节约了服务器流量成本。这次我们以苹果公众号的一篇交互消息为例，剖析下里面的效果是怎样实现的。 动画主要分为两屏，第一屏出现闪动文字提示…

在此系列教程的前两部分，我们了解了实现一个粒子系统需要具备的基础知识。这次我们会利用这些知识来实现一个简单的粒子系统，并把这个系统应用到自己的项目中去。 为实现粒子系统，我们已经不需要什么新知识，我们需要做的是在粒子中添加更多的物理参数，并合理地组织代码来实现系统的复用性，需要…

今天走了一遍下透明材质在three.js中渲染流程，首先还是先在blender中建模，贴图和设置材质。关于建模部分推荐一下Derek Elliott的油管podcast，里面都是很棒的blender产品建模，渲染，和动画教程，区别于其他教程，他的教程渲染效果都是商业产品级别的，…