叶落为重生每片落下的叶子都是为了下一次的涅槃...^_^

上一页 1 2 3 4 5 6 7 8 下一页

2011年12月22日 #

【备忘】bounce ease

摘要： 偶尔会用到弹簧类似的缓动效果，就是不是直接从 A点缓动到B点， 而是 从A点出发，但是到最终停在B点之前，会以阻尼的方式在B点来回若干次。类似弹簧一样。 其实已有 bounce ease 的算法公式，比如：Bounce: { easeIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2. 阅读全文

posted @ 2011-12-22 21:58 岑安 阅读(911) 评论(7) 推荐(0) 编辑

2011年12月20日 #

Particles Text

摘要： testtest 阅读全文

posted @ 2011-12-20 10:19 岑安 阅读(308) 评论(0) 推荐(0) 编辑

2011年12月4日 #

逐帧动画 and 有限状态机（fsm）

摘要： 【逐帧动画】其实就canvas而言，和flash有太多相似的地方。最直接的一点：比如把一个object从a点移动到b点。并不是直接去改变object的位置，而是把a点的object擦掉，在b点重新画一个。这其实和我们儿时喜爱的动画原理一致的。电视机里播放的好看的动画，早期都是由我们的动画制作者一帧一帧画出来的。一秒30帧或者其他数。快速的转变欺骗我们的眼睛。如今的web动画，尤其是web Game一块，因为大量复杂绚丽的原因，简单依靠底层矢量的绘制基本已经不能满足需求。更多的，或者说更实际可用的是怎么把一张张图片资源连接到一起变成动画的方法。dom里面background 本身支持backgr 阅读全文

posted @ 2011-12-04 19:28 岑安 阅读(4107) 评论(5) 推荐(4) 编辑

2011年11月9日 #

组内分享slide 【about 3D】

摘要： 请用webkit内核的浏览器查看以下slide，左右拖拽即可。(_blank的demo若有问题，请刷新下) 阅读全文

posted @ 2011-11-09 12:30 岑安 阅读(1202) 评论(3) 推荐(1) 编辑

2011年10月27日 #

Chaikin Curve(球面插值)

摘要： 在两条折线间完成平滑的过渡是 用画布做UI 或者做类似地图编辑器一类的工作的 很常见的任务。怎么样化方为圆是决定工作效率的很重要的因素。（当需要编辑的曲线多起来， 复杂起来的时候，这会是件相当繁重的工作）最容易想到的莫非是 贝塞尔曲线，而且时下几乎所有主流的数学算法库或者画布api 都已经很好的支持了贝塞尔曲线的绘制。 并能提供很便利的接口，通常只需知道 开始位置， 结束位置 ，以及贝塞尔控制点 就可生成一条贝塞尔曲线。例如：context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); 贝塞尔曲线的 阅读全文

posted @ 2011-10-27 19:04 岑安 阅读(3936) 评论(6) 推荐(2) 编辑

2011年10月11日 #

【Director pattern】迪米特法则+观察者模式

摘要： 如何构建大型web app？在web pages时代，用脚本来做的事情少的可怜，校验用户输入，表单提交，简单的滚动 等。后来ajax的出现，允许异步的去获取服务器数据，局部改变html文档内容或样式。于是以前要用两个或多个页面跳转才能表达的内容或交互逐渐被放到一个web page里面来。但由于网络速度，服务器性能，客户端性能，web技术瓶颈等原因。脚本能干的事情依旧有很大的局限。随着近几年web技术的发展，特别是前端技术的发展，用户在浏览器里面浏览html文档时，不仅仅停留在“浏览”的层面了，开始要求更好的体验。 于是各大浏览器厂商也争先推出更快的脚本引擎，更快的渲染速度。脚本能做的事情越来越 阅读全文

posted @ 2011-10-11 22:31 岑安 阅读(2753) 评论(4) 推荐(6) 编辑

2011年10月10日 #

webkit-box & translate 的组合--流畅的滑动体验

摘要： 【注：本文所有的代码和实例仅在chrome和safari等webkit内核的浏览器测试通过】如果说从web Pages 能够转到web app时代，那么css3和html5其他相关技术一定是巨大的功臣。唯一的遗憾就是pc端浏览器的泛滥导致了我们不得不走所谓的优雅降级，而且这种降级是降到新技术几乎木有多大的用武之地。于是，客户端还算统一的移动端开始成了一个大的试验田。能够让众人大肆的在上面舒展拳脚。诸如众多新起的ui库或者框架（jquery-mobile, sencha, phoneGap ...）,可见在移动终端上确实还有不小的田地。纵使如此，效率仍旧成为一个最大的瓶颈。之前有一种尝试是用CS 阅读全文

posted @ 2011-10-10 14:53 岑安 阅读(16995) 评论(14) 推荐(9) 编辑

2011年9月16日 #

rotate 3D 篇二

摘要： 接上一篇,基于rotate的方式模拟三维空间。一开始定一个旋转原点，让物体随着这个原点旋转。（一般定为画布中心）vpx = canvas.width/2;vpy = canvas.height/2;然后为了让旋转效果和用户有交互，让旋转速度和角度和鼠标位置挂上关系stage.addEventListener('mousemove', function (x, y) { angleY = (x - vpx) * .001; angleX = (y - vpy) * .001;});接下来，如果我们有个三维空间里的小球ball，它有三向坐标（xpos, ypos, zpos）。下面 阅读全文

posted @ 2011-09-16 14:56 岑安 阅读(6732) 评论(7) 推荐(12) 编辑

2011年9月12日 #

rotate 3D [初识篇]

摘要： 随着前端技术发展，尤其是html5中canvas和svg的应用，开始让web也可以轻易的渲染出各种绚丽的效果。本篇讨论的是基于rotate（旋转）的3d效果的初识。在canvas的getContext('2d')下利用一些变换来模拟。webGL是后话，本篇暂不讨论。【简要原理】由于仍是在2d下模拟，所以所谓的3d最终还是要降到2d的层面来。在坐标上的表现就是，3d的界面应该是有x,y,z三向坐标，2d的就只有x，y二向。那么怎么把3d的z向坐标降到和2d的x，y相关联起来，就是关键。要在2d的界面上展现3d的z方向的层次感，需要一个视井。相信学过绘画的同学应该很清楚，要画透视或 阅读全文

posted @ 2011-09-12 20:10 岑安 阅读(18263) 评论(16) 推荐(15) 编辑

2011年9月10日 #

关于wrapper和chain

摘要： 随手而记...在某些有规律的对特定形式的元素或者对象操作时。wrap对于api的调用有很意想不到的作用。简易包装：/** * $wrap {给一对象打包装} * @author horizon（岑安） */var $wrap = function (obj) { //private temp object var _obj = obj, toString = Object.prototype.toString, slice = Array.prototype.slice, unshift = Array.prototype.unshift, // defin... 阅读全文

posted @ 2011-09-10 14:30 岑安 阅读(2073) 评论(1) 推荐(1) 编辑

上一页 1 2 3 4 5 6 7 8 下一页

导航

点击右上角即可分享
微信分享提示