GeneXusでハンバーガーメニューアニメーションを実装してみる


こんにちは。業務サービス部の澤村です。
皆さんは「ハンバーガーメニュー」をご存知でしょうか。スマートフォンでウェブサイトを見たときに画面の端っこの方によく表示されている、三本の横線のことです。まだまだハンバーガーメニューへの根強い反対派も多いようですが、「メニューを開くボタン」として今では広く定着したUIだと思います。

そんなハンバーガーメニューですが、カッコイイサイトではたまにハンバーガーメニューをクリックすると三本線からバッテンに変わったり、くるっと回転したりと何だかオシャレなアニメーションが付いていることがあります。
GeneXusでもやりたい!かっこよくしたい!!と悪戦苦闘しつつも作ってみましたので、今回はGeneXusでのハンバーガーメニューのアニメーション実装について書いていこうと思います。
使用バージョンはGeneXus15U12です。

作ってみた

説明を始める前ですが、作ってみたものがこちらです。
せっかく作ったのでついでにスマートフォン用の表示が切り変わるメニューもつけてみました。これだけですでにちょっとお洒落な感じです。では実際に作ってみましょう。

作り方

ツールの「テーブル」と「テキストブロック」で作っていきます。
HTML/CSSで実装する場合、<span>を活用して作成する場合が多いようですが、テキストブロックをHTMLに変えてあれこれこねくり回してみたものの上手くいかなかったので諦めました。潔くテキストブロックをふんだんに使いましょう。
まずWeb Panelにレスポンシブテーブルを配置し、テーブル内にテキストブロックを3つ配置します。

このテキストブロックがハンバーガーメニューの三本線になります。
キャプションはEventsで空にしておきます。

テーマクラスのTextlockにクラスを追加します。

Web PanelではTextblock_Topには「Humberger_top_Horizontal」、Textblock_Middleには「Humberger_middle_Horizontal」、Textblock_Bottomには「Humberger_bottom_Horizontal」をそれぞれクラスに設定しておきます。
プロパティは下記のようになっています。標準で設定されていないTransition等はCustom Propertiesで設定できます。

Transformで角度を設定し、ここにTransitionで速度を設定することでアニメーションができました。
次にイベントを記載します。テキストブロックを配置したテーブルにイベントをつけましょう。

これで完成です。なお、三本線はそれぞれこのような動きをしています。

Transformをカスタマイズすることでこのようなアニメーションも作成できます。

まとめ

Transformでは単調な動きの設定しかできないため、段階を設定できるAnimation設定も今後はチャレンジしてみたいですね。GeneXusはデザインも強いぞ!とアピールしていけたらと思います。
以上、お役に立てたら幸いです。

CONTACT

株式会社キャパでは、GeneXusの開発について
ご相談を承っています。

営業時間:月~金 9:30~18:00 
土日・祝 定休日
FAXでのお問い合わせは24時間受付中 
FAX:03-5297-2879


関連記事一覧

we love develop
アプリやシステムの開発を通じて、お客様のビジネスを成長させることが私たちのビジネスです。お気軽にお問い合わせください。
 お問い合せ

お電話でのお問い合わせはこちらから
TEL:03-5297-2871

メールマガジンの登録

キャパでは誰かに話したくなるようなIT小ネタを、週に一回メルマガで配信しています。
ぜひ購読してみませんか?
 購読する

ホワイトペーパーの入手

ITブログ月間20万PV達成!自社オウンドメディアの運用ノウハウを無料公開しています。
 ダウンロード

記事カテゴリ

月別投稿記事

PAGE TOP