Vue アムステルダム 2022: パート VII - Vue によるアニメーション化

いらっしゃいませ！ Vuejs Amsterdam Conference 2022 要約シリーズの第 7 部でお会いできてうれしく思います。このシリーズでは、すべての講演の要約を共有します。

私の JSWorld Conference 2022 サマリー シリーズ (4 部構成) は、ここで読むことができます。ここでは、初日のすべての講演をまとめています。私のブログでは、Vue Amsterdam Conference 2022 の以前の講演もご覧いただけます。

(繰り返し) はじめに

2 年半ぶりに JSWorld と Vue Amsterdam Conference が 6 月 1 日から 3 日にかけて Theatre Amsterdam に戻ってきました。私は初めてこの会議に参加する機会がありました。多くのことを学び、多くの素晴らしい人々に出会い、素晴らしい開発者と話し、素晴らしい時間を過ごしました。初日は JSWorld Conference が開催され、2 日目と 3 日目は Vue Amsterdam が開催されました。

会議は素晴らしい講演者の情報でいっぱいで、それぞれが私に貴重なことを教えてくれました。彼らは皆、知識と情報を他の開発者と共有したいと考えていました。それで、それを共有し続け、他の人がそれを使用するのを助けることができれば素晴らしいと思いました.

最初は、いくつかのメモやスライドを共有しようとしましたが、スピーカーが私と共有したものほどではなく、十分ではないと感じました.そこで、私は各スピーチをもう一度見て、深く掘り下げ、検索し、メモを取り、それらをスライドやスピーチ内の正確な言葉と組み合わせて、あなたと共有することにしました。私が彼らから学んだことと同じレベル。

非常に重要なポイント

これらのいくつかの記事で読んだものはすべて、スピーカー自身の努力と時間の結果です。これらの記事に書かれている文章の多くでさえ、彼らが言ったことやスライドに書いたこととまったく同じです。つまり、何か新しいことを学べば、それは彼らの努力のおかげです。

最後になりましたが、一部のスピーチでは、すべての技術的な詳細やライブ コーディングを掘り下げることはできません。しかし、興味があり、より多くの情報が必要な場合は、私に知らせてください。より詳細な記事を別に書くようにします.また、Twitter/Linkedin も忘れずにチェックしてください。

ここでは、会議のプログラムを見つけることができます。

Vue でアニメーション化する

Ramona Biscoveanu - SAP のフロントエンド開発者

時々、私たちのアプリケーションはちょっとした「驚き」を必要とし、アプリケーションをより生き生きとさせるのに最適な量の「動き」でこれを行うことができます。

Vue マジックを使用して、単純なものからより複雑なものまで、Vue とアニメーション ライブラリを組み合わせて素晴らしいアニメーションを作成する方法を見ていきます。

90年代のウェブサイト

90 年代の Web サイトでは、動きや色が多用されることがありました。しかし、当時アニメーションを作成する唯一の方法は GIF を使用することでした。ダイヤルアップ インターネットの時代にこれらの gif が消費した帯域幅を想像してみてください。そのため、帯域幅の消費を制限するためにいくつかの小さな低フレーム gif が作成され、これが結果でした。

なぜアニメーション化するのですか？

現在でもアニメーションを使用する理由の 1 つは、ユーザーの注意と集中を捉えるためです。携帯電話の通知、Web サイトのポップアップ、macOS の Dock のジャンプ アイコンなど、気を散らすものがどれだけあるか考えてみてください。

また、私たちのウェブサイトがはるかに高速であるとユーザーに思わせることもできます。ローダーと進行状況バーを配置することで、API が高速であるという認識を彼らに与えます。調査によると、カスタム ローダーを使用すると、当社の Web サイトに長く滞在できる可能性があります。

ユーザーに効率的に情報を提供しようとすることがあります。 Web サイトで多くのことが行われており、アニメーション ボタンを使用して、アプリケーションの流れの次のステップをユーザーに伝えたいと考えているかもしれません。

また、ユーザーをそこに留めておくために、マーケティング資料用のインタラクティブなコンテンツが必要な場合もあります。

ストーリーを伝えようとするときも、アニメーションは強力です。

ビュー<Transition />

Vanilla JavaScript または jQuery では、タイミングと遅延を手動で計算し、いつクラスを追加または削除するかを決定する必要があります。しかし Vue では、ターゲット要素を<Transition />コンポーネントにラップし、それらの難しいことの多くを自動的に行います。以下は、単純なフェード アニメーションです。

 <transition name="fade"> <p v-if="show">hello</p> </transition>

 .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter-from, .fade-leave-to opacity: 0; }

これは、Vue がそれを処理する方法です。

Vue <TransitionGroup />

<TransitionGroup>は、リストに表示される要素またはコンポーネントの挿入、削除、順序変更をアニメーション化するために設計された組み込みコンポーネントです。

これは、いくつかのタイルが画面上をスライドする簡単な例です。

 <transition-group tag="div" class="tile-section" name="list" appear> <TileComp v-for="(tile, i) in tiles" :key="i + 'tile'" :header="tile.title" :content="tile.content" :footer="tile.footer" ></TileComp> </transition-group>

 .list-enter-active, .list-leave-active { transition: all 1s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(70px); } 

JavaScript フック

CSS は素晴らしく、私たちはそれを使って多くのことを行うことができますが、十分でない場合もあります。

Vue は<Transition />コンポーネントにいくつかのフックを提供します。

 <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @enter-cancelled="onEnterCancelled" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @leave-cancelled="onLeaveCancelled" > <!-- ... --> </Transition>

グリーンソック GSAP

GreenSock アニメーション プラットフォーム (略してGSAP ) は、フロントエンドの開発者やデザイナーが堅牢なタイムライン ベースのアニメーションを作成できる強力な JavaScript ライブラリです。

GSAP でよく耳にする最も重要なことの 1 つは Tween です。

Tween は、すべてのアニメーション作業を行うものです。高性能のプロパティ セッターのようなものだと考えてください。ターゲット (アニメートするオブジェクト)、デュレーション、およびアニメートするプロパティを入力すると、再生ヘッドが新しい位置に移動すると、その時点でのプロパティ値がどうあるべきかが判断され、それに応じて適用されます。

Tween を作成する一般的な方法 (これらのメソッドはすべて Tween インスタンスを返します):

• gsap.to()

• gsap.from()

• gsap.fromTo()

  
  

単純なアニメーション (派手なシーケンスなし) の場合は、上記のメソッドだけで十分です。

 gsap.to(".selector", {toVars}); gsap.from(".selector", {fromVars}); gsap.fromTo(".selector", {fromVars}, {toVars}); // special properties (duration, ease, etc.) go in toVar

タイルの例に GSAP を追加してみましょう。

 <div class="tile-section"> <TileComp v-for="(tile, i) in tiles" :key="i + 'tile'" :header="tile.title" :content="tile.content" :footer="tile.footer" ></TileComp> </div>

 import gsap from "gsap"; ... mounted() { gsap.from(".tile", { duration: 0.5, opacity: 0, scale: 0, y: 200, ease: "power2", stagger: 0.1, }); }, 

Vue アニメーション カウンター

GSAP を使用して素敵なアニメーションを作成するもう 1 つの簡単な例は、お祝いのカウンター アニメーションです。ここで、それがどのように見えるかを見ることができます：

テンプレートにあるのは、書式設定された値とリセット ボタンを渡す h1 要素だけです。

 <div> <h1 ref="celebrate" class="counter" :class="{ celebrate: isCelebrate }"> {{ this.numberWithCommas(value) }} </h1> <button class="restart" @click="restart">Restart</button> </div>

GSAPのtimeline機能を利用する必要があります。アニメーションをシーケンスするためのツールと考えてください。

 import gsap from "gsap"; import confetti from "canvas-confetti"; const tl = gsap.timeline(); const start = 100000; const end = 3240074; export default { props: { msg: String, }, data() { return { isCelebrate: false, value: start, }; }, mounted() { tl.fromTo( ".counter", { innerText: start, scale: 0.8, }, { innerText: end, snap: { innerText: 1 }, duration: 4, ease: "linear", onUpdate: () => { this.$refs.celebrate.innerText = this.numberWithCommas( this.$refs.celebrate.innerText ); }, onComplete: () => { this.celebrate(); }, } ); }, methods: { celebrate() { this.isCelebrate = true; confetti({ particleCount: 150, spread: 100, origin: { y: 0.6 }, colors: ["#647eff", "#42d392"], disableForReducedMotion: true, }); }, numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }, restart() { tl.restart(); this.isCelebrate = false; }, }, };

ページ遷移

Vue Router 4 では、ページを遷移するための構文が少し変更されました。ルーターを遷移コンポーネントにラップしなくなりました。代わりに、 v-slotを使用します:

 <router-view v-slot="{ Component }"> <transition name="fade"> <component :is="Component" /> </transition> </router-view>

ページ遷移の例を次に示します。

このページ遷移を作成するには、enter フックが必要です。

 <router-view v-slot="{ Component }"> <transition :key="$route.path" @enter="onEnter" :css="false" > <component :is="Component" /> </transition> </router-view>

次に、GSAP からSplitTextプラグインを登録する必要があります。

 import gsap from "gsap"; import SplitText from "gsap/SplitText"; gsap.registerPlugin(SplitText); gsap.defaults({ duration: 1, ease: "power3.inOut", });

次に、プラグインを使用してテキストを分割し、アニメーション化できるようにします。

 mySplitText(el) { return new SplitText(el, { type: "words,chars,lines" }); },

onEnterフックを見てみましょう。

 onEnter(el, done) { const masterTL = gsap.timeline({ onComplete: () => { done; }, }); masterTL.add( this.enterContentTextAnimation( mySplitText(".content-text-header").chars ) ); masterTL.add( this.enterContentTextAnimation(".content-text-body"), "-=0.9" //overlap with previous by 0.9s ); masterTL.add(this.imgScaleOut(".content img"), "<"); //The start of previous animation },

ここでは、GSAP タイムラインをネストする方法と、 enterContentTextAnimationおよびimgScaleOut関数の機能を確認できます。

 enterContentTextAnimation(id) { const tl = gsap.timeline(); tl.fromTo( id, { yPercent: "100", opacity: 0, }, { yPercent: "0", opacity: 1, stagger: 0.03, } ); }, imgScaleOut(id) { const tl = gsap.timeline(); tl.from(id, { scale: 1.5, }); return tl; },

SVG

アニメーション チャートは、SVG アニメーションの良い例です。

このチャート アニメーションを可能にするコードの一部を次に示します。

 watch: { data(newValue, oldValue) { newValue.map((data, index) => { var id = "#arc" + index; var d = this.calculateArc(data, index); var oldValueD = this.calculateArc(oldValue[index]); const tl = gsap.timeline(); tl.fromTo( id, { attr: { d: oldValueD }, }, { duration: 0.5, attr: { d: d }, yoyo: true, } ); }); }, },

Web サイトでアニメーションを乱用しないことが重要です。便利な場合もありますが、視聴者を殺してしまうこともあります。

第七話終わり

この部分を楽しんでいただければ幸いです。私にとってのように、あなたにとっても価値があります。

今後数日かけて、残りの会話を共有します。乞うご期待…