全部课程 > 高级 > JavaScript > 横向一镜到底类H5的开发与实战(PixiJS + PhyTouch + TweenMax + TimelineMax)
横向一镜到底类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 )