3
나는 애니메이션 중에 물고기 이미지가 배경 이미지 (연못)에서 움직이고 벽이나 경계선에 이미지가 튀어 오를 때 튀어 오를 것을 원합니다.이미지 벽면에서 이미지 바운스를 만드는 방법은 무엇입니까?
SVG 방법과 자바 스크립트 방법 .. .. 다시 한번 읽고이 문제를 해결하는 데 도움이 시간을내어 주셔서 감사합니다 ..
<!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>
Robert Longson에게 많은 감사를드립니다. – Amazinglykai