0

我需要了解如何在 HTML 5 或 CSS3 中创建简单的动画。

假设你有这个精灵（见图），你需要创建一个有 4 帧的动画。动画必须持续 1 秒。我不想要帧之间的平滑动画，我希望它在没有插值的情况下从一种状态跳到另一种状态。这些是球的 4 帧：

                  X        Y      ROTATION       OPACITY (%)
First frame:     100      220        10            5
Second frame:    150      240        18            25
Third frame:     160      280        32            55
Fourth frame:    170      290        47            78

在简历中，每 0.25 秒球必须采用这些关键帧之一。动画上没有循环。

你们能举例说明如何使用 CSS 或 HTML5/Javascript 来做到这一点吗？（产生较少 CPU 密集型方法的方法）。谢谢。

在此处输入图像描述

4

2 回答 2

4

这可以通过使用@keyframes、animation和transform: rotate(angle) translate(x,y);的纯 CSS3 来完成opacity。

这是一个示例（使用-webkit-供应商前缀，使用-moz-, -o-，-ms-以获得最佳兼容性）：http://jsfiddle.net/QaPaK/ 该示例仅适用于 Chrome 和 Safari，因为我没有为紧凑示例添加其他前缀。

HTML（例如动画<img>元素）：

<img src="http://i.stack.imgur.com/KLNOU.png" id="test">​

CSS：

/* Replace -webkit- with moz-, -o-, -ms- for cross-browser compatibility */
#test {
    -webkit-transform-origin: top left;
    -webkit-animation-name: foo;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes foo {
    0%, 25% { /* State 1 */
        -webkit-transform: rotate(10deg) translate(100px, 200px);
        opacity: 0.05;
    }
    25%, 50% { /* State 2 */
        -webkit-transform: rotate(18deg) translate(150px, 240px);
        opacity: 0.25;
    }
    50%, 75% { /* State 3 */
        -webkit-transform: rotate(32deg) translate(160px, 280px);
        opacity: 0.55;
    }
    75%, 100% { /* State 4 */
        -webkit-transform: rotate(47deg) translate(170px, 290px);
        opacity: 0.78;
    }
}
于 2012-06-23T17:14:26.327 回答
1

嗯，有几种方法。这是我实际这样做的方式：

http://jsfiddle.net/NcuZC/1/

本质上，我正在使用：

var changeFrame = function(elem, i) {
    elem.removeClass().addClass('frame'+i);
};

$(function() {
    var ball = $('#ball'),
        i = 1,
        timer = window.setInterval(function() {
            changeFrame(ball, i);
            i++;  
            if (i > 4) {
                clearInterval(timer);
            }        
        }, 250);    
});​

然后在 CSS 中为每一帧创建一个类：

.frame1 {
    left: 100px;
    top: 220px;

    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    /* In IE10 there is no prefix. */
    transform: rotate(10deg);

    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');

    opacity: 0.05;
    filter: alpha(opacity=5); /* IE8 down */
}

尽管有一个关于它的流行网站，但我没有使用 CSS3 动画，因为我发现它们有时是 CPU 密集型的，而且由于您不需要补间，所以没有多大意义。

此外，通过使用 JS，我们可以让它在每个流行的浏览器中工作，从 IE6 到最新的 Webkits。

于 2012-06-23T17:34:38.370 回答