全部课程 > 高级 > JavaScript > PixiJS实现场景布置
PixiJS实现场景布置
高级JavaScript 共计54节课 时长6:39:27 ¥499.00 购买
课程介绍
详细的介绍了场景布置H5的技术实现每一步,从设计稿分析,到写HTML结构,再到样式和JS代码。主要是的是详细介绍了PixiJS实现场景布置的原理,从此,场景布置和PixiJS的H5,轻松搞定!
课程附件
策划稿(内容包含1个PPT文档)
设计稿(psd源件)
代码包
下载附件
课程目录
  • 看一看 —— 了解场景布置(DIY海报)的应用场景
    • 场景布置(场景DIY)类H5两个经典案例 ( 00:03:42 )

  • 想一想 —— PixiJS的基本原理
    • 认识实现“场景布置”的框架-PixiJS ( 00:03:31 )

    • PixiJS - 核心类application的使用 ( 00:12:11 )

    • PixiJS - 元素的大小和位置确定 ( 00:06:15 )

    • PixiJS - 如何实现元素缩放 ( 00:03:39 )

    • PixiJS - 锚点百分比定位原地位置 ( 00:05:14 )

    • PixiJS - 锚点具体数值和元素旋转设定 ( 00:04:05 )

    • PixiJS - 精灵间父子关系 ( 00:10:56 )

    • PixiJS - 精灵获取及移除 ( 00:07:40 )

    • PixiJS - 精灵全局精准定位方法 ( 00:03:53 )

    • PixiJS - 绘制几何图形-矩形 ( 00:06:24 )

    • PixiJS - 绘制几何图形-圆角矩形、圆、椭圆、线段、多边形 ( 00:05:32 )

    • PixiJS - 文本的添加和设置 ( 00:04:35 )

  • 做一做 —— 《梦中的婚礼》代码实战 —— HTML结构部分
    • HTML-整体结构分析及使用工具介绍 ( 00:07:44 )

    • HTML-结构搭建代码实现 ( 00:08:31 )

  • 做一做 —— 《梦中的婚礼》代码实战 —— CSS3样式和动画部分
    • CSS3 -Loading页面样式实现1 ( 00:06:22 )

    • CSS3 -Loading页面样式实现2 + VSCode插件安装 ( 00:07:16 )

    • CSS3 -Loading页面动画实现 ( 00:10:34 )

    • CSS3 - 首页(KV页)样式实现 ( 00:09:48 )

    • CSS3- 告白页样式实现 ( 00:03:56 )

    • CSS3-场景舞台样式实现1 ( 00:08:48 )

    • CSS3-场景舞台样式实现2 ( 00:08:16 )

    • CSS3-场景舞台样式实现3 ( 00:07:51 )

    • CSS3- 结尾落地页样式实现 ( 00:07:42 )

  • 做一做 —— 《梦中的婚礼》代码实战 —— 基础JS实现部分
    • JS-图片预加载的实现 ( 00:04:02 )

    • JS-预加载动画的实现 ( 00:10:30 )

    • JS- 屏幕间切换交互动作实现 ( 00:10:55 )

    • JS- 页卡菜单设置及切换的实现 ( 00:17:29 )

  • 做一做 —— 《梦中的婚礼》代码实战 —— PixiJS场景布置核心代码部分
    • PixiJS - 核心函数及功能点梳理 ( 00:02:58 )

    • PixiJS - 创建一个舞台实例 ( 00:04:52 )

    • PixiJS - 切换舞台中的风景图 ( 00:08:01 )

    • PixiJS - 添加精灵组随机位置函数 ( 00:07:53 )

    • PixiJS -按钮的缩放、删除和边框精灵的设定 ( 00:05:25 )

    • PixiJS - 添加新郎精灵组 ( 00:11:49 )

    • PixiJS - 添加新娘精灵组 ( 00:04:41 )

    • PixiJS - 添加人物二级页卡展示 ( 00:05:53 )

    • PixiJS - 添加宠物精灵组 ( 00:13:14 )

    • PixiJS - 批量添加精灵元素 ( 00:04:27 )

    • PixiJS - 更新新郎、新娘的头发和服装 ( 00:10:07 )

    • PixiJS - 添加新郎、新娘唯一性判定逻辑 ( 00:07:38 )

    • PixiJS - 清除元素选中状态 ( 00:04:51 )

    • PixiJS - 为精灵绑定交互功能 ( 00:08:09 )

    • PixiJS - 元素的拖拽实现 ( 00:08:47 )

    • PixiJS - 元素的缩放实现 ( 00:12:18 )

    • PixiJS - 元素的删除操作和导出Base64格式的海报 ( 00:11:34 )

    • PixiJS - 生成海报的实现 ( 00:13:47 )

    • PixiJS - 点击角色后对应菜单自动出现设置 ( 00:05:34 )

    • PixiJS - 角色超出舞台范围设置 ( 00:02:43 )

  • 做一做 —— 《梦中的婚礼》代码实战 —— 体验优化和多终端适配部分
    • 体验优化-背景音乐的添加和设定 ( 00:07:47 )

    • 体验优化-横纵屏幕提示实现 ( 00:05:59 )

    • 体验优化-再玩一次及分享提示的实现 ( 00:04:31 )

    • 多终端 - 多终端兼容测试和模拟器调试 ( 00:08:07 )

    • 多终端 - 真机测试 ( 00:03:39 )

  • 回顾和梳理整个课程的结构、知识点和实现过程
    • 回顾知识点 ( 00:07:22 )