热点推荐

查看: 3296|回复: 5

[HTML5/CSS] 妙味移动端-交互远程实战开发课程

[复制链接]

1418

主题

1532

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
39191
发表于 2018-2-1 01:46:22 | 显示全部楼层 |阅读模式
妙味移动端-事件交互篇-远程实战开发课程

第一次课:2016年8月20日-周六 晚上18:00~20:00
第二次课:2016年8月24日-周三 晚上19:30~21:30
第三次课:2016年8月26日-周五 晚上19:30~21:30
第四次课:2016年8月27日-周六 晚上18:00~20:00
第五次课:2016年8月31日-周三 晚上19:30~21:30
第六次课:2016年9月02日-周五 晚上19:30~21:30
第七次课:2016年9月03日-周六 晚上18:00~20:00
第八次课:2016年9月07日-周三 晚上19:30~21:30
第九次课:2016年9月09日-周五 晚上19:30~21:30

原课程价格:999元/人

课程详情介绍:

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




下载链接回复可见:
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

0

主题

144

帖子

398

积分

年度VIP会员

Rank: 2

积分
398
发表于 2018-2-13 12:04:08 | 显示全部楼层
又是一个好资源啊
回复

使用道具 举报

0

主题

22

帖子

76

积分

Lv1码农小白

Rank: 1

积分
76
发表于 2018-2-21 10:26:27 | 显示全部楼层
66666666666
回复

使用道具 举报

0

主题

628

帖子

1736

积分

永久VIP会员

Rank: 3Rank: 3

积分
1736
发表于 2018-12-28 17:40:24 | 显示全部楼层
妙味移动端-事件交互篇-远程实战开发课程
回复

使用道具 举报

1

主题

643

帖子

2090

积分

永久VIP会员

Rank: 3Rank: 3

积分
2090
发表于 2022-6-9 02:30:05 | 显示全部楼层
妙味移动端-交互远程实战开发课程
回复

使用道具 举报

1

主题

187

帖子

506

积分

永久VIP会员

Rank: 3Rank: 3

积分
506
发表于 2022-11-28 17:23:02 | 显示全部楼层
妙味移动端-交互远程实战开发课程
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表