代码改变世界

随笔分类 - HTML5

跨界 - Omi 发布多端统一框架 Omip 打通小程序与 Web

2019-02-28 10:16 by 【当耐特】, 2119 阅读, 收藏, 编辑
摘要:Omip 今天,Omi 不仅仅可以开发桌面 Web、移动 H5,还可以直接开发小程序!直接开发小程序!直接开发小程序! "Github" Omi 简介 Omi 框架是微信支付线研发部研发的下一代前端框架, 基于 Web Components 规范设计的组件化框架,可以开发 PC Web、移动端 H5 阅读全文

腾讯 Omi 5.0 发布 - Web 前端 MVVM 王者归来,mappingjs 强力加持

2018-11-28 10:46 by 【当耐特】, 1234 阅读, 收藏, 编辑
摘要:写在前面 "腾讯 Omi 框架" 正式发布 5.0,依然专注于 View,但是对 MVVM 架构更加友好的集成,彻底分离视图与业务逻辑的架构。 你可以通过 omi cli 快速体验 MVVM: 也支持(要求 npm v5.2.0+) MVVM 演化 MVVM 其实本质是由 MVC、MVP 演化而来。 阅读全文

Omi 拥抱 60FPS 的 Web 动画

2018-11-15 09:19 by 【当耐特】, 505 阅读, 收藏, 编辑
摘要:写在前面 "Omi 框架" 正式发布了 "→ omi transform" 。 Made css3 transform super easy. Made 60 FPS easy. 作为 Omi 组件化开发特效运动解决方案,让你轻松在Omi项目里快速简便支持CSS3 Transform设置。css3t 阅读全文

腾讯发布新版前端组件框架 Omi,全面拥抱 Web Components

2018-10-18 14:40 by 【当耐特】, 2841 阅读, 收藏, 编辑
摘要:Omi 合一 下一代 Web 框架,去万物糟粕,合精华为一 "→ https://github.com/Tencent/omi" 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 API 设计 Webcomponents + JSX 相互融合为一个框架 Omi Webcomponen 阅读全文

【开源】Westore Cloud 发布- 没后端没SQL没DBA,只需 javascript 开发云端小程序

2018-10-09 10:21 by 【当耐特】, 655 阅读, 收藏, 编辑
摘要:Westore Cloud 隐形云,NoBackEnd,NoSql,HiddenDB 好的设计便是感觉不到设计的存在 开发小程序,但是:没有后端!没有运维!没有 DBA!没有域名!没有证书!没有钱!没有精力! 没关系,会 javascript 就可以,Westore Cloud 带你起飞~~ Git 阅读全文

小程序解决方案 Westore - 组件、纯组件、插件开发

2018-10-08 10:21 by 【当耐特】, 1647 阅读, 收藏, 编辑
摘要:数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形成缩减版单向数据流。 "Github: https://github.com/dntzhang/we 阅读全文

Wechart 饼图

2018-07-31 11:10 by 【当耐特】, 1697 阅读, 收藏, 编辑
摘要:预览 "Preview" | "Usage Source" | "Pie Source" | "Tutorial" "Wechart by Cax" "Cax" 众所周知 Cax 既能开发游戏、又能开发图表。本文将从饼图开始 Wechart 的图表之旅。 Wechart 完全基于 Group 体系构 阅读全文

【开源】Skatch 正式发布 - 极速渲染抽象派草图

2018-07-30 10:38 by 【当耐特】, 690 阅读, 收藏, 编辑
摘要:极速渲染抽象派草图 DEMO "Simple" "Letter" 简介 Skatch 这个词由 sketch wechart abstract cax 混合而成的一个新词,代表了cax wechart 抽象艺术派派草图渲染器。说得直白一点就是npm 上 sketch 被 tj 占了,只能强行加上赋予 阅读全文

【开源】Qone 正式发布,使 javascript 支持 .NET LINQ

2018-04-24 14:59 by 【当耐特】, 5653 阅读, 收藏, 编辑
摘要:Qone 下一代 Web 查询语言,使 javascript 支持 LINQ Github: "https://github.com/dntzhang/qone" 缘由 最近刚好修改了腾讯文档 Excel 表格公式的一些 bug,主要是修改公式的 parser 。比如下面的脚本怎么转成 javasc 阅读全文

使用parcel替代webpack制作omi-tap插件

2017-12-29 10:05 by 【当耐特】, 821 阅读, 收藏, 编辑
摘要:"Parcel" 是一个零配置的网络应用打包工具, 适用于经验不同的开发者, 它利用多核处理提供了极快的速度。对比 webpack 最大的两个亮点: 零配置 极快速 omi 相关的插件都是基于 webpack 进行开发,今天正式投入 Parcel 怀抱。 准备工作 通过 yarn 或 npm 安装 阅读全文

你不容错过的 腾讯 AlloyTeam Web 前端大会 看点完全剖析

2017-09-29 17:54 by 【当耐特】, 1372 阅读, 收藏, 编辑
摘要:AC大会 ( Alloyteam Conf ),是由腾讯前端技术团队的标杆团队 AlloyTeam 发起的前端技术大会,旨在分享团队在技术研究、产品研发、开源项目的经验沉淀。AC2017 将会继续在工程化、图形处理、Web动画、性能优化等方面呈献团队一年多以来的实践,还将邀请几个业内专家来快速分享他 阅读全文

腾讯 AlloyCrop 1.0 发布

2017-08-02 11:10 by 【当耐特】, 2281 阅读, 收藏, 编辑
摘要:写在前面 "AlloyCrop" 这个项目是8个月前发布的,作为 "AlloyFinger" 的典型案例,发布之后被BAT等其他公司广泛使用。但是发布之后,有两个问题一直没有抽出时间去解决: 裁剪图像的分辨率太小,是否可配? pinch双指放大的时候,放大的中心不是双指中心,是否可以优化? 现在很高 阅读全文

50行代码实现的高性能动画定时器 raf-interval

2017-07-20 10:42 by 【当耐特】, 1506 阅读, 收藏, 编辑
摘要:写在前面 raf interval 是基于 window.requestAnimationFrame() 封装的定时器。 Github: "https://github.com/dntzhang/raf interval" window.requestAnimationFrame() 方法告诉浏览器 阅读全文

QQ日迹Omi实战开发,从0到1

2017-07-17 09:52 by 【当耐特】, 1230 阅读, 收藏, 编辑
摘要:写在前面 相信大家对Omi应该都不陌生了,如果还有不了解的同学先看看这里。了解并使用Omi之后你会发现真的回不去了~~~ "精通Omi框架" 先简单说一下吧,Omi就是一个可以快速开发项目的组件化框架,和vue/react一样为了节省生产力的。想了解Omi和vue还有react区别的,上面文档有讲解 阅读全文

腾讯AlloyTeam正式发布pasition - 制作酷炫Path过渡动画

2017-06-21 09:12 by 【当耐特】, 1568 阅读, 收藏, 编辑
摘要:pasition Pasition Path Transition with little JS code, render to anywhere 超小尺寸的Path过渡动画类库 "Github源代码" "在线演示" 最近和贝塞尔曲线杠上了,如 "curvejs" 和 "pasition" 都是贝塞 阅读全文

腾讯AlloyTeam正式发布omi-cli脚手架 - 创建网站无需任何配置

2017-06-05 12:06 by 【当耐特】, 2338 阅读, 收藏, 编辑
摘要:omi cli "omi cli" "omi cli命令" "omi框架" 用户指南 "文件目录" "npm 脚本" "npm start" "npm run dist" "代码分割" "兼容 IE8" "插入 CSS" "插入组件局部 CSS" "局部CSS使用图片" "插入 Less" "插入组 阅读全文

Omi树组件omi-tree编写指南

2017-05-02 14:53 by 【当耐特】, 773 阅读, 收藏, 编辑
摘要:"Omi框架" 能够以少量的代码声明式地编写可拖拽移动节点的树形组件。 通常树组件能够考验UI框架的健壮性,因为需要使用到UI框架的如下特性: 组件嵌套 组件传值 组件批量传值 组件依赖自身递归嵌套(nest self) 子、孙或炎黄子孙访问根组件实例 下面来介绍下使用 omi tree 的开发全过 阅读全文

腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs

2017-04-21 10:19 by 【当耐特】, 2727 阅读, 收藏, 编辑
摘要:"【原文链接】" 写在前面 "curvejs" 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 Canvas就是舞台。 官网: "https://alloyteam.github.io/curvejs/" 你还记得 阅读全文

Omi官方插件系列 - omi-transform介绍

2017-04-05 11:02 by 【当耐特】, 1029 阅读, 收藏, 编辑
摘要:"原文链接 https://github.com/AlloyTeam/omi/tree/master/tutorial" 写在前面 "Omi框架" 正式发布了 "omi transform" 作为Omi组件化开发特效运动解决方案,让你轻松在Omi项目里快速简便支持CSS3 Transform设置。先 阅读全文

Omi新成员omi-router正式发布

2017-03-31 09:26 by 【当耐特】, 820 阅读, 收藏, 编辑
摘要:"原文链接 https://github.com/AlloyTeam/omi/blob/master/tutorial" omi router "omi router" 是 "Omi框架" 专属的router插件,文件尺寸轻量,使用简便,功能强大。用于Omi制作Web单页应用的首选解决方案。 单页的 阅读全文

Omi架构与React Fiber

2017-03-29 11:28 by 【当耐特】, 1749 阅读, 收藏, 编辑
摘要:"原文链接 https://github.com/AlloyTeam/omi/tree/master/tutorial" 写在前面 "Omi框架" 在架构设计的时候就决定把update的控制权交给了开发者,视灵活性比生命还重要。不然的话,如果遇到React Fiber要解决的这类问题的话,就需要推翻 阅读全文

Omi框架Store体系的前世今生

2017-03-23 10:13 by 【当耐特】, 968 阅读, 收藏, 编辑
摘要:"原文链接 https://github.com/AlloyTeam/omi" Store 体系 先说说Store系统是干什么的!为什么要造这样一个东西?能够系统架构带来什么? 当我们组件之间,拥有共享的数据的时候,经常需要进行组件通讯。在Omi框架里,父组件传递数据给子组件非常方便: 通过在组件上 阅读全文

Omi v1.0震撼发布 - 开放现代的Web组件化框架

2017-03-20 10:15 by 【当耐特】, 2520 阅读, 收藏, 编辑
摘要:"原文链接 https://github.com/AlloyTeam/omi" 写在前面 "Omi框架" 经过几十个版本的迭代,越来越简便易用和强大。 经过周末的连续通宵加班加点,Omi v1.0版本终于问世。虽然版本遵循小步快跑、频繁迭代,但是Omi团队成员都有着克制之心,处女座占了半壁江山,所以 阅读全文

omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS

2017-03-16 08:32 by 【当耐特】, 1456 阅读, 收藏, 编辑
摘要:写在前面 "omi cli" 是 "Omi" 的命令行工具。在v0.1.X以及之前版本中,生成出来的项目脚手架 是基于webpack1的。由于: webpack1不支持tree shaking,webpack2 支持tree shaking webpack1不支持 sass loader,webpa 阅读全文

Omi应用md2site-0.5.0发布-支持动态markdown拉取解析

2017-03-15 11:00 by 【当耐特】, 712 阅读, 收藏, 编辑
摘要:写在前面 Md2site是基于 "Omi" 的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大。 官网: "http://alloyteam.github.io/omi/md2site/" Github: "https://github.com/AlloyTeam/omi/tree 阅读全文

Omi应用md2site发布-markdown转网站利器

2017-03-06 12:57 by 【当耐特】, 1474 阅读, 收藏, 编辑
摘要:写在前面 Md2site是基于 "Omi" 的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大。 当我们想把一堆markdown文档转成网站时,你可能有许多选择,倘若选择 md2site ,你一定会爱上她。 官网: "http://alloyteam.github.io/omi/m 阅读全文

AlloyTouch之无限循环select插件

2017-03-03 11:34 by 【当耐特】, 770 阅读, 收藏, 编辑
摘要:写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项。让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动。00ms和01ms是无缝链接起来的。如下图所示: 在线演示 "http://alloyteam.github.io/AlloyT 阅读全文

Omi教程-插件体系

2017-03-01 09:31 by 【当耐特】, 1001 阅读, 收藏, 编辑
摘要:插件体系 "Omi" 是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联。 omi drag 且看这个例子: 点击这里→在线试试 js import OmiDrag from './omi drag.js'; OmiD 阅读全文

AlloyTouch之select选择插件

2017-02-28 09:29 by 【当耐特】, 640 阅读, 收藏, 编辑
摘要:写在前面 很多情况下,产品希望统一安卓和IOS select交互和样式。但是众所周知,IOS和安卓的select唤起的选择界面并不是样的,甚至IOS不同系统版本以及安卓不同系统版本下的select唤起的界面也不是相同的。而且省市区多选的需求,不管是IOS和安卓都没有提供原生界面的支持。所以唯一的办法 阅读全文

Omi命令行界面omi-cli发布

2017-02-27 10:23 by 【当耐特】, 777 阅读, 收藏, 编辑
摘要:"原文链接:https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi cli.md" 写在前面 通常认为,命令行界面(CLI)没有图形用户界面(GUI)那么方便用户操作。但是CLI比GUI节约资源,在熟悉命令之后,CLI会比GU 阅读全文

Omi实战-QQ附近用户列表Web页

2017-02-23 09:58 by 【当耐特】, 1253 阅读, 收藏, 编辑
摘要:"原文地址https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_nearby.md" 写在前面 Omi很适合大型复杂的Web页面开发,例如一些Web在线工具的开发。但是制作这种简单的QQ附近用户列表Web页,也不会有大炮哄蚊子的感觉 阅读全文

Omi教程-生命周期和事件处理

2017-02-22 10:47 by 【当耐特】, 737 阅读, 收藏, 编辑
摘要:生命周期 名称 含义 时机 constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完成,HTML已经插入页面之后执行 实例化 uninstall 卸载组件。执行remove方法会触发该事件 销毁时 befor 阅读全文

Omi教程-组件通讯攻略大全

2017-02-17 11:40 by 【当耐特】, 761 阅读, 收藏, 编辑
摘要:组件通讯 "Omi框架" 组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设置 childrenData 自动传递给子节点 声明 group data 传递(支持复杂数据类型 阅读全文

Omi教程-组件

2017-02-10 09:44 by 【当耐特】, 1223 阅读, 收藏, 编辑
摘要:组件 "Omi框架" 完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件 这里使用Todo的例子来讲解Omi组件体系的使用。 js class Todo extends 阅读全文

Omi原理-Hello Omi

2017-02-09 10:43 by 【当耐特】, 1149 阅读, 收藏, 编辑
摘要:Hello Omi "Omi框架" 的每个组件都继承自Omi.Component,本篇会去完成Omi的Component的基本锥形,让其能够渲染第一个组件。 omi.js实现 Omi.getInstanceId 用来给每个组件生成自增的ID Omi.render 用来把组件渲染到页面 基类Omi.C 阅读全文

Omi原理-环境搭建

2017-02-08 12:45 by 【当耐特】, 1664 阅读, 收藏, 编辑
摘要:环境搭建 "Omi框架" 使用 Webpack + ES6 的方式去开发;使用karma+jasmine来作为Omi的测试工具。 Karma介绍 Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到C 阅读全文

2017年试试Web组件化框架Omi

2017-02-07 10:45 by 【当耐特】, 2669 阅读, 收藏, 编辑
摘要:Open and modern framework for building user interfaces. Omi的Github地址 "https://github.com/AlloyTeam/omi" 如果想体验一下Omi框架,可以访问 "Omi Playground" 如果想使用Omi框架或 阅读全文

AlloyTouch实现下拉刷新

2017-01-09 11:46 by 【当耐特】, 1444 阅读, 收藏, 编辑
摘要:原文地址: "https://github.com/AlloyTeam/AlloyTouch/wiki/Pull to refresh" 效果展示 扫码体验 你也可以 "点击这里" 访问Demo 可以 "点击这里" 查看代码 背景 在手机QQ内部,其实客户端提供了下拉刷新的能力,拖动整个webvie 阅读全文

AlloyTouch实战--60行代码搞定QQ看点资料卡

2016-12-29 10:09 by 【当耐特】, 953 阅读, 收藏, 编辑
摘要:原文链接: "https://github.com/AlloyTeam/AlloyTouch/wiki/kandian" 先验货 访问DEMO你也可以 "点击这里" 源代码可以 "点击这里" 如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用All 阅读全文

AlloyTouch 0.2.0发布--鱼和熊掌兼得

2016-12-28 10:56 by 【当耐特】, 761 阅读, 收藏, 编辑
摘要:原文链接: "https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch 0.2.0" 背景 公司师姐昨日在KM发了篇长文,主要结论RAF+transform3d就是不如transition+transform3d平滑流畅,但是transition 阅读全文

Scoped CSS规范草案

2016-12-26 16:09 by 【当耐特】, 1253 阅读, 收藏, 编辑
摘要:原文链接: "https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped CSS" 写在前面 问:什么是Scoped CSS规范? Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。 面对组件化的普及,组件的复用很普遍 阅读全文

transformjs污染了DOM?是你不了解它的强大

2016-12-26 09:24 by 【当耐特】, 1394 阅读, 收藏, 编辑
摘要:原文链接: https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful transformjs 写在前面 上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添加属性太激进,不可取(由于不在那个微信群,不明白为什么React会谈到 阅读全文

AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

2016-12-22 11:06 by 【当耐特】, 5736 阅读, 收藏, 编辑
摘要:原文链接: "https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch FullPage Plugin" 先验货 插件代码可以在 "这里" 找到。 注意,虽然是扫码体验,但是AlloyTouch.FullPage特意对鼠标滚轮事件进行了兼容,所以 阅读全文

react动画难写?试试react版transformjs

2016-12-19 09:37 by 【当耐特】, 3156 阅读, 收藏, 编辑
摘要:简介 "transformjs" 在非react领域用得风生水起,那么react技术栈的同学能用上吗?答案是可以的。junexie童鞋已经造了个 "react版本" 。 动画实现方式 传统 web 动画的两种方式 : 1. 纯粹的CSS3 :如:transition/animation+transf 阅读全文

你必须收藏的Github技巧

2016-12-14 09:23 by 【当耐特】, 6579 阅读, 收藏, 编辑
摘要:一秒钟把Github项目变成前端网站 GitHub Pages大家可能都知道,常用的做法,是建立一个gh pages的分支,通过setting里的设置的GitHub Pages模块可以自动创建该项目的网站。 这里经常遇到的痛点是,master遇到变更,经常需要去sync到gh pages,特别是纯w 阅读全文

HTML5 Canvas玩转酷炫大波浪进度图

2016-12-13 11:52 by 【当耐特】, 4314 阅读, 收藏, 编辑
摘要:如上图所见,本文就是要实现上面那种效果。 由于最近 "AlloyTouch" 要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。 首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。 本文的代码你可以在这里 "https://github. 阅读全文

AlloyTouch Button插件-不再愁click延迟和点击态

2016-12-12 15:17 by 【当耐特】, 976 阅读, 收藏, 编辑
摘要:移动端不能使用click,因为click会有300ms。所有有了fastclick这样的解决方案。然后fastclick并没有解决点击态(用户点击的瞬间要有及时的外观变化反馈)的问题。hover会有不消失的问题,所有大家一般用:active。利用 :active 伪类来设置某元素被点击时的点击态样式 阅读全文

一分钟搞定AlloyTouch图片轮播组件

2016-12-09 12:54 by 【当耐特】, 1476 阅读, 收藏, 编辑
摘要:轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹。 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动。所以 "AlloyTo 阅读全文

AlloyTouch与three.js 3D模型交互

2016-12-07 09:41 by 【当耐特】, 1840 阅读, 收藏, 编辑
摘要:如你所见,上面的cube的旋转、加速、减速停止都是通过AlloyTouch去实现的。 演示 代码 factor需要自己不断去调试出最佳的值,让松手之后的惯性运动的速率和时间达到最佳的效果。 moveFactor需要自己不断去调试出最佳的值,就是让横向拖拽的距离映射到旋转的角度上达到最跟手的效果。 如 阅读全文

移动Web触摸与运动解决方案AlloyTouch开源啦

2016-12-05 15:26 by 【当耐特】, 1372 阅读, 收藏, 编辑
摘要:传送门 Github地址:https://github.com/AlloyTeam/AlloyTouch 简介 AlloyTouch的本质是运动一个数字,把数字的物理变化映射到你想映射的任何属性上。所以带来了广泛的应用场景。不论实在应用、游戏、操作系统等许多层面,监听用户触摸,给用户真实的运动反馈是 阅读全文

transformjs玩转星球

2016-12-05 08:19 by 【当耐特】, 2037 阅读, 收藏, 编辑
摘要:如你所见。这篇就是要讲下使用 "transformjs" 制作星球的过程。你也可以无视文章,直接去看源码和在线演示: "源码" | "在线演示" 代码100行多一点,直接看也没有什么压力。下面分几步讲解下。 生成球上点坐标 设球心为 (a,b,c),半径为r, 则球的标准方程为 (x a)²+(y 阅读全文

swing with transformjs

2016-11-29 10:39 by 【当耐特】, 638 阅读, 收藏, 编辑
摘要:Antecedent Facebook made a HTML5 game long time ago. The opening animation is a piece of software that is similar to tofu, the effect as shown below g 阅读全文

和transformjs一起摇摆

2016-11-28 13:06 by 【当耐特】, 1702 阅读, 收藏, 编辑
摘要:写在前面 记得以前facebook做过一款HTML5游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs和tweenjs去制作,基于Canvas的动画。基本的原理主要是:循环运动Canvas抽象的Disp 阅读全文

移动Web利器transformjs入门

2016-11-25 11:06 by 【当耐特】, 6903 阅读, 收藏, 编辑
摘要:简介 在过去的两年,越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候,都使用了 "transformjs" ,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣。(当然transformjs不仅仅支持移动设备, "支持CSS3 3D Transforms的浏览器" 都能正常 阅读全文

超小Web手势库AlloyFinger原理

2016-11-11 10:01 by 【当耐特】, 2493 阅读, 收藏, 编辑
摘要:目前 "AlloyFinger" 作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用。 感兴趣的同学可以去Github看看: "https://github.com/AlloyTeam/AlloyFinger" 在腾讯,如:兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 阅读全文

时光倒流程序设计-AlloyTicker

2016-07-25 11:10 by 【当耐特】, 1485 阅读, 收藏, 编辑
摘要:熵与负熵 熵遵循熵增原理,即无序非热能与热能之间的转换具有方向性。薛定谔说过:生命本质在于负熵。熵代表的是无序,负熵就是熵的对立,而负熵表示的则是有序。汲取负熵(米饭、面包、牛奶、鸡蛋),可以简单的理解为从外界吸收了物质或者能量之后,转化成负熵流,使系统的熵降低,人体变得更加有序。 那么一直吃饭为何 阅读全文

AlloyRenderingEngine燃烧的进度条

2015-05-25 09:25 by 【当耐特】, 2115 阅读, 收藏, 编辑
摘要:写在前面Github: https://github.com/AlloyTeam/AlloyGameEngineHTML 5新增了progress标签,那么再去使用AlloyRenderingEngine去模拟进度条是否多余? 不多余。有四大好处: 样式更加灵活(想怎么绘制就怎么绘制) ... 阅读全文

AlloyRenderingEngine文本框组件

2015-05-20 09:36 by 【当耐特】, 918 阅读, 收藏, 编辑
摘要:写在前面Github: https://github.com/AlloyTeam/AlloyGameEngine在dom元素里,自带了input标签,设置其type为text,它就是一个文本框。那么在Canvas中模拟input文本框是不是闲的没事找事?绝对不是!因为在游戏当中可以统一化像素管理,具... 阅读全文

AlloyRenderingEngine继承

2015-04-28 14:59 by 【当耐特】, 859 阅读, 收藏, 编辑
摘要:写在前面不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine然后star一下,多谢支持:)。前几天发了篇向ES6靠齐的Class.js,当初jr为什么不把父类的实例暴露给子类,其原因还是为了延续原型继承的习惯,子类重写就... 阅读全文

AlloyRenderingEngine之Shape

2015-04-23 16:49 by 【当耐特】, 786 阅读, 收藏, 编辑
摘要:写在前面不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine然后star一下,多谢支持:)。游戏或者应用中,不是所有的地方都是贴图,Shape 也有很常见的应用场景,如游戏中显示HP的血条。大量的Shape可以组成矢量图... 阅读全文

AlloyRenderingEngine入门

2015-04-17 16:46 by 【当耐特】, 1254 阅读, 收藏, 编辑
摘要:##写在前面AlloyRenderingEngine是一款非常快速的渲染引擎,目前该项目已经合并至 https://github.com/AlloyTeam/AlloyGameEngine/ ,属于AlloyGameEngine下的一个子项目,负责渲染。因为游戏===复杂的App,所有AlloyGa... 阅读全文

spritecow改造

2015-03-09 09:47 by 【当耐特】, 2066 阅读, 收藏, 编辑
摘要:快速入口 不读文章可以直接拐向这里: spritecow二代:https://kmdjs.github.io/arejs tool sprite/ 写在前面 工欲善其事必先利其器,最近fork了一份spritecow代码进行了大量升级改造, 作为 "AlloyRenderingEngine"... 阅读全文

一步一步HTML5粒子编辑器

2015-01-24 08:44 by 【当耐特】, 4279 阅读, 收藏, 编辑
摘要:写在前面大家阅读此文之前,可以先看一篇MiloYip的文章:用JavaScript玩转游戏物理(一)运动学模拟与粒子系统,看完之后再看此文,更加容易理解。MiloYip使用的粒子是canvas中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量... 阅读全文

码农干货系列【10】--光线追踪进阶:javascript玩转3D纹理映射

2013-03-18 07:59 by 【当耐特】, 6587 阅读, 收藏, 编辑
摘要:简介 本文在光线追踪的基础之上,为了追求渲染速度和效率,去除了光线的反射、去除了透视投影(如我前面两篇干货8和干货9,所以渲染虽然是3D场景,其实不是真实看到的,但不影响实验),进行了一些有趣的尝试。此文将分享这两天尝试的成果:3D雕刻。 3D雕刻,顾名思义--在... 阅读全文

码农干货系列【9】--javascript光线追踪基础

2013-03-12 16:31 by 【当耐特】, 3218 阅读, 收藏, 编辑
摘要:简介 光线追踪(ray tracing)(也叫raytracing或者光束投射法)是一个在二维(2D)屏幕上呈现三维(3D)图像的方法。为了尝试光线追踪算法,并且尽可能得保证javascript代码精炼,我做了一些尝试。 射线与球体相交检测 最开始尝试了射线与球体的相交检测(不计算交点),只判断相交还是未相交。代码如下所示: var Vector3 = function (x, y, z)... 阅读全文

码农干货系列【8】--世界上最简单的3D渲染(no webgl)

2013-03-10 21:02 by 【当耐特】, 4134 阅读, 收藏, 编辑
摘要:简介 进行上图所示的3D格子地板的渲染,需要进行Canvas的像素级别操作,从视点连接屏幕(屏幕就是canvas)中的所有像素点,形成大量的射线,倘若射线与地板相交,把交点以及交点的颜色反馈给屏幕(canvas)。如下图所示: 像素操作 在进行3D渲染之前,必须了解Canvas的像素操作相关概念。在给定了width和height的canvas上,在坐标(x ,y)上的像素的inde... 阅读全文

码农干货系列【4】--图像识别之矩形区域搜索

2012-07-23 07:37 by 【当耐特】, 8256 阅读, 收藏, 编辑
摘要:简介 定位某个图片的矩形区域是非常有用的,这个可以通过手动的选择某个区域来实现定位,图片相关的软件都提供了这个功能;也可以像本篇一个通过程序来实现智能定位。前者会有误差,效率低下;后者选区精度高,效率高。 应用场景 1.精灵编辑器或者css sprites辅助工具(当我们需要逆着TexturePacker行事的时候),如下图所示: 2.手写识别输入 因为我们不能保证用户输入... 阅读全文

赠书:血战HTML5消除游戏,赢《HTML5实验室:Canvas世界》

2012-07-03 08:00 by 【当耐特】, 10452 阅读, 收藏, 编辑
摘要:简介近日,《HTML5实验室:Canvas世界》已经出版了。欲赠送园友,思来想去,还是以游戏比拼的方式赠送园友,既然是一本HTML5的书(其实是本跨平台的书),那就用一款HTML5游戏作为竞技游戏,所以就花了几个小时的时间做了一款消除游戏(新浪小游戏总排名第一的那款)。暂时定为3---7本(个人赠送)。如果出版社支持的话,将赠送更多更多。赠送的标准是:分数从高至低排序,取排名靠前的几位园友。如果某个园友很厉害,占据了榜单前几名怎么办?没有关系,同一个博客园ID只赠送一本。所以记得先登录哦!!ps1:如果随机数被破解,园友保存好高分截图备用有关本书本书使用HTML5的Canvas作为实验平台,J 阅读全文

HTML5 OO实践

2012-03-29 08:42 by 【当耐特】, 7621 阅读, 收藏, 编辑
摘要:简介人工智能(Artificial Intelligence) ,英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴,但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令(智商),本篇内容中相关算法适用于子弹追踪等塔防类游戏当中。基础类二维向量(2D vector)可谓2D游戏或是动画里最常用型别了。这里二维向量用Vector2类实现,用(x, y)表示。 Vector2亦用来表示空间中的点(point),而不另建类。先看代码:1 (function(window){2varVector2=fu 阅读全文

HTML5 Canvas【所见===所得】编程工具正式发布

2012-03-28 08:28 by 【当耐特】, 10952 阅读, 收藏, 编辑
摘要:+ - 使用指南 基本使用: var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18... 阅读全文

HTML5 Canvas开发者和读者的福音

2012-03-27 12:25 by 【当耐特】, 5109 阅读, 收藏, 编辑
摘要:演示今天看到可见即可得的编程 ,其中是在svg中实现的。理所当然,它可以搬到 canvas当中,而且支持canvas动画播放,而不是仅仅是静态的svg。效果如下所示: Your browser does not support the canvas element. 修改颜色(fillsStyle)或者count或者angle等值试试!var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext("2d");function taiji(x, y, radius, a 阅读全文

HTML5 【IE9割绳子】制作教程来袭····

2012-03-26 08:04 by 【当耐特】, 7860 阅读, 收藏, 编辑
摘要:回顾 与“Angry Birds”一样,2010年发布的“割绳子”是一款火爆的手机游戏,首先推出的是iOS版,于去年6月份推出Android版。它的游戏内容是:一个叫Om Nom的绿怪兽饿了,你必须喂他糖果,而要得到糖果,你要先割断绳子以及操纵安全气袋和泡泡,过程中还要收集星星来获取额外积分。 为了进一步宣传IE9和华丽的Web应用程序,微软与该款游戏的开发商ZeptoLab联合推出了HTML... 阅读全文

HTML5热门游戏制作---没有99美元的Impact也行

2012-03-06 08:38 by 【当耐特】, 8245 阅读, 收藏, 编辑
摘要:Impact 简介Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.Impact 一款让开发者在桌面浏览器和移动终端浏览器开发优秀的HTML5游戏的javascript游戏引擎。官网地址:http://impactjs.com/售价:99美元其中的最受欢迎且耳熟能详的莫过于下面这款:这是一个打字射击游戏,该游戏被国外很多网站评选为二十款优秀游戏之一。综合分析了一下该款游戏,总体感觉----注重细节。游戏技术要素1.资 阅读全文

绕中心旋转

2011-12-12 07:33 by 【当耐特】, 21601 阅读, 收藏, 编辑
摘要:一.简介 本文告诉读者在Canvas中怎么绕中心旋转,通过此方法模拟出一个2D平面内的水珠,涉及的知识点和技巧包括:Jscex基础知识,贝塞尔曲线的绘制,合理利用CanvasRenderingContext2D的translate和rotate等API。 二.绘制椭圆 在模拟水滴之前,我们先思考一下怎么在canvas当中绘制一个椭圆。 大家可以很容易想到 下面几种方案: 1.根据椭圆笛卡尔坐标系方程绘制 2.根据椭圆极坐标方程绘制 3.根据椭圆曲率变化绘制 4.利用四条贝塞尔曲线绘制 第四中,也是性能最好的一种,这样可以避免复杂的计算,充分利用Ca... 阅读全文

HTML5游戏制作完全指南

2011-12-08 18:28 by 【当耐特】, 17472 阅读, 收藏, 编辑
摘要:简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的Canvas制作一款游戏吗?跟着这个教程,你将立刻上道儿。 阅读该教程需要至少熟悉javascript相关知识。 你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。 创建画布 在画任何东西之前,我们必须创建一个画布。因... 阅读全文

怎么把CanvasLoading插件嵌入你的游戏

2011-12-07 17:01 by 【当耐特】, 3156 阅读, 收藏, 编辑
摘要:一.简介 CanvasLoading插件适用于任何基于Canvas游戏的loading过程展示。 二.插件源码 Loading = function (text, fontSize,baseFontSize, color, position, interval, font, bolder) { this.text = text; this.fontSize = fontSize; this.baseFontSize=baseFontSize; this.color = colo... 阅读全文

Jscex版Loading插件V11.12.05发布

2011-12-05 17:22 by 【当耐特】, 2761 阅读, 收藏, 编辑
摘要:一.简介 本插件适用于基于Canvas的游戏loading过程中的显示。 更新内容: a.loading显示的文字可配置 b.文字大小可配置 c.文字位置可配置 d.文字与文字的间距可配置 e.文字颜色、字体、是否加粗可配置 二.插件源码 Vector2 = function (x, y) { this.x = x || 0; this.y = y || 0; }; Loading = function (text, fontSize, color, pos... 阅读全文

Jscex版Loading插件预览版本抢先看

2011-12-04 17:30 by 【当耐特】, 2611 阅读, 收藏, 编辑
摘要:一.简介 在大量游戏制作过程当中,必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到,比如《XXX》的Loading 一个好的Loading,可以给用户不错... 阅读全文

借来的创意

2011-12-01 08:54 by 【当耐特】, 3978 阅读, 收藏, 编辑
摘要:一.简介 计数是一种最简单基本的运算,计数器就是实现这种运算的逻辑电路,计数器在数字系统中主要是对脉冲的个数进行计数,以实现测量、计数和控制的功能,同时兼有分频功能,计数器是由基本的计数单元和一些控制门所组成,计数单元则由一系列具有存储信息功能的各类触发器构成,这些触发器有RS触发器、T触发器、D触发器及JK触发器等。计数器在数字系统中应用广泛,如在电子计算机的控制器中对指令地址进行计数,以便顺序取出下一条指令,在运算器中作乘法、除法运算时记下加法、减法次数,又如在数字仪器中对脉冲的计数等等。计数器可以用来显示产品的工作状态,一般来说主要是用来表示产品已经完成了多少份的折页配页工作。它主... 阅读全文

你必须知道的10个提高Canvas性能技巧

2011-11-29 17:07 by 【当耐特】, 22617 阅读, 收藏, 编辑
摘要:你还在抱怨自己写的canvas demo徘徊在10帧以下吗?你还在烦恼打开自己写的应用就听见CUP风扇转吗?你正在写一个javascript Canvas库吗?那么下面九点就是你必须知道的! 一.预渲染 错误代码: var canvas = document.getElementById("myCanvas"); var context = this.canvas.getContext('2d'); var drawAsync = eval(Jscex.compile("async", function () { while (true) 阅读全文

Text Particle Systems

2011-11-25 08:41 by 【当耐特】, 2753 阅读, 收藏, 编辑
摘要:一.简介 在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择: 1.Flash制作的文字特效 2.制作一个动态的GIF 3.Javascript+dom+css 4.SVG 二.javascript+Canvas文字特效 这篇我为大家介绍第五种,也是最强大的一种,上面四种都有局限性。 我使用的是javascript+Canvas,当然我们依然用Jscex,为什么Canvas制作文字特效最强大?? 因为Canvas支持像素级别操作,它不仅可以宏观上制作一些文字特效,也可以深入实现文字粒子系统特效----Text Particle Systems。 当然... 阅读全文

参赛作品

2011-11-22 07:29 by 【当耐特】, 5945 阅读, 收藏, 编辑
摘要:一.简介 3D贪吃蛇是贪吃蛇游戏的3D版本。通过摄取食物,累积数量来通关,随着摄取食物的增加,蛇身体会慢慢变长变肥大。游戏开放了许多快捷键,方便玩家操作。游戏一共七个关卡,一关比一关难。最后一关的随机障碍物更加是玩家的噩梦。为了获取更好的游戏体验,推荐使用谷歌浏览器或者枫树浏览器。 二.游戏框架和开发团队 这个游戏是使用Jscex作为动画引擎,使用Three.js框架作为3D引擎开发的HTML5游戏. 使用到的HTML5特性主要包括Canvas, CSS3 (按钮),没有使用WebGL。后期打算加入localStorage存储关卡信息。 在游戏中, 控制小蛇躲避前方的障碍物... 阅读全文

Canvas+Video打造酷炫播放体验

2011-11-21 08:32 by 【当耐特】, 15325 阅读, 收藏, 编辑
摘要:一.简介 直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。如: <video src="movie.ogg" controls="controls"></video>二.Canvas+VideoHTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。 drawImage函数有三种函数原 阅读全文

令人震撼的表白,你hold住吗?

2011-11-15 09:02 by 【当耐特】, 16667 阅读, 收藏, 编辑
摘要:一.简介 为什么程序员单身的多呢?因为面向对象的编程中,经常会遇到一个错误:找不到对象。 本文也属于单身程序员的福音范畴,让单身程序员勇敢示爱·····,但是老天保佑你的示爱对象不要用IE678~~ 本文动画效果全部基于Jscex,然后结合一些函数、粒子系统、重力场实现。下一篇带来作品讲解,本篇先饱饱眼福。 二.作品一:心碎 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head& 阅读全文

爱♥曲线,单身程序猿福音

2011-11-07 08:41 by 【当耐特】, 9409 阅读, 收藏, 编辑
摘要:一.笛卡尔♥ 笛卡尔(René Descartes)是17 世纪著名的法国哲学家、数学家,有着“现代哲学之父”的称号。笛卡尔对数学的贡献也是功不可没,他创造了解析几何,开创了数学、物理学、天文学、地质学等诸多学科的新时代。 传闻,笛卡尔曾流落到瑞典,邂逅美丽的瑞典公主克里斯蒂娜(Christina)。笛卡尔发现克里斯蒂娜公主聪明伶俐,便做起了 公主的数学老师, 于是两人完全沉浸在了数学的世界中。国王知道后,认为笛卡尔配不上自己的女儿,不但强行拆散他们,还没收了之后笛卡尔写给公主的所有信件。后来,笛卡尔染上黑死病,在临死前给公主寄去了最后一封信,信中只有一行字:r=a(1-sinθ)。 阅读全文

2011-11-01 13:57 by 【当耐特】, 3418 阅读, 收藏, 编辑
摘要:一.简介 圆锥,数学领域术语,有两种定义。 解析几何定义:圆锥面和一个截它的平面(满足交线为圆)组成的空间几何图形叫圆锥。 立体几何定义:以直角三角形的一条直角边所在直线为旋转轴,其余两边旋转形成的面所围成的旋转体叫做圆锥。该直角边叫圆锥的轴 。 二.圆锥模拟 通过以上两个定义,我可以模拟出圆锥上所有的点: var pointPositions = []; for (var i = -100; i < 200; i += 10) { var xTemp = getRandomNumber(-i, i); ... 阅读全文

WAVE

2011-10-31 10:53 by 【当耐特】, 3467 阅读, 收藏, 编辑
摘要:一.简介 波,在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播,这个物理量(或其扰动,下同)成为空间位置和时间的函数,而且是这样的函数,即在时间t出现在空间r处周围的分布,会在时间(t+t┡)出现在空间(r+vt┡)的周围。 v一般说是个常矢量,就是有关物理量(或其扰动)的传播速度。物理量函数称为波函数,数学上它是一个叫波动方程的在特定边界条件下的解。 物理定义:某一物理量的扰动或振动在空间逐点传递时形成的运动。不同形式的波虽然在产生机制、传播方式和与物质的相互作用等方面存在很大差别,但在传播时却表现出多方面的共性,可用相同的数学方法描述和处理。 二.实现 ... 阅读全文

世界上最短的时钟代码!更短的,有木有?

2011-10-16 09:15 by 【当耐特】, 15124 阅读, 收藏, 编辑
摘要:一.简介Processing.js作者是John Resig,这是继Jquery之后,他的第二个力作。Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序,教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图,波线,粒子,绘制分子结构,当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。Processing.js是一个开放的编程... 阅读全文

javascript异步编程系列【十一】----HTML5 canvas编程入门游戏发布

2011-10-08 07:41 by 【当耐特】, 6067 阅读, 收藏, 编辑
摘要:一.简介1976年,Gremlin平台推出了一款经典街机游戏Blockade。游戏中,两名玩家分别控制一个角色在屏幕上移动,所经之处砌起围栏。角色只能向左、右方向90度转弯,游戏目标保证让对方先撞上屏幕或围栏。 听起来有点复杂?其实就是下面这个样子: 基本上就是两条每走一步都会长大的贪吃蛇比谁后完蛋,玩家要做的就是避免撞上障碍物和越来越长的身体。更多照片、视频可以看 GamesDBase 的介绍。 Blockade 很受欢迎,类似的游戏先后出现在 Atari 2600、TRS-80、苹果 2 等早期游戏机、计算机上。但真正让这种游戏形式红遍全球的还是21年后随诺基亚手机走向世界的贪吃蛇游戏—— 阅读全文

CnBlogs博文demo演示技巧比较:jsfiddle完胜

2011-10-07 20:46 by 【当耐特】, 20282 阅读, 收藏, 编辑
摘要:一.简介如果你是一名前端博主,你希望通过代码+演示来透彻的讲解一些技巧,并且无缝嵌入你的博客,那么jsfiddle是一个很好的选择。本文将比较博客园前端dev们各种演示方式,大家可以挑选自己喜欢的方式。二.jsFiddle简介jsFiddle的官方网站:http://jsfiddle.net/它包括了顶端的控制按钮,如下图:分别代表:运行、保存、重置、代码格式化,代码语法错误检查下面的4个windows你可以分别调试HTML,CSS,Javascript,右下角显示代码的运行结果。在左边的操作区,你可以选择相关的js类库,支持的还是相当全的。当然,也支持自定义的类库,这个很不错。这个工具可以有 阅读全文

HTML5实验室系列【目录】

2011-09-30 19:23 by 【当耐特】, 3855 阅读, 收藏, 编辑
摘要: 阅读全文

摄像机、投影、3D旋转、缩放

2011-09-23 08:18 by 【当耐特】, 19384 阅读, 收藏, 编辑
摘要:简述3D效果分两种,一种是伪3D骨架,一种是3D实体.3D骨架:是通过大量的计算将3D世界中所有点投影到二维平面中。3D实体:通过摄像机向投影面发射射线与世界中的物体交汇,把与物体交汇点的颜色渲染到投影面(光线追踪的基础) 。本系列的所有演示都是3D骨架,非3D实体。本文将穿插图片、公式、代码、演示... 阅读全文