横向一镜到底类H5的开发与实战(PixiJS + PhyTouch + TweenMax + TimelineMax)

高级JavaScript 共计36节课时长3:41:32 ￥499.00 购买

课程介绍

运用 Pixi.js + PhyTouch + TweenMax + TimelineMax 技术栈打造横向一镜到底类 H5 “神秘小五的一天”。30 多节课程细致讲解开发过程中的方方面面。完美解决横纵屏切换的监测与页面重载。用 TweenMax 和 Pixi.js 打造丝滑的动态效果。

课程附件

策划稿(内容包含1个PPT文档)
设计稿(psd源件)
代码包

下载附件

课程目录

前置内容
- 前言 ( 00:02:06 )
- 目录 ( 00:01:53 )
- 前置内容 ( 00:03:09 )
横向一镜到底在 H5 中的应用
- 案例分析-探秘芒种 ( 00:06:13 )
- 案例分析-我与taptap的两周年 ( 00:03:05 )
- 我在童话里遇到你的时光 ( 00:03:17 )
项目技术栈分析
- 项目技术栈分析 ( 00:06:51 )
- 设计稿的分析 ( 00:04:18 )
初始化舞台及添加页面元素
- 页面的初始化 ( 00:02:51 )
- 页面文件的引入 ( 00:03:45 )
- 创建舞台 ( 00:09:30 )
- 编写初始化的类 ( 00:11:59 )
- 编写初始化的函数 ( 00:07:24 )
页面滑动的位置监测
- 预览初始化的效果 ( 00:03:12 )
- 引入 PhyTouch 初始化滑动 ( 00:09:30 )
- 页面元素的分割与剪裁 ( 00:02:47 )
- 配置项及其引入 ( 00:06:37 )
添加页面精灵及其动画
- 添加页面精灵 ( 00:08:48 )
- 添加所有的页面精灵 ( 00:01:35 )
- GSAP 简介 ( 00:06:36 )
- 初始化时间轴 ( 00:07:42 )
- 为页面精灵添加动画 ( 00:09:23 )
- 兔子动作动画的编写 ( 00:03:45 )
- 对话框及树叶掉落动画的编写 ( 00:09:11 )
- 表盘指针旋转动画的编写 ( 00:04:02 )
- 人物视觉差动画的编写 ( 00:06:19 )
- 添加所有页面元素的动画效果 ( 00:01:53 )
- 首页元素聚拢动画的编写 ( 00:10:18 )
横纵屏切换的监测
- 横纵屏切换监测 ( 00:13:23 )
- 调整 PhyTouch 的原型方法 ( 00:05:33 )
- 测定旋转时的边界条件1 ( 00:10:51 )
- 测定旋转时的边界条件2 ( 00:02:37 )
- 隐藏移动时产生的白色区域 ( 00:04:44 )
- 添加品牌方的二维码1 ( 00:10:01 )
- 添加品牌方的二维码2 ( 00:11:00 )
课程总结
- 课程总结 ( 00:05:24 )