Question

我正在编写一个手机屏幕应用程序（使用html，css和javascript）并且我已经停留在动画部分，尽管我使用的是简单的基本精灵动画。

A）我试图为BASIC方式制作动画，但我有两个问题：

1）如果我没有一个我可能没有的完整网格spritesheet，它也显示空框架，我不知道如何跳过它们而不需要将整个spritesheet转换成一行。（我听说你可以用某种方式定义每一帧，但我真的无法找到怎么做，我到处搜索！）

2）在空框架旁边，动画在桌面上显示良好，但是当我在移动设备上尝试它时，它看起来像这样（http://jsfiddle.net/alecstheone/5pqmsd4a/4/），好像步骤和速度没有同步。如果我尝试在我的移动浏览器中运行jsfiddle，一切都会像在桌面上一样显示。

This是第一个代码：

HTML：

<div id="container">
    <div class="hi"></div>
</div>

CSS：

.hi {
    width: 389px;
    height: 238px;
    background-image: url("http://i.imgur.com/XOmx2Mm.png");
    position: relative;
    border: solid 1px black;
    -webkit-animation: playv 1.2s steps(6) infinite, playh 0.2s steps(9) infinite;
}
#container {
}
/* .hi:before {
    content: "";
    position: absolute;
    width: 176px;
    height: 108px;
    left: 0px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(9) infinite; 
}  */
 @-webkit-keyframes playv {
    0% {
        background-position-y: 0px;
    }
    100% {
        background-position-y: -1429px;
    }
}
@-webkit-keyframes playh {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: -3500px;
    }
}

B）我尝试用spritespin.js制作动画。这比之前的代码更容易。它会计算spritesheet中的所有帧，因此不会显示空帧，但它也有2个问题（桌面和移动设备上都有）：

1）动画看起来不稳定。我认为，这只是一个菜鸟想法，这是因为脚本试图计算每个帧的大小并且糟糕地混乱。（即使我设置了宽度和高度）。可以跳过那部分吗？它发生在所有渲染方法（背景，图像和画布，在移动设备和桌面上）

2）背景大小也没有计算好。您可以在动画顶部看到一些残羹剩饭，需要在它的底部。是否可以用几个像素更改背景大小？我在两个版本中使用相同的spritesheets，所以我不会因为spritesheet而认为它...或者？

This是第二个代码：

JS：

.../*! SpriteSpin - v3.1.5
 * Copyright (c) 2014 ; Licensed  */...

$(".hi").spritespin({
    source: "http://i.imgur.com/XOmx2Mm.png", // path to sprite sheet
    width: 390, // width in pixels of the window/frame
    height: 239, // height in pixels of the window/frame
    frames: 51, // total number of frames
    framesX: 9, // number of frames in one row inside the spritesheet
    frameTime: 60,
    renderer: 'image'
});

请帮我解决A或B的问题！我现在待这件事3天了，我真的很厌烦它！

Answer 1

嗯，可能是最简单的方法（而且有点无聊）是逐个指定所有关键帧。如果你有51帧，每一帧持续1.96％。为每个帧指定开始和停止时间以进行步进移动

@-webkit-keyframes playv {
    0%, 1.96% {
        background-position: 0px 0px;
    }
    1.96%, 3.92% {
        background-position: 50px 0px;
    }
    3.92%, 5.88% {
        background-position: 100px 0px;
    }
}

Answer 2

查看完整的教程，展示如何创建像动画一样的Dropbox主页， https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb

 $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
 $httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
     var key, result = [], response;
     if(typeof data == "string") { //$http support
            response = data;
     } else {
            for (key in data) {
                if (data.hasOwnProperty(key)) {
                    result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
                }
            }
            response = result.join("&");
        }
        return response;
});

如何使用CSS sprite以任何方式（A或B）进行动画制作？

2 个答案: