全部课程 > 高级 > JavaScript > PixiJS实现一镜到底
PixiJS实现一镜到底
高级JavaScript 共计34节课 时长3:50:03 ¥499.00 购买
课程介绍
爆款H5必备技术,超详细的原理讲解,PixiJS + AlloyTouch + TweenMax;完整的课程设计素材和代码包;代码方式实现,随着滑动屏幕,呈现动画。
课程附件
策划稿(内容包含1个PPT文档)
设计稿(psd源件)
代码包
下载附件
课程目录
  • 介绍典型的典型的一镜到底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 )