随笔档案「2015年1月」 - 吹过的风

动画原理——旋转

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation11.简单旋转利用三角函数进行旋转01-rotate-1.html Rotate 1 ... 阅读全文

posted @ 2015-01-31 11:46 吹过的风阅读(294) 评论(0) 推荐(0)

动画原理——碰撞检测

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation11.两个物体和判断鼠标是否在物体内相似，额外要多考虑鼠标方物体的半径。这不是准确的碰撞，它是假设物体在正方形基础上的简易方法。01... 阅读全文

posted @ 2015-01-30 14:53 吹过的风阅读(252) 评论(0) 推荐(0)

动画原理——释放和弹性

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation11.释放现在假设我们写一个动画，将它运动到指定的地方，先设置一个速度，运用三角函数，我们计算x的速度，计算y的速度，判断距离。到达... 阅读全文

posted @ 2015-01-29 16:50 吹过的风阅读(447) 评论(0) 推荐(0)

动画原理——用户交互：移动物体

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation11.物体内外的事件判断物体内外的条件是判断鼠标位置和物体中心的位置。01-mouse-events.html M... 阅读全文

posted @ 2015-01-29 13:35 吹过的风阅读(166) 评论(0) 推荐(0)

动画原理——摩擦力

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation11.有摩擦力的情况摩擦力在物体发生相对运动时产生，是运动方向的反向加速度。代码表示意思如下 if (speed > fricti... 阅读全文

posted @ 2015-01-28 12:00 吹过的风阅读(378) 评论(0) 推荐(0)

动画原理——边界

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.判断球体是否出界程序一.画板的边界就是整个画板，也就是画板的形成的矩形。var left = 0, top = 0, right... 阅读全文

posted @ 2015-01-28 09:33 吹过的风阅读(180) 评论(0) 推荐(0)

动画原理——加速度

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation这一章节没有仔细讲一是因为和上一章节很相似，只是速率换成加速度。二是因为初中学的加速度大家都懂得。1.在某一方向的方向的加速度06-... 阅读全文

posted @ 2015-01-27 16:57 吹过的风阅读(968) 评论(0) 推荐(0)

动画原理——速率

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.在某一方向的方向的速率本例掩饰水平的vx Velocity 1 Exampl... 阅读全文

posted @ 2015-01-27 15:36 吹过的风阅读(291) 评论(0) 推荐(0)

动画原理——像素控制

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.获取像素数据，改变数据颜色获取像素是getImageData(startX,startY,endX,endY)，将转换的像素数据... 阅读全文

posted @ 2015-01-27 14:22 吹过的风阅读(254) 评论(0) 推荐(0)

动画原理——加载图片

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.实时加载图片要实现实时加载图片，先创建一个图片对象设置它的src为URL地址。利用onload方法设置当图片对象加载完成执行回调... 阅读全文

posted @ 2015-01-27 12:49 吹过的风阅读(207) 评论(0) 推荐(0)

动画原理——图形填充

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.渐变填充渐变填充有线性渐变，和径向渐变两种。因为是用法，我们直接在代码中分析会更直观一. Gradient F... 阅读全文

posted @ 2015-01-27 11:31 吹过的风阅读(235) 评论(0) 推荐(1)

动画原理——曲线

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.使用quadraticCurveTo，开始点：moveTo(20,20)控制点：quadraticCurveTo(20,100,... 阅读全文

posted @ 2015-01-26 17:17 吹过的风阅读(960) 评论(0) 推荐(0)

动画原理——绘画API

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.canvas的contextvar canvas = document.getElementById('canvas'), co... 阅读全文

posted @ 2015-01-23 15:39 吹过的风阅读(323) 评论(0) 推荐(0)

动画原理——颜色值处理

摘要：1.使用十六进制的颜色有时候所提供颜色值的格式并不是你需要的，这时就需要进行转化。//转为16进制颜色属性var hexColor = '#' + (16733683).toString(16);console.log(hexColor);//转为10进制数字var color = window.p... 阅读全文

posted @ 2015-01-23 14:53 吹过的风阅读(382) 评论(0) 推荐(0)

动画原理——两点间的距离，点到鼠标的距离

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.要求两点间的距离，只需要在直线上构建一个直角三角形，然后用勾股定理。如下图：2.代码如下10-distance.html ... 阅读全文

posted @ 2015-01-23 13:21 吹过的风阅读(237) 评论(0) 推荐(0)

动画原理——绘制正弦函数&环绕运动&椭圆运动

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.正弦函数。x位置递增，y位置用sin生成。这段代码是不需要ball.js的。代码如下： Wave 2 ... 阅读全文

posted @ 2015-01-23 10:56 吹过的风阅读(950) 评论(0) 推荐(0)

动画原理——脉动（膨胀缩小）&&无规则运动

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.脉动是一种半径r来回反复的运动，在canvas中他是对原图形的方法和缩小。可以将sin应用在控制大小的属性scaleX，scal... 阅读全文

posted @ 2015-01-23 09:47 吹过的风阅读(592) 评论(0) 推荐(0)

动画原理——线性来回运动&&波动

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.在正选函数中，随角度的增大，sin的值徘徊在正一和负一之间。如下图。这可以用做物体的来回运动。2.动画源码index.html ... 阅读全文

posted @ 2015-01-22 17:06 吹过的风阅读(478) 评论(0) 推荐(0)

动画原理——指针随鼠标旋转动画

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.window.requestAnimationFrame一般显示器的刷新频率为16.7ms,简单的使用setTimeout(fn... 阅读全文

posted @ 2015-01-22 16:04 吹过的风阅读(444) 评论(0) 推荐(0)

Sizzle一步步实现所有功能（基本筛选）

摘要：第二步：实现:first,:last,:eq(),even,odd,:gt(),:lt(); :header,:root,:taget; :not()。;(function( window ){var arr = [];var push = arr.push;var slice = arr.slic... 阅读全文

posted @ 2015-01-09 11:26 吹过的风阅读(430) 评论(0) 推荐(0)

Sizzle一步步实现所有功能（层级选择）

摘要：第二步：实现Sizzle("el,el,el..."),Sizzle("el > el"),Sizzle("el el"),Sizzle("el + el"),Sizzle("el ~ el") 1 (function( window ){ 2 3 var arr = []; ... 阅读全文

posted @ 2015-01-05 17:57 吹过的风阅读(315) 评论(0) 推荐(0)