• 课程介绍
  • 学习目标
  • 课程详情
  • 本次远程课核心内容包括:各类移动端常见 bug 及兼容性解决方案、固定定位拖拽晃动、事件点透、transform变化残影、安卓页面上下滑动时的卡顿;各种移动端项目开发的常见交互效果如:移动端折叠菜单、无缝滑屏幻灯片、带缓冲和回弹动画的滑屏导航、下拉刷新上滑加载;各式移动端性能提升解决方案如:安卓延时卡顿优化、transform优化…
  • 通过学习本套课程,熟练掌握移动端的各种交互特效,如滑屏操作、拖拽、幻灯片、3D效果、自定义滚动条、上滑刷新下拉加载、多指图片缩放,并且对移动端性能优化有深入了解,能独立完成移动端项目开发、移动端相册功能开发。

  • 今天一定要对苦苦等待的亲们说声:“抱歉,让你们久等了!”
    妙味远程移动端课程姗姗来迟!!!
    正因为你们的长久等待,使得我们有更多时间打磨课程,从而酝酿出满满价值!


    本次远程课核心内容包括:

     

    各类移动端常见bug及兼容性解决方案如:固定定位拖拽晃动、事件点透、transform变化残影、安卓页面上下滑动时的卡顿……
    各种移动端项目开发的常见交互效果如:移动端折叠菜单、无缝滑屏幻灯片、带缓冲和回弹动画的滑屏导航、下拉刷新上滑加载……
    各式移动端性能提升解决方案如:安卓延时卡顿优化、transform优化与transition3D硬件加速、加载图片性能损耗及canvas优化……
    除此以外,还有各种移动端整站实例开发全过程演示,诸如课程中使用了 “音悦台” 项目,为大家现场演示 “移动端布局rem适配问题、百分比适配问题” 及 “真实项目中诸多事件交互” 的实战细节,再配合丰富的案例:“移动端3D系统切换实例、移动端多指操作实例、移动端相册开发” ……等一系列重磅猛料,使得本套课程内容成为本季当之无愧的移动端开发最强悍课程!


     

    课程详情介绍:


    - 第1步 -
    工欲善其事,必先利其器,想学好移动端,必从最基础的移动端事件开始,例如:基础事件、touchstart、touchmove、touchend,event对象、取消默认阻止冒泡、防止文字选中和阻止默认菜单、事件延迟问题、事件点透问题、touchEvent、touches、changedTouches、targetTouches……这些知识虽然不复杂,但也要掌握扎实,只有打下坚实基础,才能大显身手;

    - 第2步 -
    在踏入实战征途之前,一切从滑屏开始:上滑、下滑、左滑、右滑…我的滑板鞋#¥%……&*()…呃……滑屏交互究竟要如何处理?妙味课堂用实例告诉你每一处知识点细节:滑屏-拖拽原理分析、滑屏幻灯片实例演示……

    - 第3步 -
    在面对不同的移动端功能开发时,能实现的方法往往有很多,到底哪种解决方案性能最优?只有通晓如下知识点,才能提炼出性能最优之道:transform2D 变换:rotate()、scale()、skew()、translate()、left和top引起的回流问题及优化、处理transform中不能通过计算后样式获取的问题、transition 动画基本知识点、贝赛尔曲线、transitionend事件、transition 安卓下卡顿和闪屏的BUG……详尽掌握这些知识点之后,我们方能理解 transform与transition的性能解决方案。

    - 第4步 -
    说一千道一万,要想掌握 “硬功夫” 不玩虚的,就得拿整站项目进行现场开发!!移动端音悦台开发实战:rem方式整站适配、横竖屏切换适配、fixed定位的BUG及替代方案、折叠菜单、带缓冲回弹动画的导航、“改良版”无缝滚动式音悦台滑屏幻灯片、移动端滑屏式选项卡……唯有汇聚以上所学知识、整合在实战中,方能不辜负自己的努力!

    - 第5步 -
    我们认知的世界是三维的,我们熟悉的一切也是3D的,纵然在移动端方寸之地,亦是如此。当我们熟知以下知识过后,即能构建一个真正的三维世界:transform3D:滑动旋转的方块、3d多边体、正n边形的外角计算与正n边形的中心点计算……就在我们的移动开发技艺逐渐精进之时,我们依然需要用实例去探索,试试这套知识体系在实际开发之中如何运用:3D桌面切换实例、百分比方式配合怪异盒模型布局的适配方案、animation的loading动画、立体三棱柱制作、页面绝对坐标获取、IOS下3D变换的兼容问题及解决方案……

    - 第6步 -
    移动端开发之中,有一个很不起眼却又异常重要的功能:自定义滚动条!它的应用范围几乎涉及到每一个移动端项目。因此我们需要好好聊聊它、以及伴随着滚动条的操作进行各种加载数据 的那些事:自定义滚动条原理、滚动条比例计算、图片随滚动条的按需加载、渲染优化-canvas(GPU渲染加速)、transition安卓卡顿BUG、3D硬件加速……在此篇章中,涉及到“上拉刷新下拉加载” 和 “性能问题、各种小bug修复解决方案” 层出不穷,我们会在本次远程课中向大家如数家珍般娓娓道来……

    - 第7步 -
    想象PC端屏幕中有两个鼠标?三个鼠标??甚至多个鼠标同时操作???……天呐,乱成一锅粥!但是,移动端中的多指操作,却是IOS生态必备。然而在安卓端,我们不得不自己动手,去做出一些努力才能解决兼容性问题。那么究竟有多少细节与技巧需要掌握呢?详见以下内容:移动端多指事件、双指操作图片缩放和旋转、安卓多指事件的兼容解决、勾股定理与Math.atan2(与X轴的绝对夹角)、transform执行时的残影问题解决……

    - 第8步 -
    移动端事件综合实例驾到!!“学以致用”——这永远是编程学习中最强悍的道理!因此在这个阶段,我们选择了一个大家耳熟能详的应用案例:移动端相册功能开发。我们需要模拟的相册功能有:相册的上下滑动且带动画回弹功能、相册标题顶部吸附功能、更多照片的加载功能、滑屏滚动条功能、单击照片从中心放大功能、多指操作照片旋转缩放功能……细心的你会发现,这些功能已经涵盖了以上大部分知识体系!你如果能将这些功能顺利的开发出来,并且适配各个屏幕尺寸手机,在流畅度、顺滑度上令人满意,在代码组织、性能优化上令人欣喜,从而达到最佳用户体验——这或许是时下移动端开发中最重要的技术需求了!



    课程大纲:

    1. 1.基础事件
    2.     1)touchstart
    3.     2)touchmove
    4.     3)touchend
    5. 2.event对象
    6.     1)取消默认事件 
    7.     2)阻止冒泡
    8.     3)防止文字选中和阻止默认菜单
    9.     4)鼠标事件延迟
    10.     5)事件点透问题
    11. 3.touchEvent
    12.     1)touches
    13.     2)changedTouches
    14.     3)targetTouches
    15. 4.滑屏处理
    16.     1)拖拽原理分析
    17.     2)滑屏幻灯片简版 
    18. 5.transform2D 变换
    19.     1)rotate()、scale()、skew()、translate()
    20.     2)left和top引起的回流问题及优化
    21.     3)处理transform中不能通过计算后样式获取的问题
    22. 6.transition 动画
    23.     1) transition基本知识点
    24.     2) 贝赛尔曲线运动
    25.     3) transitionend事件
    26.     4) transition 不执行的BUG
    27. 7.实例:移动端版音悦台首页制作
    28.     1) rem布局适配
    29.     2) 横竖屏切换适配
    30.     3) fixed定位的BUG及替代方案
    31.     4) 滑屏导航缓冲回弹动画的实现
    32.     5) 完整版无缝滚动的滑屏幻灯片
    33.     6) 滑屏选项卡
    34. 8.transform3D
    35.     1) 滑动旋转的方块
    36.     2) 3d多边体制作
    37.     3) 正n边形的外角计算与正n边形的中心点计算
    38. 9. 3D桌面切换
    39.     1) 百分比配合怪异盒模型布局适配
    40.     2) animation的loading动画
    41.     3) 立体三棱柱制作
    42.     4) 页面绝对坐标获取
    43.     5) IOS下3D变换的兼容问题及解决方案
    44. 10.自定义滚动条
    45.     1) 滚动条比例计算
    46.     2) 图片随滚动条的按需加载        
    47.     3) 渲染优化-canvas(GPU渲染加速)
    48.     4) transition安卓卡顿BUG--3D硬件加速        
    49. 11.多指事件
    50.     1) 双指操作图片缩放和旋转
    51.     2) 安卓多指事件的兼容解决
    52.     3) 勾股定理与Math.atan2(与X轴的绝对夹角)
    53.     3) transform执行时的残影问题解决
    54. 12.实例:完整版的移动端相册
    复制代码



    哪些人会报名该课程:

    1、符合学前要求的学员;
    2、工作中遭遇各种问题的在职开发者;
    3、面试中屡屡碰壁,正打算沉下心来学习移动端开发,再战IT江山的少年;
    4、对WEB移动端开发不了解,感到好奇、想提前一窥究竟的IT爱好者;
    5、妙味视频助我提升技能,即使已经会了,但仍然要报名的妙味支持者;
    6、其他IT培训机构的偷师者(拿来主义比自己原创课程要简单啊)、广大盗版商或IT知识二道贩子;
    7、有钱任性,不知道为啥要报名的富豪们 ^_^;
    8、想加入妙味做讲师、却不知自身技术水平是否足够?因此来听听课、对比一下自己技术实力是否吻合;
    9、以上情况都不是!如果有万中无一的特例,请把报名原因发送至:leo@miaov.com

    ——无论如何,世界美好!有你们相伴,才有妙味的步步成长!


    课前预习知识(学前基础)
    1、JS基础知识;
    2、简单的移动端的基本概念:viewport和rem;
    ——建议报名的亲们,再看看VIP视频中的【JavaScript基础部分】以及【《移动端开发深度揭秘》系列公开课】作为课前预习。
    ——点击查看 >>VIP视频下载目录

    课程费用:

    活动价:¥660.00999.00      VIP价:¥620.00

     

    课程咨询QQ:2852509866、2852509867、2852509868
    课程咨询电话:010-57269690
    客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00

    请关注微信公众号,了解最新课程安排:

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

莫涛

主讲教师:莫涛

讲师介绍:H5移动端开发专家,妙味课堂创始人之一,精通H5移动端开发技巧, 妙味官网核心功能开发者、海量的H5、CSS3、移动端系列视频录制者 妙味最新移动端课程研发者,同时具备多年丰富的教学经历, 为人谦逊,处事低调,与之接触学员均对其赞赏有加。 现主导妙味新课程研发与移动端课程标准化工作 同时负责妙味实体班、远程班、公开课与最新案例研究重任。

相关课程

  • 移动端3D绚酷空间-VR 场景应用

    ¥520.00
    当前热度:4667
  • 移动端原生技法精粹揭秘课程

    ¥199.00
    当前热度:12060
  • 登录框和各种 loading 实战案例

    ¥10.00
    当前热度:2825
  • 邮件案例和场景切换实战案例

    ¥10.00
    当前热度:1877
  • 移动端体感交互实战开发

    ¥289.00
    当前热度:3221
“100%中奖,幸运好礼转到手”
幸运用户
用户 奖励方式
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
1. 中奖后请联系客服,兑换奖品;
2. 兑奖有效期:2018 年 10 月 18 日 - 2018 年 12 月 31 日;
3. 本活动最终解释权归妙味课堂所有;
您还剩余1次抽奖机会
 
“100%中奖,幸运好礼转到手”
恭喜中奖
奖品名称
“下笔消费返还10%现金”
查看奖品详情
 
“100%中奖,幸运好礼转到手”
奖品名称
下笔消费返还10%现金
奖品描述:

1、赠送1年VIP会员视频权限

2、不能赠予,仅限中奖的用户使用

3、提供ID号+绑定的手机号

4、提供个人中心的中奖截图

兑换有效期: 2018年11月31日 - 17:00:00
兑换方式:联系客服兑换

客服联系方式:

QQ:2852509866、2852509868

微信:miaov-class、miaov-study

返回
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部