javascript - ポイントaからポイントbまで何かをアニメーション化する方法は?

Question

純粋なJavaScriptを使用して、ポイントaからポイントbまで画像をアニメーション化するにはどうすればよいですか. そうでない場合、jQuery 以外で使用できるフレームワークはありますか? これが私がこれまでに持っているものですhttp://jsfiddle.net/kmHZt/10/

Answer 1

アルフレッドの答えに加えて、CSSアニメーションも見る必要があります（トランジションではありません）。

これが素晴らしいチュートリアルです：https ：//developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations

多くのものをアニメーション化する場合を除いて、JavaScriptでクラス名を追加することと組み合わせたCssアニメーション/トランジションで十分なはずです。その場合は、HTML5Canvasを使用することをお勧めします。

Answer 2

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