-
介绍典型的典型的一镜到底H5
-
介绍典型的典型的一镜到底H5案例 ( 00:03:55 )
-
-
一镜到底的三大知识点
-
知识点1:使用PixiJS创建舞台应用 ( 00:09:39 )
-
知识点1:使用PixiJS舞台加载和图片精灵 ( 00:07:50 )
-
知识点1:使用PixiJS舞台精灵动画 ( 00:05:45 )
-
知识点2:alloytouch监听滑动 ( 00:04:00 )
-
知识点3:滑动过程改变精灵透明度 ( 00:05:47 )
-
知识点3:滑动过程改变序列图 ( 00:10:29 )
-
-
实战 - 一镜到底H5 - 舞台中加载精灵
-
沟通设计稿+核对分镜脚本 ( 00:05:43 )
-
规划页面结构+创建舞台应用 ( 00:06:26 )
-
通过代码注释的形式整理代码思路 ( 00:07:42 )
-
创建图片数组并使用export和import加载数据 ( 00:05:25 )
-
添加图片序列帧数据+预加载舞台场景图片素材 ( 00:08:59 )
-
舞台中添加精灵组 ( 00:08:19 )
-
精灵组中添加精灵 ( 00:04:39 )
-
整理精灵添加到精灵组的共性函数 ( 00:10:51 )
-
快速添加精灵到舞台1 ( 00:08:35 )
-
快速添加精灵到舞台2 ( 00:10:10 )
-
快速添加精灵到舞台3并设置透明度 ( 00:10:53 )
-
-
实战 - 一镜到底H5 - 创建滑动监听和总时间轴
-
监听用户的滑动 ( 00:03:57 )
-
添加滑动过程中场景的移动 ( 00:05:34 )
-
-
实战 - 一镜到底H5 - 分时间轴和细节动画
-
随着滑动,显现星星 ( 00:08:01 )
-
随着滚动,房子放大 ( 00:10:27 )
-
精灵材质的变化,演义孩子的成长 ( 00:06:43 )
-
音符飘动 ( 00:04:22 )
-
工作到深夜动画 ( 00:08:08 )
-
展示扣题动画 ( 00:07:20 )
-
-
实战 - 气氛渲染中音频文件的使用
-
音频文件预加载 ( 00:08:29 )
-
播放背景音乐 ( 00:05:25 )
-
不同的位置,播放不同的声音 ( 00:06:33 )
-
-
实战- 页面优化 + 添加细节(更新中)
-
完美解决横纵屏切换 ( 00:03:19 )
-
loading加载页创建加载进度+手势提示 ( 00:08:28 )
-
细节优化品牌二维码 ( 00:03:56 )
-
真机测试项目 ( 00:01:23 )
-
课程总结 ( 00:02:51 )
-
PixiJS实现一镜到底
高级JavaScript
共计34节课
时长3:50:03
课程介绍
爆款H5必备技术,超详细的原理讲解,PixiJS + AlloyTouch + TweenMax;完整的课程设计素材和代码包;代码方式实现,随着滑动屏幕,呈现动画。
课程目录