前端动画基础学习笔记
关注
分享
扫一扫
草木黄尘
难学能学、难行能行
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
笔记一（鼠标位置）
javascript中有两个属性用来确定鼠标的当前位置：pageX和pageY，结合这两个属性以及绑定的元素相对文档的偏移量，就可以确定鼠标在该元素上的相对坐标。但并不是所有浏览器均支持这两个属性，有时需要用到clientX和clientY属性。这里封装一段跨平台的、计算鼠标当前相对某容器元素位置的函数。 utils.captureMouse = function(element){原创 2015-11-14 22:37:26 · 466 阅读 · 0 评论 -
笔记十一（canvas颜色应用基础）
1、色彩合成 假设想通过红绿蓝三原色的三个数值合成一个完整有效的颜色值，可以借助以下公式：var color = 0xFF << 16 | 0X55 << 8 | 0X33; //采用十六进制var color = 255 <<16 | 88 << 8 | 10; //采用十进制亦可2、提取三原色 假设想从一种颜色中提取每个独立的三原色的值：red = color >> 16 & 0xFF;原创 2015-11-30 20:52:22 · 618 阅读 · 0 评论 -
笔记十四（绘制三+四）
绘制平滑的多条曲线。文件名：drawing3.html。 第二个for循环略过第一个和最后一个点。再循环中创建一个新的控制点，其x , y值分别设置为循环中当前点和后续点的坐标的平均值。继而绘制一条穿过当前点并以控制点结尾的曲线，重复直至循环结束，循环结束时，索引指向倒数第二个点，绘制一条曲线穿过它到达最后一个点。得到一条平滑的曲线。<!DOCTYPE html><html><head>原创 2015-12-06 21:14:12 · 326 阅读 · 0 评论 -
笔记十六（绘制六——线性渐变色）
文件名：drawing6.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>绘制6</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas id="canvas" width="400" h原创 2015-12-06 22:48:36 · 719 阅读 · 0 评论 -
笔记十五（绘制五）
其他形式的曲线 bezierCurveTO(cp1x , cp1y , cp2x , cp2y , x , y); 增加一个到当前路径的点，并由三次贝塞尔曲线连接两个控制点。 arcTo(cp1x , cp1y , cp2x , cp2y , radius); 使用两个控制点和指定半径为连接到前一个点的直线路径添加一个弧度。 arc(x , y , radius , startAngle原创 2015-12-06 21:46:38 · 309 阅读 · 0 评论 -
笔记十三（绘制二）
利用quadraticCurveTo(cpx,cpy,x,y)方法绘制曲线,接收两个参数，第一个是控制点，第二个是曲线终点。该形状由一个名为二次贝塞尔曲线的标准算法决定。该曲线会弯向但永不触及控制点。要想曲线穿过某点，使用一下公式：(x0,y0)为起点，(x2,y2)为终点，(x1,y1)作为控制点，(xt,yt)代表要穿过的目标点。x1 = xt * 2 - (x0 + x2) / 2y1 =原创 2015-12-05 20:13:17 · 387 阅读 · 0 评论 -
笔记十七（绘制图片）
绘制图片有两种方式： 1、加载图片 2、使用图片元素 文件名：img.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>绘制图片</title><style>#canvas{background-color: #99cc33;}#jielun{display: none;}</style原创 2015-12-07 11:35:56 · 271 阅读 · 0 评论 -
笔记十八（视频）
文件中载入一段视频并将其逐帧渲染到canvas元素上。 文件名：video.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>视频</title><style>#canvas{background-color: #99cc33;}#video{display: none;}</style>原创 2015-12-07 12:02:07 · 297 阅读 · 0 评论 -
笔记十九（基本动画——速度实例）
本节笔记中引用的js文件具体参见前几节笔记。 速度实例中主要理解速度向量概念。 速度实例1：文件名：velocity1.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>速度实例1</title><style>#canvas{background-color: #99cc33;}</styl原创 2015-12-07 17:25:00 · 341 阅读 · 0 评论 -
笔记二十一（综合运用——飞船）
基本动画知识总结综合运用。 首先创建一个飞船构造函数。 文件名：ship.js。function Ship(){ this.x = 0; this.y = 0; this.width = 25; this.height = 20; this.rotation = 0; this.showFlame = false;}Ship.prototype原创 2015-12-07 20:21:20 · 350 阅读 · 0 评论 -
笔记九（勾股定理应用）
这里根据鼠标位置实时画出直角三角形，并在一个文本框实时显示斜边长。文件名：distance.html。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>勾股定理应用</title></head><style type="text/css"> #canvas{background-color: #99cc原创 2015-11-16 22:07:33 · 825 阅读 · 0 评论 -
笔记八（圆周运动）
使用余弦函数获得x坐标的大小，正弦函数获得y坐标的大小。 牢记：动画编程，谈及x，即想到余弦，谈及y，即想到正弦。 这里创建一个圆周运动和一个椭圆运动。 文件名：circle.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>圆周运动</title></head><style type="text原创 2015-11-16 21:34:41 · 768 阅读 · 0 评论 -
笔记二（触摸位置）
封装一个untils.captureTouch函数确定第一个手指在元素上触摸的位置。因为可能出现没有手指触摸到屏幕的情况，因此为返回的对象添加一个isPressed属性，且若没有触摸到屏幕，x和y属性将会设置为null值。untils.captureTouch = function(element){ var touch = {x:null , y:null , isPressed:fals原创 2015-11-15 16:23:06 · 466 阅读 · 0 评论 -
笔记二十二（越界处理）
应用动画时需关注动画所实现的环境，动画对象需要根据环境的变化而改变运动状态。这里系统总结处理物体越界以及应用摩擦力的公式。 注： left为环境右部边界所在坐标x值; right为环境左部边界所在坐标x值; top 为环境顶部边界所在坐标y值; bottom为环境底部边界所在坐标y值。 1、移除越界的对象if(object.x - object.width原创 2015-12-12 20:37:55 · 444 阅读 · 0 评论 -
笔记三（创建一个旋转动画）
这里创建一个旋转动画，表现为指向图标将随着鼠标的移动变化方向，且箭头始终指向鼠标位置。 文件结构： utils.js 文件代码（即是前两节函数封装代码）：var utils = {};//当前需要用到的封装函数：获取鼠标位置utils.captureMouse = function(element){ var mouse = {x:0 , y:0}; element.a原创 2015-11-15 22:28:27 · 587 阅读 · 0 评论 -
笔记六（脉冲运动）
动画里正弦值除了运用于改变对象的坐标，还可以应用于对象的其他属性。 这里对笔记四稍加修改创建一个脉冲运动。文件名：pulse.html。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>脉冲运动</title></head><style type="text/css"> #canvas{backgro原创 2015-11-16 20:02:54 · 559 阅读 · 0 评论 -
笔记十（重要公式阶段总结）
对前面笔记中所用到的重要公式做个阶段性总结：1、三角学基础函数sine of angle = opposite / hypotenusecosine of angle = adjacent / hypotenusetangent of angle = opposite / adjacent2、角度与弧度相互转换 radians = degrees * Math.PI / 180 degrees原创 2015-11-16 22:28:16 · 292 阅读 · 0 评论 -
笔记四（正弦波平滑运动）
这里创建一个正弦波平滑运动的动画。 utils.js文件不变，见笔记三。 创建一个Ball构造函数。文件名：ball.js。function Ball(radius , color){ if (radius === undefined) { radius = 40; }; if (color === undefined) { color =原创 2015-11-16 19:26:07 · 715 阅读 · 0 评论 -
笔记五（垂直运动）
将笔记四（平滑运动）里bobbing.html文件代码稍加改变，即可创建一个线性垂直运动。文件名：vertical.html。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>垂直运动</title></head><style type="text/css"> #canvas{background-co原创 2015-11-16 19:51:17 · 521 阅读 · 0 评论 -
笔记七（随机运动）
将单个正弦波发展至两个正弦波，分别改变对象不同的属性，一个用于改变x轴坐标，一个用于改变y轴坐标，造成的结果像随机运动（其实可以预测轨迹）。文件名：random.html。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>随机运动</title></head><style type="text/css">原创 2015-11-16 20:15:56 · 574 阅读 · 0 评论 -
笔记十二（绘制一）
利用简单的绘图指令创建一个简单的绘制程序： 文件名：drawing1.html<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>绘制1</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas id=原创 2015-12-05 11:32:47 · 334 阅读 · 0 评论 -
笔记二十（加速度实例）
直接上代码啦。。 双轴加速度：文件名：acceleration1.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>加速度实例1</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas i原创 2015-12-07 19:22:19 · 533 阅读 · 0 评论