构建一个流畅的网络应用程序——现在我用什么来制作前端动画？

Question

我很难找出合适的技术来构建具有流畅前端的现代 Web 应用程序。

基本上，我正在考虑在我的 Web 应用程序中的某个地方放一张幻灯片，那里放一个自动滚动，然后放一个动画跳动。没什么特别的。也许更高级的动画更有意义，但没有什么比具有许多粒子的快速动画序列更好的了。

我最近和 http://famo.us/ and find it heavy loaded for most modern web app needs. I think http://julian.com/research/velocity/ 一起工作也很有趣。您会推荐使用什么，也许是其他的？

Answer 1

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

我个人很喜欢Transit：http://ricostacruz.com/jquery.transit/

它依赖于 jQuery，但处理很多 CSS 动画事件，如 'done' 等，因此您可以通过链接和排队构建并在需要时取消事件.当您使用 css-browser-prefixes 完成所有操作时，这往往是一件令人头疼的事情。它还会在可能的情况下自动启用 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 中，您还必须手动编写动画。但是像 Transit 这样的图书馆可以让你摆脱所有这些无聊的事情 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; }
}

构建一个流畅的网络应用程序——现在我用什么来制作前端动画？

Building a slick web app - what do I use for front end animations nowadays?

javascript

css

frontend

famo.us

velocity.js