Animation - 文章分类 - 晴明桑

[canvas] 3D

摘要：使用webGL来创建3D程序使用CSS3来创建3D效果 webGL和CSS3都是使用GPU来实现3D实时渲染，叫硬件渲染。软件渲染也就是使用canvas API来渲染 3D 的效果。 webGL渲染过程： 3D坐标系统 perspective(透视、景深) perspective的作用是确定物体阅读全文

posted @ 2017-02-03 18:15 晴明桑阅读(748) 评论(0) 推荐(2)

[canvas] 万有引力

摘要：万有引力任意两个质点有通过连心线方向上的力相互吸引。该引力大小与它们质量的乘积成正比与它们距离的平方成反比，与两物体的化学组成和其间介质种类无关。两个物体之间存在一种引力：阅读全文

posted @ 2017-02-03 17:10 晴明桑阅读(153) 评论(0) 推荐(0)

[canvas] 桌球运动

摘要：动量动量（Momentum）又称线性动量（Linear Momentum）。在经典力学中，动量（是指国际单位制中的单位为kg·m/s ，量纲MLT⁻¹）表示为物体的质量和速度的乘积，是与物体的质量和速度相关的物理量，指的是运动物体的作用效果。动量也是矢量，它的方向与速度的方向相同。动量守阅读全文

posted @ 2017-01-25 18:14 晴明桑阅读(242) 评论(0) 推荐(0)

[canvas] 角度反弹

摘要：假设有个斜平面，物体以一定的速度朝着斜面运动，如何取得反弹速度。所要做的所有事情就是把整个系统包括物体，包括平面全部旋转的平面，做完反弹处理后，再旋转回去。这就意味着，需要旋转斜面，旋转物体的坐标，并且还要旋转物体的速度。反弹后的速度把整个系统旋转回去，也就是还原整个系统到初始位置完整过阅读全文

posted @ 2016-12-29 17:10 晴明桑阅读(465) 评论(0) 推荐(0)

[canvas] 坐标旋转

摘要：坐标旋转做圆周运动只知道中心点(center point)和物体的位置只有物体的x,y坐标，和每一帧物体旋转的角度。推导过程一：推导过程二：推导过程三：推导过程四：如果设置了一个中心点，有物体的x,y坐标，和每一帧物体旋转的角度阅读全文

posted @ 2016-12-28 14:33 晴明桑阅读(405) 评论(0) 推荐(0)

[js] svg 与 css3 的 transform

摘要：transform translate HTML元素的偏移(左) 与svg的偏移使用SVG元素自带的transform属性进行变换，则仅支持这种用法（缺省使用0代替），当多个参数值的时候，可以使用逗号,或者直接空格分隔，但是不能包含单位和CSS3的transform一样， SVG中的tr 阅读全文

posted @ 2016-12-27 18:13 晴明桑阅读(1363) 评论(0) 推荐(0)

[canvas] 碰撞

摘要：碰撞检测的方法判断物体与物体之间是否有重叠，这里使用物体的外接矩形边界来确定。判断物体与物体之间的距离，当距离小于某个值时，满足碰撞条件，物体产生碰撞效果。光线投射法画一条与物体速度向量相重合的线，然后再从待检测物体出发，绘制第二条线，根据两条线的交点位置来判定是否发生碰撞。是与小球速度阅读全文

posted @ 2016-12-23 17:03 晴明桑阅读(641) 评论(0) 推荐(0)

[canvas] 缓动、弹性

摘要：缓动动画(easing) 缓动动画中，距离的百分比作用于速度，物体距离目标位置越远，运动的速度就越大，随着物体距离目标位置越来越近，速度逐渐降低为零，停止在目标位置。 easing就是我们设定的缓动参数，每一帧都乘以距离，随着距离的不断减小，速度也就不断减小。弹性动画(spring) 弹性动画中阅读全文

posted @ 2016-12-21 14:24 晴明桑阅读(312) 评论(0) 推荐(0)

[canvas] 移动物体

摘要：外接矩形判别法 1.mouse.x rect.x 2.mouse.x rect.y 4.mouse.y 阅读全文

posted @ 2016-12-16 16:04 晴明桑阅读(349) 评论(0) 推荐(0)

[canvas] 边界与摩擦力

摘要：设置边界阅读全文

posted @ 2016-12-16 11:42 晴明桑阅读(175) 评论(0) 推荐(0)

[canvas] 速度

摘要：标量：有大小而没有方向的物理量（速率，体积，温度）矢量：有大小也有方向的物理量（速度，动量，力）速度速度是表征物体运动快慢的物理量同时在一个物体的x轴和y轴上定义速度，那么物体的运动方向是这两个速度方向的和方向，即满足矢量的叠加，大小满足勾股定理。以每秒5的速度，30度角方向运动。那阅读全文

posted @ 2016-12-15 14:57 晴明桑阅读(273) 评论(0) 推荐(0)

[canvas] 三角函数

摘要：三角函数普通坐标与canvas坐标是不同的常用三角函数在canvas中采用的是弧度制。是将角度转成弧度，比如：。（弧度值）乘上是将弧度转成角度。 Math.atan()可以直接通过两个直角边得到角度值，但是会得到两个相同的角度值使用Math.atan2(dy, dx)可以弥补该问题阅读全文

posted @ 2016-12-14 19:01 晴明桑阅读(395) 评论(0) 推荐(0)

[js] drag

摘要：在拖动操作过程中，被拖动元素会以半透明形式展现，并跟随鼠标指针移动。拖放基础 1 定义可拖动目标。将我们希望拖动的元素的draggable属性设为true。 2 定义被拖动的数据，可能为多种不同格式。例如，文本型数据会包含被拖动文本的字符串。 3 （可选）自定义拖动过程中鼠标指针旁边会出现的拖阅读全文

posted @ 2016-12-09 19:05 晴明桑阅读(999) 评论(0) 推荐(0)

[svg] svg(2) clientRect

摘要：在html中可通过document操作元素 getSVGDocument contentDocument 还有一个方法可以获取所引用的SVG文档的document对象，那就是getSVGDocument()。如果使用object或iframe引入SVG文档，除了getSVGDocument()，阅读全文

posted @ 2016-12-06 16:59 晴明桑阅读(532) 评论(0) 推荐(0)

[svg] d3.js (3)

摘要：选择 d3.select 从当前文档中选择一个元素。 d3.selectAll 从当前文档中选择多个元素。 d3.event 访问用于交互的当前用户事件。 selection.text 取得或设置文本内容。 selection.style 取得或设置样式属性。 selection.data 在计算相阅读全文

posted @ 2016-11-07 19:04 晴明桑阅读(1239) 评论(0) 推荐(0)

[cs] 图形相关公式

摘要：三角函数坐标系圆的相关公式 0.5π为90° 1π 为 180° 2π为360° Math.PI Math.PI 表示一个圆的周长与直径的比例，约为 3.14159： Math.PI=π≈3.14159 下面的函数使用 Math.PI 计算给定半径的圆周长： Math.sin 返回一个数值的正弦阅读全文

posted @ 2016-11-04 18:02 晴明桑阅读(630) 评论(0) 推荐(0)

[svg] D3.js (2)

摘要：SVG 形状 d3.svg.arc() 构造一个新的弧生成器，使用默认的内半径、外半径、开始弧度和结束弧度访问器（假定输入数据是包含匹配于访问器的命名属性的对象）；而默认的访问器假定弧的尺寸是动态指定的，当然设置一个或多个的尺寸为常量也是很常见的，例如饼图的内半径设为0；返回的函数为封闭的实心阅读全文

posted @ 2016-11-02 19:06 晴明桑阅读(559) 评论(0) 推荐(0)

[svg] svg api

摘要：SVG文件全局有效的规则是“后来居上”，越后面的元素越可见。 Content Type: image/svg+xml 用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统1用户像素等于设备上的1像素（但是设备上可能会自己定义1像素到底是阅读全文

posted @ 2016-10-31 18:57 晴明桑阅读(1050) 评论(0) 推荐(0)

[svg] D3.js

摘要：选择元素 D3提供了两种高级方法来选择元素：select和selectAll。这些方法接收选择器字符串。前者只返回第一个匹配的元素，后者选择在文档遍历次序中所有匹配的元素。这个方法也可以接受节点，这可以用来和第三方库例如JQuery或者开发工具($0)整合。 d3.select(selec 阅读全文

posted @ 2016-10-28 19:00 晴明桑阅读(844) 评论(0) 推荐(0)

[canvas] api

摘要：requestAnimationFrame window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。如果想得到连贯的逐帧动画，函数中必须重新调用 reques 阅读全文

posted @ 2016-10-20 18:55 晴明桑阅读(186) 评论(0) 推荐(0)

文章分类 - Animation

公告