H5互动的正确打开方式
编辑:IT大咖说
阅读字数: 1539
用时: 6分钟
摘要
现在越来越多的产品或营销页面,以H5互动(动画、3D)的方式呈现给观众。互动场景的设计、还原、开发、优化,对于前端开发者来说变成了整个业务开发过程中最重的负担。 手淘互动团队用一套流程工具以及一系列技术方案,解决的开发过程中痛点,提高整个周期的效率。本次分享,从前端架构和工程说起,以手淘互动开发为案例,为前端开发者打开互动制作的一扇门。
嘉宾分享视频地址:http://t.cn/RopquND
“交互,是链接用户的桥梁”
交互是HTML技术发展过程中的一个里程碑。很早以前,一个页面就是一大段文本,之后出现了按钮,出现了表单,才有了一定的交互。
交互不只是点击,交互的概念可以涉猎的很广。
对于用户来说,获取信息的方式有两种。第一种是通过被动的去获取页面中信息,第二种是它主动去寻求反馈。
用户通过这两个途径去获得想要的东西,对于互动来说,也需要在这两点上通过自己的创意和技术去表达给用户。
“动画,是展现页面的灵魂”
假如把页面比喻成一个机器人,交互就是赋予了我们一个能对机器人进行操纵的连接。动画能够帮助一个“机器人”活起来。对于动画来说,它其实是动效和时间的一个完美的结合。
动效可以抽象地理解为起始值到终止值之间一个变化的过程。
如果是具体的元素,可以把这个变化的过程做一些映射;对于类似three.js这样的框架,它的对象本身有一些属性,这些属性也能够认为它是一个0-1的动效变化过程。
概括来讲,它们都是一次差值算法。这就是动效的定义。
把动效串起来就是动画。动效负责自己的元素,让它能够运动;而动画则负责把这些动效管理起来。
“除了桥梁和灵魂,还有?”
交互是桥梁,动画是灵魂。除此之外,更重要的是我们需要在H5的互动页面里把它表达出来。
兼容性
对互动页面进行一轮机型适配。
性能优化
性能在动画、互动页面里,可以直接把它映射为帧。我们需要做的就是JankFree,这样动画、交互、互动才能完美地呈现给用户。
Jank Free则需要从CPU和GPU两方面来做。
降级
降级可分为内容降级和版本降级。
内容降级比较容易理解,就是能够保证主要内容,把次要内容去掉或降级。这样能让更多用户看到页面的内容。
版本降级主要是用在3D和2D版本上。
同native的亲密接触
我们会native的页面上去做一个H5的view,然后把它透明,同时也可以获得native里每个元素的位置,并在H5里面替换成H5的动画元素,让用户感受到动画和首页紧密结合在一起。
解放生产力的工具
Airbnb已经有了一个lottie。我们通过JSON和DSL间的一次转换对赋予它二次开发能力,可以对JSON进行动画微调,也可以把很多动画片段、JSON数据组合起来运用到业务中去,附加业务属性。
因为DSL比较接近前端的开发思路,我们借助DSL的设计思想和JSON进行转换之后,能够让我们在动画的开发过程当中能够参与进去,真正做到想要的东西。
Web3D
Web3D对于前端来说其实是跨界,实质上是GPU编程。
互动是前端界的又一股泥石流
互动其实也是前端的一个分支,但它和传统的前端开发不一样。它需要有另外一种思维或知识积累。
所以我希望大家能够在感兴趣的前提下去深入探索这方面的东西,然后呈现给大家更多更炫酷的内容。
我的演讲到此结束,谢谢大家!
相关推荐
推荐文章
干货 | 豆子科技首席架构师钟声:Java的纯真年代
开源中国社区创始人红薯:J2Cache开源中国两级缓存实践
近期活动
直播 | CCF-GAIR 2018 全球人工智能与机器人峰会
原文地址:http://t.cn/RoiRXZG
转载于:https://my.oschina.net/u/3588740/blog/1204358
H5互动的正确打开方式相关推荐
- 【解决方案】谈公众号红包的正确打开方式--传奇创世
红包,红包.每次群发红包为什么只能是200?原来这是腾讯做出的一个举措.群发有红包?那如果想要微信公众号的红包怎么办? 其实,也是可以实现的.接下来的解决方案就是针对公众号红包做出的,让我们一起来看它 ...
- 鸿蒙电视如何播放手机上的歌,鸿蒙这么用 荣耀智慧屏联动手机的正确打开方式...
原标题:鸿蒙这么用 荣耀智慧屏联动手机的正确打开方式 上周末,荣耀刚刚发布了全新的智慧屏产品,依托于华为系的优势资源,其图像素质.影音内容这些围绕于"屏"的部分我们是相当放心的,所 ...
- 苹果切换输入法_iPhone输入法的正确打开方式,让你打字更痛快
iPhone输入法的正确打开方式,让你打字更痛快 手机是我们经常会使用到的一个物品,同时我们和手机的互动,目前主要是建立在输入法层面,尽管我们可以通过声音进行控制一些智能化的设备,但是这样的功能并没有 ...
- opengl 贴图坐标控制_材质贴图正确打开方式
哈喽,各位观众朋友们好鸭~欢迎来到讲道理画图的地方,我是黄玮宁. 最近呀经常有小伙伴来问我那些不同通道的材质贴图该怎么用,而且频率不是一般的高,所以我觉得有必要来说说这些通道贴图的用法了. 视频版(B ...
- Console控制台的正确打开方式
Console控制台的正确打开方式 console对象提供了访问浏览器调试模式的信息到控制台 -- Console对象|-- assert() 如果第一个参数断言为false,则在控制台输出错误信息| ...
- 任务队列和异步接口的正确打开方式(.NET Core版本)
layout: post title: 任务队列和异步接口的正确打开方式(.NET Core版本) category: dotnet core date: 2019-01-12 tags: dotne ...
- log python_基于Python log 的正确打开方式
保存代码到文件:logger.py import os import logbook from logbook.more import ColorizedStderrHandler import sm ...
- python四舍五入round_四舍五入就用round( )?Python四舍五入的正确打开方式!
四舍五入就用round( )?Python四舍五入的正确打开方式! 2018-09-22 21:40 阅读数 4 <>round( )函数简介 菜鸟教程中介绍到,round() 函数作用就 ...
- 通过机器学习识别“迪士尼在逃公主”,程序员宠女的正确打开方式!
到了庆祝的时候了!我们刚刚送走了圣诞老人.现在正等待新年的钟声敲响.所以我想到建立一个很酷的东西(至少我的七岁小公主会觉得)同时学一点机器学习.所以我们要做一个什么? 我借用的我女儿所有迪士尼公主人偶 ...
最新文章
- Spring MVC 4
- mixin机制 vue_读?VuePress(四)插件机制
- Javascript日期格式化指定格式的字符串实现
- hiho一下第二周 Hihocoder #1014 : Trie树
- Java提高—对象克隆(复制)/对象属性拷贝
- 第五周项目2-对象作为数据成员
- 这些数据分析方法你都掌握了么
- dataguard 下主备 online redo 与 standby redo log resize 重建
- Nginx实战基础篇七 最新源码包通过脚本部署LAMP搭建Discuz论坛
- php调用empty报错
- codejock toolkit pro 19.2 for MFC
- 郝兵c语言_郝斌主讲C语言 (全180讲)
- 计算机之父—— 约翰·冯·诺依曼
- 《红楼梦》的香气空白
- 安装VS2008的时候Windows Mobile 5.0 SDK R2 for pocket pc错误解决方案
- IPTVOTT,未来谁更香——关于新媒股份的一点思考
- 股票挂钩产品的设计、定价和避险原理
- 如何提高程序员的工作效率 这几招就够了
- 性能优化系列:每个程序员都应该知道的数字
- ATI显卡配置aticonfig和amdcccle全解