建立一个光滑的网络应用程序-我现在用什么来做前端动画？

Question

我很难找到合适的技术来构建一个前端光滑的现代网络应用程序。

基本上，我想在这里有一张幻灯片，在那里有一个自动卷轴，在我的web应用程序的某个地方有一个动画弹跳。别太花哨了。也许它更有意义，更先进的动画，但没有什么像一个快速的动画序列与许多粒子。

我最近与http://famo.us/合作，发现它为大多数现代web应用程序所需而加载得很重。我认为http://julian.com/research/velocity/也很有趣。你建议使用什么，也许其他的东西？

Answer 1

如果要使用HTML 5+Javascript，则取决于您将使用什么技术。CSS3转换和其他GPU踢动画是一个很好的方法。

就我个人而言，我非常喜欢Transit：http://ricostacruz.com/jquery.transit/

它依赖于jQuery，但是可以处理许多CSS动画事件，比如‘so’等，这样您就可以通过链接构建&排队和在需要时取消事件。当你用css浏览器前缀做完这件事的时候，你会觉得很痛苦.此外，它自动启用GPU时，如果可能。

$('.box')
  .transition({ x: -40 })
  .transition({ y: 40 })
  .transition({ x: 0 })
  .transition({ y: 0 });

但是，如果您想变得糟糕透顶，您也可以使用一个小前缀，无需库手动处理这些事件：

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p]+type, callback, false);
    }
}

在css中，您还必须手动编写动画。但是像这样的图书馆把你从这些无聊的css中拯救出来，

这将是如何编写css动画：

#anim.enable
{
    -webkit-animation: flash 1s ease 3;
    -moz-animation: flash 1s ease 3;
    -ms-animation: flash 1s ease 3;
    -o-animation: flash 1s ease 3;
    animation: flash 1s ease 3;
}

/* animation */
@-webkit-keyframes flash {
    50% { opacity: 0; }
}

@-moz-keyframes flash {
    50% { opacity: 0; }
}

@-ms-keyframes flash {
    50% { opacity: 0; }
}

@-o-keyframes flash {
    50% { opacity: 0; }
}

@keyframes flash {
    50% { opacity: 0; }
}