-
看一看 —— 了解场景布置(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 )
-
PixiJS实现场景布置
高级JavaScript
共计54节课
时长6:39:27
课程介绍
详细的介绍了场景布置H5的技术实现每一步,从设计稿分析,到写HTML结构,再到样式和JS代码。主要是的是详细介绍了PixiJS实现场景布置的原理,从此,场景布置和PixiJS的H5,轻松搞定!
课程目录