0

我正在尝试做的事情：
- 一个 JavaScript 动画（总共 114 帧），可以快速连续地将一张图像换成下一张。
-onmouseover 一个门的图像打开。（播放 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 张图片 - 一扇平门（仅使用谷歌图片搜索中的一些图片作为门 - 替换为您自己的）
  • 动画完全由 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精灵

  • 更复杂但保持图像质量
  • 比目前的情况更快

为了更好地了解两者的优缺点，请参阅： Animated .GIF vs Spritesheet + JS/CSS

但我写了一个图像差异器，它将获取 2 个图像之间的差异并使其余图像保持透明

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

您可以在 css sprite 中使用并覆盖每个 sprite 以获得 gif 的好处和 png 的图像质量

这是一个非常通用的精灵生成器，我用 C 语言放在一起

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

于 2012-12-02T07:52:09.640 回答