原文地址

gka-animation

“抓娃娃”并不陌生,存在两种结果:抓到与抓不到。在 Web 动画中,如上图,“抓到”与“抓不到”对应着两个动画,可以使用不同的动画图片资源来实现,似乎毫无异义。

细做观察,不难发现:两个动画中“动画初始到抓取”及“抓取结束到动画结束”的区间中存在相同动画(滑动和晃动抓杆)。既然动画相同,那么可以通过引用同一份动画图片资源,不做相同图片的重复加载,从而减少总资源大小。

“两个动画间存在部分相同的动画,相同部分可以引用同一份动画图片资源,来减少图片的总大小。”

肉眼进行辨别哪些动画是一样的?那是不可能的。gka提供一键式制作多个动画的方式,支持多种图片优化方案(含图片去重)。

gka 是一款简单的、高效的帧动画生成工具,图片处理工具。

官方文档:https://gka.js.org

Github:https://github.com/gkajs/gka

原文地址

gka

多倍图的适配在前端开发还是比较常见的,像在 Retina 屏幕,一般会使用二倍图从而让图片保持清晰,而在开发帧动画中使用的图片实际上同样需要做这样的适配处理。gka提供一键式的制作多倍图帧动画的方式。

gka 是一款简单的、高效的帧动画生成工具,图片处理工具。

官方文档:https://gka.js.org

Github:https://github.com/gkajs/gka

最近业务比较忙,但是我们追求3D世界的脚步不能停下来~某天在路上看到一辆辆飞驰而过的汽车,想到要不要弄一个赛车类的游戏
没有再用原生,而是使用了threejs,毕竟大点的3D项目,再用原生就是自己给自己找麻烦了……
本文从0到1讲解了这个游戏的开发过程,其中没有专门的介绍webgl和threejs,没有基础的同学可以结合threejs文档一起看,或者先学习一下webgl的基础知识~
游戏地址如下:

写在前面

Md2site是基于Omi的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大。
当我们想把一堆markdown文档转成网站时,你可能有许多选择,倘若选择 md2site ,你一定会爱上她。

特性

  • 超轻巧,生成的网站除了Omi不依赖其他第三方库,超级小的尺寸让你加载更快
  • 完整支持Markdown,使用markdown写你的文档或者网站,完整支持markdown所有语法
  • 响应式,生成的网站是响应式的,手机和PC都有不错的阅读体验
  • 多语言,天生支持多语言,只需增加修改配置便可。让世界了解你的网站
  • 代码美,请记住:不仅仅是代码高亮,使用md2site轻松可以让代码内的某些代码高亮
  • 超方便,npm run dev预览,npm run dist一键生成网站。不满足现有布局或样式可轻松进行二次开发

Omi

Open and modern framework for building user interfaces.


  • Omi的Github地址https://github.com/AlloyTeam/omi
  • 如果想体验一下Omi框架,可以访问 Omi Playground
  • 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
  • 如果你想获得更佳的阅读体验,可以访问 Docs Website
  • 如果你懒得搭建项目脚手架,可以试试 omi-cli
  • 如果你有Omi相关的问题可以 New issue
  • 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)

背景:不知道大家还记不记得上次那个3D迷宫游戏,有同事吐槽说游戏中间有一个十字瞄准器,就感觉少了一把枪。好吧,那这次就带来一款第一人称射击游戏。写demo锻炼,所以依旧用的原生webgl,这次重点会说一下webgl中关于摄像头相关的知识,点开全文在线试玩~~

背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路的小游戏,可以消(bao)遣(fu)时(she)间(hui)

没有使用threejs,就连glMatrix也没有用,纯原生webgl干,写起来还是挺累的,不过代码结构还是挺清晰的,注释也挺全的,点开全文开始迷宫之旅~

介绍这个工具前不得不先介绍一下积木系统。

积木系统是 imweb 团队出品、为产品运营而生的一套活动页面发布系统,详细介绍见 PPT

简单可以这么理解它的理念:

  1. 一个页面 = 一个模板 + 多个组件
  2. 一个组件 = 一份代码 + 一份数据
  3. 一个组件开发一次,复用多次
  4. 一个页面使用多个组件拼装后,实时预览、快速发布上线

此前在阿里实习的时候也接触过一个叫 TMS(淘宝内容管理系统)的系统, 专门用于快速搭建电商运营活动页面.

这种系统可统一理解为运营活动页面发布系统。

TAT.rocket 使用js实现思维导图
In JavaScript,Web开发,作品 on 2015年08月28日 by view: 9,563
2

本文主要阐述使用js实现思维导图的关键技术点,如果还不知道什么是思维导图的同学,请自行度娘。以下是demo和源码的传送门:
demo:http://rockyren.github.io/mindmaptree/
源码:http://github.com/RockyRen/mindmaptree/tree/master

在源码中我使用了svg绘制思维导图。与canvas相比,svg将图像当成对象,我们可将思维导图中节点和线等图形表现为对象,而且svg更适合用于动态交互的应用

TAT.tennylv HTML5实现屏幕手势解锁
In 作品 on 2015年07月17日 by view: 7,514
4

效果展示