我面临这个问题，在动画过程中，我希望鱼图像在背景图像（池塘）中移动，并且每当它撞到墙壁或图像边界时它就会弹开。
使用svg方法和javascript方法..
非常感谢任何可以提供帮助的人。再次感谢您花时间阅读并帮助解决这个问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
body {
font:76% normal verdana,arial,tahoma;
}
h1, h2 {
margin:0px;
font-size:1.2em;
}
p {
margin:0px 0px 1em 0px;
padding:0px;
}
.balls img {
position:absolute;
width:50px;
height:50px;
}
</style>
<script type="text/javascript">
var balls = [];
var canvasX = 485;
var canvasY = 520;
var timer = null;
var m_lastX = 0;
var m_lastY = 0;
var M_SPACE = 24;
var B_VMIN = 5;
var B_VMAX = 5;
var B_WIDTH = 13;
var B_HEIGHT = 10;
function rnd(n) {
return Math.random()*n;
}
function rndI(n) {
return parseInt(rnd(n));
}
function initBall(oBall) {
oBall._x = rnd(canvasX);
oBall._y = rnd(canvasY);
oBall._vX = B_VMIN+rnd(B_VMAX)*(Math.random()>0.5?1:-1);
oBall._vY = B_VMIN+rnd(B_VMAX);
}
function moveBall(oBall) {
oBall._x += oBall._vX;
oBall._y += oBall._vY;
oBall.style.left = oBall._x+'px';
oBall.style.top = oBall._y+'px';
if ((oBall._vX>0 && oBall._x+oBall._vX+B_WIDTH>canvasX) || (oBall._vX<1 && oBall._x+oBall._vX<0)) oBall._vX *= -1;
if ((oBall._vY>0 && oBall._y+oBall._vY+B_HEIGHT>canvasY) || (oBall._vY<0 && oBall._y+oBall._vY<0)) oBall._vY *= -1;
}
function animateStuff() {
for (var i=balls.length; i--;) {
moveBall(balls[i]);
}
}
function startAnimation() {
if (!timer) timer = setInterval(animateStuff,20);
}
function stopAnimation() {
if (!timer) return false;
clearInterval(timer);
timer = null;
}
function init() {
balls = document.getElementById('ball-container').getElementsByTagName('img');
for (var i=balls.length; i--;) {
initBall(balls[i]);
}
//getWindowCoords();
startAnimation();
//document.onmousedown = mouseDown;
}
getWindowCoords = (navigator.userAgent.toLowerCase().indexOf('opera')>0||navigator.appVersion.toLowerCase().in dexOf('safari')!=-1)?function() {
canvasX = innerWidth;
canvasY = innerHeight;
}:function() {
canvasX;
canvasY;
}
</script>
</head>
<body>
<h1>Interval-based animation</h1>
<p>
Click and drag to create more.
</p>
<p>
<button onclick="startAnimation(); init();">Start</button>
<button onclick="stopAnimation()">Stop</button>
</p>
<div id="ball-container" class="balls">
<SVG xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" id="ball-container" style="border:solid 1px #000000;width:515;height:474;">
<image xlink:href="pond.png" x="0" y="0" width="513" height="474" />
</SVG>
<img src="anchovies.png" alt="" width="8" height="70" />
</div>
</body>
</html>
这是一个例子大卫·戴利 http://srufaculty.sru.edu/david.dailey/展示如何做SVG 中从墙壁反弹 http://www.svgopen.org/2008/papers/39-The_Edges_of_Plausibility/bouncing3.svg.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
