グリーンソック(GSAP)アニメーション基本

何が正確にtweenですか？

Tweenという言葉を最初に聞いたとき、私はそれが何を意味するのか全くわからなかった.簡単に言えば、tweenフレームのシーケンスです.デジタル文脈では、基本的にTweenはアニメーションです.

では、どうやって作るのですか？

幸いにも、私たちのために、多くのライブラリは、我々がブラウザでtweensを利用するのを援助するために存在します.そのようなライブラリの一つはGreenSockです.今日、私たちは約.to() and .from() , そして、あなたは時間がないのtweening取得します.
まず、CDNからGreenSOCKをつかみ、<script> あなたのHTMLのタグ.通常のJavaScriptファイルの前に置いてください.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js">
</script>

彼らのホームページGreensockの上で最新版をチェックしてください.COM .
CDNはGSAPオブジェクトを提供しますconsole.log(gsap) , そして、それが提供するいろいろな方法を見てください.今日、私たちは“コア”プロパティからtweensを見ているでしょう.

to ()

最初のtweenはgsap.to() . これは2つのパラメータをとります.

ターゲット-それは通常のCSSセレクタにすることができます.

プロパティと値をアニメーション化するオブジェクトを含むオブジェクト.

gsap.to("svg:last-child", {
  duration: 1,
  x: 100
});

単位値を指定しない場合、gsapはピクセルをアニメーション化します.デフォルトの持続時間は0.5秒です.
重要な注意点は.to() CTYPE値が位置を開始する間、Tweenの最終的な位置です.

. from ()

反対の.to() , 私たちのGSAPの値は出発点となります、そして、我々のCSS位置は目的地です.背景色をアニメーション化しましょう.二重のバレルのプロパティを使用するとき、我々はgsapでそれらを宣言するためにcamelcase命名規則を使用します.

gsap.from(".square", {
  backgroundColor: "green",
  delay: 2,
});

2の遅延を使用すると、アニメーションは、ページの読み込み後2秒を開始します.

fromto ()

私は、我々が2人のTweensを見るだけであると思いました？

まあ、技術的にはい..fromTo() あなたが想像できるように両方の組み合わせです.我々のCSSが我々の開始または終わり位置を定義する方法を覚えていてください?このtweenではgsapの両方を定義できます.ここでは、fromからvalueへのオブジェクトを渡します.
With .fromTo() , 持続性のような特別なプロパティを2番目のオブジェクトに追加します.

gsap.fromTo(
 ".square", 
 { x: 50 }, 
 { x: 0, duration: 1 }
);

GreenSockは本当に強力なアニメーションライブラリです.有料層がある間、機能の多くは無料であなたのプロジェクトで使用することができます.また、Codepenの上で有料層機能を使用することも可能です.無料でIO.私は、このポストがTweensから始めるのを援助したことを望みます.更なるチュートリアルのために調和してください.