TAT.simplehuang React Native 之 JSBridge
In HTML5,JavaScript,Web开发 on 2015年05月10日 by view: 8,148
4

React Native综述:

在React Native中,JavaScript跟Object-C均有一个对应的中间件负责交互,源码中称为bridge,它们通过callback的形式进行传参,通过参数配置来触发OC的控件,从而达到以JavaScript来控制Native的目的。

React Native的设计理念:既拥有Native的用户体验、又保留React的开发效率。

React Native的口号:Learn Once,Write Anywhere.

 

TAT.dnt AlloyRenderingEngine入门
In HTML5,Web开发 on 2015年04月17日 by view: 2,995
4

写在前面

AlloyRenderingEngine是一款非常快速的渲染引擎,目前该项目已经合并至https://github.com/AlloyTeam/AlloyGameEngine/ ,

属于AlloyGameEngine下的一个子项目,负责渲染。

因为游戏===复杂的App,所有AlloyGameEngine不仅可以做游戏,也可以制作App,比如: http://kmdjs.github.io/ppt-editor/

用AlloyGameEngine制作App,如大炮轰蚊子。

TAT.sheran 自适应设计与响应式网页设计
In CSS3,HTML5 on 2015年04月14日 by view: 17,533
5

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。

在这先说明下这两者的异同:

自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

ES6 Generator介绍
In HTML5,JavaScript,Node.js,Web开发 on 2015年03月30日 by view: 9,639
5

TAT.bizai HTTP2.0的奇妙日常
In HTML5,Web 前端资讯,Web开发 on 2015年03月23日 by view: 20,287
32
    【交代:时间是在距今的5年后,由于我的智能滑板鞋,还有智能小内内的创业失败,为了在这个先看胸再看脸的时代活下去,我不得不重操旧业,去面试web前端工程师的工作。多年没有接触web开发了,找了个AlloyTeam的老同事晨伯帮我温习一下知识,好让面试通过】
    
    “多年没见,你的女神后来什么样了”晨伯总是这么八卦我的女神,而不是我。
    “我给你一个表情,你自己体会一下”youshang_small
    “你先写个小页面给我看看吧,我指导一下你吧。”晨伯一幅很吊的样子。
但是这样的小case当然难不了我,虽然多年没碰web,但是我当年可以是AlloyTeam的成员啊。很快我就啪啪啪地完成了页面。晨伯看完我写的页面,一幅“我可是有女朋友的男人”的表情,感叹了一句“现在是HTTP2.0的时代啦,给你普及一下知识点”。
 

写在前面

大家阅读此文之前,可以先看一篇MiloYip的文章:用JavaScript玩转游戏物理(一)运动学模拟与粒子系统,看完之后再看此文,更加容易理解。

MiloYip使用的粒子是canvas中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量太多,甚至要配合一些nosie算法,如(perlin nosie),计算量太大。

所以一般会先设计好粒子的纹理(每个纹理假设是32*32,一个粒子就包含了九百多个像素了),这样需要的粒子个数不多,计算量也不大,管理粒子的成本也不高(对粒子增删改查)。

canvas globalCompositeOperation

粒子系统在什么时候最漂亮?晚上!所以在绘制纹理的时候,需要设置globalCompositeOperation 的值为lighter。其作用是:在图形重叠的地方,颜色由两种颜色值的加值来决定。

globalCompositeOperation 还有非常多的属性可以设置,详情见:w3school。

这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正。

在真正进入Web Audio API 开发之前,需要先弄清两个概念:音频上下文(AudioContext)、音频节点(AudioNode);

Web Audio API 是一套以音频上下文(AudioContext)为基础的接口系统;基本上每一次的开发都需要第一个用到,

看下W3C对AudioContext的描述:

This interface represents a set of AudioNode objects and their connections. It allows for arbitrary routing of signals to the AudioDestinationNode (what the user ultimately hears). Nodes are created from the context and are then connected together. In most use cases, only a single AudioContext is used per document.

大意是一个AudioContext代表一系列音频节点以及节点之间的连接方式,它允许一个或以上的音频信号在经过任意的连接之后最终连接在音频播放设备节点上;节点都是可以通过音频上下文对象然后连接到了一起;通常一个文档中只需要一个一个音频上下文对象即可。

TAT.Jdo 【Web Audio API】 — 那些年的 web audio
In HTML5,JavaScript on 2014年12月27日 by view: 13,324
2

这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正。

在这之前,先回顾一下那些年我们一起走过的web audio:

<bgsound>

在我印象当中,bgsound是个很古老的东西,接触互联网之后,那时兴起的个人blog都有一个增加小组件或者背景音乐的功能,就是允许你贴入一段代码来实现,那是我最早接触bgsound的时候;当然那时也只是会ctrl+c/v ~~

网上翻来些资料,大概是这样的:

早在1996年,IE3.0定义了<bgsound>的标签,这应该web最早的一个能播放音频的标签;但它却从未成为标准,由始至终只有IE支持该标签;提供的功能比较有限,简单的后台自动播放,支持.wav|.mid|.ua格式音频;

前端突击队宣传banner
去年CodeStar第一季《前端特工》带来的热潮还没完全过去,3月21号,短短几个月后AlloyTeam团队又强势推出了CodeStar第二季《前端突击队》,这次又将会给各位前端er带来什么视觉、体验和智力挑战上的盛宴?

AlloyDesigner介绍

  AlloyDesigner 的创意来自于“临摹”的灵感,使用AlloyDesigner后,你可以把设计稿拖进你的Web页面铺在页面的最底层,然后就可以对着设计稿来构建DOM元素和CSS样式啦,这样子是不是直观了很多?通过AlloyDesigner直观地调整页面,迅速达到与视觉稿一致的目的。

AlloyDesigner的官网:http://alloyteam.github.io/AlloyDesigner/

 

alloydesigner5