全部课程 > 中级 > JavaScript > 【问答类】H5项目实战:春天飞花令(技术代码部分PixiJS)
【问答类】H5项目实战:春天飞花令(技术代码部分PixiJS)
中级JavaScript 共计20节课 时长2:18:03 ¥149.00 购买
课程介绍
本课程使用 Pixi.js 2D 渲染引擎和 Tween.js 动画库,配合Vue.js,搭建了一个答题类的 H5项目。项目使用背景斜切和空间垂直切换来完成题目场景的切换,涵盖题目动态切换、答案搜集、音频反馈、合成结果海报等多方面内容。
课程附件
策划稿(内容包含1个PPT文档)
设计稿(psd源件)
代码包
课程目录
  • 课程介绍
    • 课程介绍 ( 00:04:45 )

    • 需求分析与技术选型 ( 00:06:08 )

  • 基础页面搭建
    • 页面结构分析 ( 00:08:34 )

    • 图片预加载与loading页面搭建 ( 00:07:12 )

    • 首页场景搭建 ( 00:08:09 )

    • 首页场景动画 ( 00:06:12 )

  • 背景“水平斜切和空间垂直切换”效果制作
    • Pixi.js 基本介绍 ( 00:03:40 )

    • 创建页面初始化函数 ( 00:10:14 )

  • 使用 Tween.js 制作页面缓动效果
    • Tween.js 基本介绍 ( 00:05:27 )

    • 页面基本动画 ( 00:07:55 )

    • 庭院场景动画 ( 00:13:55 )

    • 其他场景动画禅师 ( 00:07:54 )

  • 答题提示音与海报展示
    • 答题动画效果分析 ( 00:03:54 )

    • 答题判断 ( 00:07:28 )

    • 创建题目选择函数 ( 00:11:50 )

    • 添加音频素材 ( 00:02:33 )

    • 图片合成介绍 ( 00:02:58 )

    • 创建图片合成函数(1) ( 00:07:01 )

    • 创建图片合成函数(2) ( 00:07:34 )

  • 课程总结
    • 课程总结 ( 00:04:40 )