Question

我正面临着这个问题，即在动画过程中，我希望鱼的图像在背景图像（池塘）中移动，并且只要它碰到墙壁或边框并且图像就会反弹。

使用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>

Answer 1

以下是David Dailey显示如何执行bouncing off walls in SVG的示例。

如何让图像在图像墙内反弹？

1 个答案: