0

私がやろうとしていること:
- 1 つの画像を次の画像にすばやく連続して交換する JavaScript アニメーション (合計 114 フレーム)。
- ドアの画像にマウスオーバーすると開きます。(72 フレームを再生し、フレーム 72 にとどまります)
-onmouseout ドアが閉じます。(42 フレームを再生し、最後のフレームにとどまります)
- アニメーションが完了する前にマウスを要素から離すと、72 フレームが終了してから 42 フレームが再生されます。
- 42 フレームが終了する前にマウスを要素に戻すと、42 フレームの再生が終了してから 72 フレームが再生されます。

問題: -
私は JavaScript の初心者で、まだ完全には理解していません。
- ある程度は機能しますが、非常にバグが多く、アニメーションを台無しにせずにマウスを要素から離すことはできません。
- また、上記のすべてを実行する方法がわかりません。

これが私が今持っているコードです： 

HTML:  
<div onmouseover="openDoor()" onmouseout="closeDoor()" id="door2"></div>
<div id="door">
<img src="images/Animation_Door/0001.png">
<img src="images/Animation_Door/0002.png">
<img src="images/Animation_Door/0003.png">
...etc... (114 frames)
</div>

CSS:
#door {
background-color:transparent;
...etc...
}

.door img{
    display: none;
}

.door img:first-child {
display: block;
}


javaScript:
function openDoor() { 
var ti, frame = 0;
var frames = document.getElementById("door").children;
var frameCount = frames.length;

for (i=0; i<72; i++) {
ti = setTimeout(function(){
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 50*i);
}
}

function closeDoor() { 
var ti, frame = 0;
var frames = document.getElementById("door_close").children;
var frameCount = frames.length;

for (i=0; i<42; i++) {
setTimeout(function(){
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 50*i);
}
}
4

2 に答える 2

1

これにより、いくつかのヒントが得られるはずです。

ノート：

  • 使用する画像は 1 つだけです - 平らなドア (ドアの Google 画像検索の画像を使用 - 独自の画像に置き換えます)
  • アニメーションは CSS トランスフォームで完全に処理されます

デモ: http://jsfiddle.net/LA6VW/3/

HTML

<div class="doorframe">
    <div class="door"></div>
</div>

CSS

.doorframe {
    border: 1px solid black;
    display: inline-block;
}
.door {
    width: 60px;
    height: 140px;
    background-color: #ccc;
    border: 1px solid #444;
    -webkit-transform-origin: left;
    background-image: url("http://www.doorasia.in/images/gallery/moulded_door01.jpg");
    background-position: -49px -7px;
    background-size: 158px 155px;
}​

JS:

var animating = false;

$('.doorframe').mouseenter(function() {
    if(animating) return;
    var door = $('.door');
    animating = true;
    openDoor(door, 5);
});
$('.doorframe').mouseleave(function() {
    if(animating) return;
    var door = $('.door');
    animating = true;
    closeDoor(door, 90);
});

function openDoor(door, angle) {
    if(angle >= 90) {
        animating = false;
        return;        
    }
    door.css('-webkit-transform', 'perspective(200px) rotateY( '+angle+'deg )');
    setTimeout(function() {
        openDoor(door, angle+=5);
    }, 50);
}

function closeDoor(door, angle) {
    if(angle < 0) {
        animating = false;
        return;        
    }
    door.css('-webkit-transform', 'perspective(200px) rotateY( '+angle+'deg )');
    setTimeout(function() {
        closeDoor(door, angle-=5);
    }, 50);
}

​
于 2012-12-02T07:10:41.920 に答える
0

2 つのオプション:

2 つのアニメーション GIF

  • 開くための 1 つのアニメーション GIF + 閉じるための 1 つのアニメーション GIF
  • スプライトよりも高速で小さい

短所 - 画質が低下する可能性があります

CSS スプライト

  • より複雑ですが、画質は維持されます
  • 現状より早く

両方の長所と短所をよりよく理解するには、 アニメーション化された .GIF とスプライトシート + JS/CSSを参照してください。

しかし、2つの画像の違いを取り、残りを透明にする画像差分器を作成しました

http://www.murga-linux.com/puppy/viewtopic.php?t=81387

css スプライトで使用し、各スプライトをオーバーレイして、png の画質で gif の利点を得ることができます

これは、私が C でまとめた非常に一般的なスプライト ジェネレーターです。

http://www.murga-linux.com/puppy/viewtopic.php?t=82009

于 2012-12-02T07:52:09.640 に答える