代码改变世界

2017年试试Web组件化框架Omi

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

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

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

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

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

Scoped CSS规范草案

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

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

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

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

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

react动画难写?试试react版transformjs

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

你必须收藏的Github技巧

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

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

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

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

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

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

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

Using AlloyTouch to control three.js 3D model

2016-12-08 08:50 by 【当耐特】, 724 阅读, 收藏, 编辑
摘要: As you can see, the above cube rotation, acceleration, deceleration stop all through the AlloyTouch to achieve. Demo(Mobile) Code factor need to conti阅读全文

AlloyTouch与three.js 3D模型交互

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

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

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

transformjs玩转星球

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

swing with transformjs

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

getting started with transformjs

2016-11-26 16:31 by 【当耐特】, 846 阅读, 收藏, 编辑
摘要: Introduction In the past two years, more and more friends for mobile web development have used the "transformjs" . I will introduce it in order to all阅读全文

移动Web利器transformjs入门

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

腾讯AlloyTeam移动Web裁剪组件AlloyCrop正式开源

2016-11-17 11:12 by 【当耐特】, 3044 阅读, 收藏, 编辑
摘要: 传送门 Github地址: "https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop" 在线Demo演示: 简介 裁剪图片的应用场景有头像编辑、图像编辑,在移动端要配合手势以及进行触摸反馈来进行变形以确认用户的选区进行裁剪。Al阅读全文

Why AlloyFinger is so much smaller than hammerjs?

2016-11-15 10:35 by 【当耐特】, 1111 阅读, 收藏, 编辑
摘要: "AlloyFinger" is the mobile web gesture solution at present inside my company, major projects are in use. You can browse the source on GitHub: "https:阅读全文

超小Web手势库AlloyFinger原理

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

漫谈Nuclear Web组件化入门篇

2016-11-05 16:46 by 【当耐特】, 1199 阅读, 收藏, 编辑
摘要: 目前来看,团队内部前端项目已全面实施组件化开发。组件化的好处太多,如:按需加载、可复用、易维护、可扩展、少挖坑、不改组件代码直接切成服务器端渲染(如 "Nuclear" 组件化可以做到,大家叫同构)... 怎么做到这么强大的优势,来回忆下以前见过的坑,或者现有项目里的坑。 CSS层叠样式?保佑不要污阅读全文

时光倒流程序设计-AlloyTicker

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

kmdjs集成uglifyjs2打造极致的编程体验

2016-06-14 19:13 by 【当耐特】, 834 阅读, 收藏, 编辑
摘要: 回顾 "上篇" 文章大概展示了kmdjs0.1.x时期的编程范式: 如下面所示,可以直接依赖注入到function里, 也可以直接在代码里把full namespace加上来调用,如: 而且,在循环依赖的场景,因为执行顺序的问题,会导致第一种方式注入undefined,所以循环依赖的情况下只能用fu阅读全文

kmdjs和循环依赖

2016-06-13 18:26 by 【当耐特】, 812 阅读, 收藏, 编辑
摘要: 循环依赖 循环依赖是非常必要的,有的程序写着写着就循环依赖了,可以提取出一个对象来共同依赖解决循环依赖,但是有时会破坏程序的逻辑自封闭和高内聚。所以没解决好循环依赖的模块化库、框架、编译器都不是一个好库、框架、编译器。 kmdjs的本质就是{},从{}扩展出的tree。从很早的版本就开始,是支持循环阅读全文

超级小的web手势库AlloyFinger发布

2016-05-26 09:50 by 【当耐特】, 3041 阅读, 收藏, 编辑
摘要: 简介 针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了。拥有两个版本,无依赖的独立版和react版本。除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相阅读全文

移动web开发调试工具AlloyLever介绍

2016-05-10 13:27 by 【当耐特】, 2612 阅读, 收藏, 编辑
摘要: 简介 web调试有几个非常频繁的刚需:看log、看error、看AJAX发包与回包。其他的如timeline和cookie以及localstorage就不是那么频繁,但是AlloyLever都支持。如你所见: 特征 点击alloylever按钮之间切换显示或隐藏工具面板 Console会输出所有用户阅读全文

零基础制作物理引擎--创造力量

2016-01-07 09:41 by 【当耐特】, 3961 阅读, 收藏, 编辑
摘要: 写在前面 "上篇" 其实有重力,但是重力是经过重心,可以把物体看出质点,问题就变得简单,经过重心只产生线速度,不产生角速度。 这篇文章的力量其实是指:力(Force)和冲量(Impulse),不一定过重心。 边写引擎过程中,边补习牛顿经典力学体系,但是依然记得大学时候物理老师反复强调:“牛顿错了,牛阅读全文

零基础制作物理引擎--创造世界

2016-01-06 10:36 by 【当耐特】, 9115 阅读, 收藏, 编辑
摘要: 写在前面 2011年在写了个物理引擎,期间重新啃起了物理课本,一晃就是5年, 当年自己写的物理引擎的代码又阅读一遍,受益匪浅,加上最近制作坦克争霸使用Box2d的思考,对物理引擎管线又有了新的认识和体会。 人除了造人,还可以是造世界,这两种时候人能够扮演上帝的角色。有人会说:“几个小球撞来撞球算哪...阅读全文

折线转曲线

2015-09-15 10:12 by 【当耐特】, 2848 阅读, 收藏, 编辑
摘要: 写在前面 这个东西其实是有价值的东西。因为在软体模拟、数学方程可视化、流体模拟、数据可视化等等方面都有其用武之地。 如水的模拟: 心形函数方程转图像 线性报表 其原理都是通过三次贝塞尔曲线将有限个数的点平滑化。 问题建模 已知若干个点,绘制出该点连接的曲线。 这里实验平台使用浏览器环境,即Canva阅读全文

Nuclear开始

2015-07-13 12:46 by 【当耐特】, 1639 阅读, 收藏, 编辑
摘要: #为什么Nuclear这里列举Nuclear在竞品中的优势:- 借助浏览器本身的机制,无任何代码约定和入侵- 放心使用HTML+CSS+JS- observejs替代EventLoop、requestAnimationFrame、Ticker等定时循环- 解决MV*无法构建复杂特效的难题,随意构建超...阅读全文

AlloyRenderingEngine燃烧的进度条

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

AlloyRenderingEngine文本框组件

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

observejs改善组件编程体验

2015-05-18 08:49 by 【当耐特】, 1588 阅读, 收藏, 编辑
摘要: 传送门 observejs:https://github.com/kmdjs/observejs 本文演示:http://kmdjs.github.io/observejs/list/ 本文代码:https://github.com/kmdjs/observejs/tree/master/examp阅读全文

强大的observejs

2015-05-07 17:39 by 【当耐特】, 4149 阅读, 收藏, 编辑
摘要: ##写在前面各大MVVM框架的双向绑定太难以观察,很难直观地从业务代码里知道发生了什么,我不是双向绑定的反对者,只是认为双向绑定不应该糅合进底层框架,而应该出现在业务代码中,或者是业务和框架之间的代码上,由开发者实现,由开发者决定观察什么,决定响应什么。以及Object.observe的支持度不够好...阅读全文

Reactjs-JQuery-Omi-Extjs-Angularjs对比

2015-05-06 12:22 by 【当耐特】, 23137 阅读, 收藏, 编辑
摘要: 写在前面 前端越来越混乱了,当然也可以美其名曰:繁荣。 当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? 那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所适从 = =! 本篇拿一注册功能作为样本,使用各种框架去实现功能,从而对比各种方式的优劣。 JQuery 阅读全文

AlloyRenderingEngine继承

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

AlloyRenderingEngine之Shape

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