|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/js-tarot-app/
课程评论：没有评论
**课程名称：** 使用 JavaScript 创建动画塔罗牌占卜应用 **课程简介：** 本课程将教您如何使用 JavaScript 创建一个在网页上具有动画效果的塔罗牌占卜应用程序。通过实践，您将学习如何在网页上创建动画应用程序。 **学习要点：** * 使用游戏开发库 Pixi.js 创建动画卡牌应用程序。 * 使用 Tween 动画库 Anime.js 实现便捷的动画效果。 * 学习从准备塔罗牌数据到实际创建应用程序的全过程。 * 掌握将应用程序代码和 CSS 打包成库的简单方法。 * 了解如何通过压缩 Web 字体来减小文件大小。 * 学习将创建的应用程序集成到现有网站中。 **使用的库：** * Pixi.js (MIT 许可) * Anime.js (MIT 许可) **课程内容安排：** 1. **绪论：** 画面过渡、文件结构、获取示例代码。 2. **开发准备：** 设置开发环境、熟悉 Pixi.js、Anime.js、图片、字体和塔罗牌数据。 3. **应用程序入口：** HTML、CSS 文件、入口点、尺寸调整、资源加载。 4. **标题画面：** 应用流程、标题画面逻辑、创建文本按钮、淡入淡出效果。 5. **卡牌操作 - 洗牌：** 卡牌堆叠、创建消息框、创建精灵按钮、洗牌动画、卡牌展开。 6. **卡牌操作 - 三叠牌：** 创建三叠牌、合并牌堆、十字形排列四张牌。 7. **占卜结果：** 结果显示按钮、结果展示、整体回顾。 8. **库化与发布准备：** Web 字体优化、输出库文件。 **补充说明：** * 课程开发环境为 Windows，但基础知识通用。 * 课程中展示的代码和数据均可下载。
このコースでは、JavaScriptを使って、Webページ上でタロットカードがアニメーションする占いアプリケーションを作成します。 また、その開発を通して、Webページ上でアニメーションするアプリケーションの作り方を学びます。 あなたはこのコースで、次のような事を学びます。・ゲーム向けライブラリー「Pixi.js」を利用した、カードをアニメーションさせるアプリケーションの作り方。・Tween方式でオブジェクトを動かすライブラリー「Anime.js」を利用した、手軽なアニメーションの手法。・タロット占いのデータの用意の仕方から、実際のアプリケーションの作成までの過程。・作成したアプリケーションのプログラムやCSSを1つにまとめて、ライブラリー化する簡単な方法。・Webフォントの縮小化によるファイルサイズの軽量化。・既存のWebサイトへの新規アプリケーションの組み込み。 使用するライブラリー「Pixi.js」「Anime.js」はMIT licenseなので無料で利用できます。 コースで紹介するコードやデータは、サンプルとして全てダウンロードできます。開発は、Windowsでおこなっていきますが、基本的なところはOS共通です。‥‥‥‥‥‥‥‥‥‥ コースは、次のように進みます。● 第1章 イントロダクション ・画面の遷移 ・ファイル構成 ・サンプルコードの入手● 第2章 開発の準備 ・開発環境の準備 ・Pixi.js ・Anime.js ・画像 ・フォント ・タロット占いのデータ● 第3章 アプリケーションの入り口 ・HTMLファイル ・CSSファイル ・エントリーポイント ・縦横サイズの調整 ・リソースの読み込み● 第4章 タイトル画面 ・進行 - アプリの進行 ・進行 - タイトル画面 ・UI - テキストボタンを作る ・UI - フェードアウトとフェードイン● 第5章 カード操作 - シャッフル ・進行 - カードを積み重ねる ・UI - メッセージボックスを作る ・UI - スプライトボタンを作る ・進行 - シャッフル ・進行 - カードの展開● 第6章 カード操作 - 3つの山 ・進行 - 3つの山を作る ・進行 - 3つの山をまとめる ・進行 - 4枚を十字に並べる● 第7章 占いの結果 ・進行 - 結果表示ボタン ・進行 - 結果の表示 ・全体の確認● 第8章 ライブラリー化 公開の準備 ・Webフォントの軽量化 ・ライブラリーの出力‥‥‥‥‥‥‥‥‥‥
