Làm cách nào để tạo hiệu ứng động bằng CSS sprites theo cách (A hoặc B)?

Question

Tôi đang viết một ứng dụng phonegap (sử dụng html, css và javascript) và tôi bị kẹt ở phần hình động, mặc dù tôi đang sử dụng các hình động spritesheet cơ bản đơn giản.

A) Tôi cố gắng để animate cách BASIC nhưng tôi có 2 vấn đề:

1) Nếu tôi không có một mạng lưới đầy đủ spritesheet Mà tôi có thể không có, nó cũng hiển thị các khung trống rỗng và tôi không biết cách bỏ qua chúng mà không cần chuyển toàn bộ spritesheet thành một hàng. (Tôi nghe nói rằng bạn có thể xác định bằng cách nào đó từng khung hình nhưng tôi thực sự không thể tìm thấy cách thực hiện, tôi đã tìm kiếm ở mọi nơi!)

2) Bên cạnh khung trống hoạt ảnh hiển thị tốt trên màn hình nhưng khi tôi thử điện thoại di động trông giống như thế này (http://jsfiddle.net/alecstheone/5pqmsd4a/4/) như thể các bước và tốc độ không được đồng bộ hóa. Nếu tôi cố gắng chạy jsfiddle bên trong trình duyệt trên thiết bị di động, mọi thứ sẽ hiển thị chính xác như trên máy tính để bàn.

This là mã đầu tiên:

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) tôi đã cố gắng để animate với spritespin.js. Đây là cách dễ dàng hơn so với mã trước đây. Nó tính toán tất cả các khung trong spritesheet vì vậy không có khung trống nào được hiển thị nhưng nó cũng có 2 vấn đề (cả trên máy tính để bàn và trên thiết bị di động):

1) Hoạt ảnh trông có vẻ lộn xộn. Tôi nghĩ, đây chỉ là một ý nghĩ noob, rằng điều này vui vẻ bởi vì kịch bản cố tính toán kích thước của mỗi khung hình và làm hỏng rất nhiều. (ngay cả khi tôi đặt chiều rộng và chiều cao). Có thể bỏ qua phần đó không? Nó vui vẻ trên tất cả các phương thức hiển thị (nền, hình ảnh và canvas, cả trên thiết bị di động và trên máy tính để bàn)

2) Kích thước nền không được tính đúng. Bạn có thể thấy một số thức ăn thừa trên đỉnh của hình động cần thiết để ở dưới đáy của nó. Có thể thay đổi kích thước nền bằng một vài pixel không? Tôi sử dụng te spritesheets cùng trong cả hai phiên bản vì vậy tôi không nghĩ rằng nó vì spritesheet .. hay?

This là mã thứ hai:

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' 
}); 

XIN giúp tôi giải quyết một trong hai cách A hoặc B đầy đủ !! Tôi đang ở tại điều này trong 3 ngày và tôi thực sự bị bệnh của nó !!

Answer 1

Vâng, có thể là cách dễ nhất để thực hiện điều đó (và chỉ hơi nhàm chán) là chỉ định tất cả các khung hình chính từng cái một. nếu bạn có 51 khung hình, mỗi khung hình sẽ kéo dài 1,96%.Cụ thể cho mỗi khung hình bắt đầu và dừng lại thời gian để cung cấp cho một phong trào bước

@-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

Kiểm tra hướng dẫn hoàn chỉnh về vấn đề này, nó cho thấy làm thế nào để tạo trang chủ Dropbox như hình ảnh động, https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb

.animatedDiv { 
    width: 820px; 
    height: 312px; 
    background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg"); 
    -webkit-animation: play 2s steps(48) infinite; 
    -moz-animation: play 2s steps(48) infinite; 
    -ms-animation: play 2s steps(48) infinite; 
    -o-animation: play 2s steps(48) infinite; 
    animation: play 2s steps(48) infinite; 
} 
@-webkit-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-moz-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-ms-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-o-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
}