所以这里有一些简单的physicsjs，我有一个css动画，在我的索引文件中被div调用。因此，这个项目的主要目标是让墙壁进入并弹回球，墙壁也不能与任何其他墙壁发生碰撞，否则它会变形。这是指数 http://www.fast-files.com/getfile.aspx?file=162310
require([
full
],
function(Physics) {
Physics(function(world) {
// bounds of the window
var viewportBounds = Physics.aabb(0, 0, window.innerWidth, window.innerHeight),
edgeBounce, renderer;
// create a renderer
renderer = Physics.renderer('canvas', {
el: 'viewport'
});
// add the renderer
world.add(renderer);
// render on each step
world.on('step', function() {
world.render();
});
// constrain objects to these bounds
edgeBounce = Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 0.99,
cof: 0.8
});
// resize events
window.addEventListener('resize', function() {
// as of 0.7.0 the renderer will auto resize... so we just take the values from the renderer
viewportBounds = Physics.aabb(0, 0, renderer.width, renderer.height);
// update the boundaries
edgeBounce.setAABB(viewportBounds);
}, true);
var viewWidth = window.innerWidth,
viewHeight = window.innerHeight,
viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight),
edgeBounce, renderer;
var hsquare = [];
for (var i = 0, l = 1; i < l; ++i) {
Physics.noConflict = function() {
if (window.Physics === Physics) {
window.Physics = _Physics;
}
return Physics;
};
hsquare.push(Physics.body('rectangle', {
width: 1920,
height: 100,
x: 0 + viewWidth - 0,
y: 0 + viewHeight - 50,
vx: 0,
cof: 10000000,
restitution: 0,
label: 'box',
styles: {
width: 40,
height: 40
}
}));
}
var vsquare = [];
for (var i = 0, l = 1; i < l; ++i) {
vsquare.push(Physics.body('rectangle', {
width: 100,
height: 975,
x: 0 + viewWidth - 50,
y: 0 + viewHeight - 0,
vx: 0,
cof: 10000000,
restitution: 0,
label: 'box',
styles: {
width: 40,
height: 40
}
}));
}
function leftArrowPressed() {
world.add(vsquare)
}
function rightArrowPressed() {
world.add(hsquare)
}
document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
}
};
var attractor = Physics.behavior('attractor', {
order: 0,
strength: 0.002
});
world.on({
'interact:poke': function(pos) {
world.wakeUpAll();
attractor.position(pos);
world.add(attractor);
},
'interact:move': function(pos) {
attractor.position(pos);
},
'interact:release': function() {
world.wakeUpAll();
world.remove(attractor);
}
});
world.add([
Physics.behavior('interactive', {
el: renderer.container
}), Physics.behavior('constant-acceleration'), Physics.behavior('body-impulse-response'), edgeBounce
]);
world.add([
Physics.behavior('constant-acceleration'), Physics.behavior('body-collision-detection'), Physics.behavior('sweep-prune'), edgeBounce
]);
world.add(Physics.body('circle', {
x: renderer.width * 0.5,
y: renderer.height * 0.5,
vx: 0,
radius: 40,
styles: {
}
}));
Physics.util.ticker.on(function(time) {
world.step(time);
});
});
});<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html>
<head>
<style>
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
.right {
z-index: 1;
position:absolute;
right: 0px;
width: 100px;
height: 1200px;
background-color: black;
animation-name: right;
animation-duration: 1s;
}
@keyframes right {
0% {right:0px;}
25% {right:400px;}
50% {right:0px;}
}
.left {
z-index: 1;
position:absolute;
left: 0px;
width: 100px;
height: 1200px;
background-color: black;
animation-name: left;
animation-duration: 1s;
}
@keyframes left {
0% {left:0px;}
25% {left:400px;}
50% {left:0px;}
}
.up {
z-index: 1;
position:absolute;
top: 0px;
width: 1900px;
height: 100px;
background-color: black;
animation-name: up;
animation-duration: 1s;
}
@keyframes up {
0% {top:0px;}
25% {top:400px;}
50% {top:0px;}
}
.down {
z-index: 1;
position:absolute;
bottom: 0px;
width: 1900px;
height: 100px;
background-color: black;
animation-name: down;
animation-duration: 1s;
}
@keyframes down {
0% {bottom:0px;}
25% {bottom:400px;}
50% {bottom:0px;}
}
html, body, #viewport { margin: 0; z-index: 1; background: #ffffff; height: 100%; } .pjs-meta { color: #fff; } canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }</style>
<script data-main="scripts/config.js" src="scripts/require.js"></script>
</head>
<body>
<canvas id="viewport" width="1082" height="974"></canvas>
</script>
</body>
</html>
所以这里你有4个方面的向内动画，我想用这些div做的是将它们转换为physicsjs并为动画添加物理。