如何从a点到b点动画？答案

【问题标题】：How to animate something from point a to point b?如何从a点到b点动画？
【发布时间】：2013-03-06 23:50:06
【问题描述】：

如何使用纯 JavaScript 将图片从 a 点动画到 b 点。如果没有，我可以使用除 jQuery 之外的任何框架吗？这是我目前所拥有的http://jsfiddle.net/kmHZt/10/

【问题讨论】：

jQuery 是用纯 Javascript 编写的，所以当然可以。问题是，你真的想做多少工作？为什么不使用 jQuery？
@GJK 我猜是因为 jQuery 不会为画布元素设置动画，只是 DOM 对象。
createjs 非常适合画布开发：createjs.com/#!/CreateJS

标签： javascript html animation jquery-animate

【解决方案1】：

您可以结合使用 JavaScript 和 CSS 过渡：

CSS：

.slide-elem {
    position: relative;
    -webkit-transition: 0.5s left;
    -moz-transition: 0.5s left;
    -o-transition: 0.5s left;
    transition: 0.5s left;
}
.slide-elem.triggered {
    left: 50px; // Your animation here
}

JS：

document.querySelector(".slide-elem").className += " triggered";

当然，您可以自定义所有这些来做任何您想做的事情。更多关于 CSS 过渡：http://www.w3schools.com/css3/css3_transitions.asp

【讨论】：

【解决方案2】：

除了 Alfred 的回答之外，您还应该查看 CSS 动画（而不是过渡）。

这是一个很好的教程：https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations

Css 动画/过渡结合使用 javascript 添加类名应该就足够了，除非你要为很多东西制作动画，那么我建议使用HTML 5 Canvas

【讨论】：