目录
摩擦力
1、Matter.js 提供了三种摩擦力(friction )：摩擦力-friction、空气摩擦力-frictionAir、静摩擦力-frictionStatic。
1）friction 取值范围 [0,1]，默认值 0.1，0 表示刚体可以无摩擦力的无限滑动，1 表示对刚体施加力后会立刻停止
2）frictionAir 取值 [0 , 1]，默认值 0.01，0 表示刚体无空气摩擦力，值越高刚体在空间摩擦力越大，运动越慢
3）frictionStatic 取值范围 [0,1]，默认值 0.5，0 表示刚体几乎是静止的，值越高时意味着需要移动刚体所需的力就越大。
2、Matter.Body.create 函数源码如下，可以看到创建物体可以设置的所有属性：
/**
* Creates a new rigid body model. The options parameter is an object that specifies any properties you wish to override the defaults.
* All properties have default values, and many are pre-calculated automatically based on other properties.
* Vertices must be specified in clockwise order.
* See the properties section below for detailed information on what you can pass via the `options` object.
* @method create
* @param {} options
* @return {body} body
*/
Body.create = function(options) {
var defaults = {
id: Common.nextId(),
type: 'body',
label: 'Body',
parts: [],
plugin: {},
angle: 0,
vertices: Vertices.fromPath('L 0 0 L 40 0 L 40 40 L 0 40'),
position: { x: 0, y: 0 },
force: { x: 0, y: 0 },
torque: 0,
positionImpulse: { x: 0, y: 0 },
constraintImpulse: { x: 0, y: 0, angle: 0 },
totalContacts: 0,
speed: 0,
angularSpeed: 0,
velocity: { x: 0, y: 0 },
angularVelocity: 0,
isSensor: false,
isStatic: false,
isSleeping: false,
motion: 0,
sleepThreshold: 60,
density: 0.001,
restitution: 0,
friction: 0.1,
frictionStatic: 0.5,
frictionAir: 0.01,
collisionFilter: {
category: 0x0001,
mask: 0xFFFFFFFF,
group: 0
},
slop: 0.05,
timeScale: 1,
render: {
visible: true,
opacity: 1,
sprite: {
xScale: 1,
yScale: 1,
xOffset: 0,
yOffset: 0
},
lineWidth: 0
}
};frictionAir 空气阻力
frictionAir 取值 [0 , 1]，默认值 0.01，0 表示刚体无空气摩擦力，值越高刚体在空间摩擦力越大，运动越慢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Matter-JS</title>
<!--matter-js cdnjs地址-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<!--<script src="../js/matter_0.14.2.js"></script>-->
<script type="text/javascript">
var stageWidth = 800;//舞台宽度
var stageHeight = 500;//舞台高度
window.onload = function () {
var Engine = Matter.Engine;//引擎
var Render = Matter.Render;//渲染器
var World = Matter.World;//世界
var MouseConstraint = Matter.MouseConstraint;//鼠标控制
var Bodies = Matter.Bodies;//物体
var engine = Engine.create();//创建引擎
var render = Render.create({//创建渲染器
engine: engine,//渲染创建好的引擎
element: document.body,//渲染页面的body元素
options: {
width: stageWidth,
height: stageHeight,
wireframes: true,//是否显示边线框,默认false
showAngleIndicator: true,//是否显示角度,默认false
showVelocity: true,//是否显示速度,默认false
showCollisions: true//是否显示碰撞点,默认false
}
});
Engine.run(engine);//运行引擎
Render.run(render);//运行渲染器
/**设置鼠标控制*/
var mouseConstraint = MouseConstraint.create(engine, {});
/**创建三个矩形，空气摩擦力分别为 0.05、0.1、0.2
*/
var box_1 = Bodies.rectangle(100, 20, 60, 60, {frictionAir: 0.05});
var box_2 = Bodies.rectangle(300, 30, 70, 70, {frictionAir: 0.1});
var box_3 = Bodies.rectangle(500, 40, 80, 80, {frictionAir: 0.2});
/**将三个矩形以及鼠标控制添加到世界中*/
World.add(engine.world, [box_1, box_2, box_3, mouseConstraint]);
World.add(engine.world, create4Wall(Bodies));//为世界4周添加4面墙
}
/**
*创建4面墙-强制物体在墙内运动
*/
function create4Wall(Bodies) {
var ground_top = Bodies.rectangle(stageWidth / 2, 0, stageWidth, 40, {isStatic: true});
var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true});
var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight, stageWidth, 40, {isStatic: true});
var ground_left = Bodies.rectangle(0, stageHeight / 2, 40, stageHeight, {isStatic: true});
return [ground_top, ground_right, ground_bottom, ground_left];
}
</script>
</head>
<body>
</body>
</html>
官网demo：http://brm.io/matter-js/demo/#airFriction
friction 摩擦力
friction 取值范围 [0,1]，默认值 0.1，0 表示刚体可以无摩擦力的无限滑动，1 表示对刚体施加力后会立刻停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Matter-JS</title>
<!--matter-js cdnjs地址-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<!--<script src="../js/matter_0.14.2.js"></script>-->
<script type="text/javascript">
var stageWidth = 800;//舞台宽度
var stageHeight = 500;//舞台高度
window.onload = function () {
var Engine = Matter.Engine;//引擎
var Render = Matter.Render;//渲染器
var World = Matter.World;//世界
var MouseConstraint = Matter.MouseConstraint;//鼠标控制
var Bodies = Matter.Bodies;//物体
var Composites = Matter.Composites;//符合材料
var Composite = Matter.Composite;
var engine = Engine.create();//创建引擎
var render = Render.create({//创建渲染器
engine: engine,//渲染创建好的引擎
element: document.body,//渲染页面的body元素
options: {
width: stageWidth,
height: stageHeight,
wireframes: true,//是否显示边线框,默认false
showAngleIndicator: true,//是否显示角度,默认false
showVelocity: true,//是否显示速度,默认false
showCollisions: true//是否显示碰撞点,默认false
}
});
Engine.run(engine);//运行引擎
Render.run(render);//运行渲染器
/**设置鼠标控制*/
var mouseConstraint = MouseConstraint.create(engine, {});
/**创建两块斜着放的木板(矩形)。isStatic: true：让物体静止；angle：物体倾斜的角度*/
var plank_1 = Bodies.rectangle(300, 200, 600, 20, {isStatic: true, angle: Math.PI / 20});
var plank_2 = Bodies.rectangle(500, 350, 600, 20, {isStatic: true, angle: -Math.PI / 20});
World.add(engine.world, [plank_1, plank_2]);
/**使用复合材料Composites创建堆叠物体*/
var stack = Composites.stack(100, 20, 20, 5, 0, 0, function (x, y) {
/**创建圆形返回
* Matter.Common是一个通用的工具模块，random创建随机小数，也直接使用JS的Math对象生成*/
return Bodies.circle(x, y, Matter.Common.random(10, 15), {
friction: 0.000001, /**设置球的摩擦力*/
restitution: 0.5,//补偿值
density: 0.001//物质密度
});
});
/**将三个矩形以及鼠标控制添加到世界中*/
World.add(engine.world, [mouseConstraint, stack]);
World.add(engine.world, create4Wall(Bodies));//为世界4周添加4面墙
}
/**
*创建4面墙-强制物体在墙内运动
*/
function create4Wall(Bodies) {
var ground_top = Bodies.rectangle(stageWidth / 2, 0, stageWidth, 40, {isStatic: true});
var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true});
var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight, stageWidth, 40, {isStatic: true});
var ground_left = Bodies.rectangle(0, stageHeight / 2, 40, stageHeight, {isStatic: true});
return [ground_top, ground_right, ground_bottom, ground_left];
}
</script>
</head>
<body>
</body>
</html>
球是运动的，斜木板是静止的，将 friction 属性设置在球上即可表现出明显效果，如果是默认值 0.1,则球不会像上面运动的这么快。