pop-in动画
2016-05-20 15:27
197 查看
HBuilder 5.8.0 版本起,Android支持了pop-in动画(iOS之前也支持)。
pop-in是一种窗体联动挤压式动画,新窗体进入时,老窗体有被挤压的感觉。
这种动画体验非常接近iOS的感觉,体验比slide-in-right更好,尤其是返回时窗体非常顺滑,老界面也不会虚一下。
但使用pop-in动画需要开发者注意一些问题,因为如果代码写的不够好,有可能造成pop-in效果反而不如slide-in-right。
pop-in配合预载的效果更好(ps:就是必须要先预加载)
如果页面预加载了,pop-in会非常顺滑。如果页面没有预载,且页面非常复杂,那么pop-in的动画启动速度可能会比slide-in-right动画慢。
有些页面css写的不好,会二次渲染,即开始时页面显示一个样子,很快页面被二次渲染显示成另一个样子。这种问题以前在slide-in-right动画上不明显,但在pop-in动画上会明显暴露出来。(ps:CSS必须写好,否则会影响性能!!!)
当然如果不预载,也还有一种处理方式,就是点击准备切换新窗体时,先转个雪花,等新窗体在后台渲染完毕,然后在调用pop-in动画移入屏幕。
pop-in动画未完成时,不要做webview创建等消耗资源的事情
如果在新进入页面里初始化时做预载其他页面的工作,可能会造成pop-in动画快结束时卡顿。
如果你的动画是200毫秒,那么最好延时200毫秒等待动画结束后做其他页面的预载,保证动画的流畅执行。
举个例子,如果准备新入的界面里有一个webview侧滑菜单,这个侧滑菜单页面是在新入页面的mui的init里preload的,那么直接使用会造成pop-in动画会结束时卡一下,在延时200毫秒在动画结束时继续预载页面就不会卡动画 (ps:很深奥~~)。
动画时间(ps:没计算过,相信官方说法)
pop-in的动画在iOS上应该是300毫秒为宜,在Android上,在200-250毫秒为宜。
而slide-in-right的动画一般在150毫秒左右,所以slide-in-right改为pop-in时,应适当延长动画时间,让切换效果看起来更舒畅。
变色问题如何处理?(ps:遇到了在说)
使用pop-in动画如果发现bar的背景色变色,一般是因为bar的背景色设置了透明度,就是rgba里面的那个a。
浏览器在渲染透明度时反应比较慢,建议把透明度去掉。
以前在silde-in-right上变色不明显,是因为在移动过程中,新窗体仍在渲染。
在pop-in上,为了保证2个窗体的挤压效果,我们控制了在窗体移动时不渲染,所以变色问题就会突出。
Android下不支持多webview挤压(ps:一个页面写那多webview干嘛?改产品方案吧,2个足以了吧)
两个webview挤压是比较容易做的,但3个或更多webview挤压会产生很多效率问题。目前只有iOS支持3个webview挤压动画。Android不支持3个webview的挤压动画。
比如一个webview式侧滑菜单,在它出现时,屏幕上有2个webview并排显示着,一个是侧滑菜单的webview,一个是主界面。
此时点击侧滑菜单的item打开新webview,如果是pop-in动画,会产生新入的webview要同时挤压老的主界面webview和侧滑菜单webview,这个效果iOS上实现了,但在Android上因为效率问题暂不支持。此时Android会自动忽略pop-in,改为默认的slide-in-right动画,即普通从右移入动画。
这里提到的3个webview的限制是指主webview,子webview被append到主webview里,它的挤压是与父webview联动做的,不受3个webview的限制。
即一个主webview 子webview,此时点击一个按钮pop-in移入一个新webview,2个老的webview仍然可以被正常挤压。
pop-in动画是一个有趣的技术,但掌握它也需要一些调优技巧。
如果大家反馈问题,请说明在哪个手机、哪个rom版本、哪个app出了问题。
最好先看下Hello H5 和Hello mui这2个官方app在手机上有没有问题。
http://ask.dcloud.net.cn/article/225
(ps:pop-in简单好用,但想用好不容易,大屏高像素手机还是有些卡顿,如果要追求完美,可以去掉动画)
pop-in是一种窗体联动挤压式动画,新窗体进入时,老窗体有被挤压的感觉。
这种动画体验非常接近iOS的感觉,体验比slide-in-right更好,尤其是返回时窗体非常顺滑,老界面也不会虚一下。
但使用pop-in动画需要开发者注意一些问题,因为如果代码写的不够好,有可能造成pop-in效果反而不如slide-in-right。
pop-in配合预载的效果更好(ps:就是必须要先预加载)
如果页面预加载了,pop-in会非常顺滑。如果页面没有预载,且页面非常复杂,那么pop-in的动画启动速度可能会比slide-in-right动画慢。
有些页面css写的不好,会二次渲染,即开始时页面显示一个样子,很快页面被二次渲染显示成另一个样子。这种问题以前在slide-in-right动画上不明显,但在pop-in动画上会明显暴露出来。(ps:CSS必须写好,否则会影响性能!!!)
当然如果不预载,也还有一种处理方式,就是点击准备切换新窗体时,先转个雪花,等新窗体在后台渲染完毕,然后在调用pop-in动画移入屏幕。
pop-in动画未完成时,不要做webview创建等消耗资源的事情
如果在新进入页面里初始化时做预载其他页面的工作,可能会造成pop-in动画快结束时卡顿。
如果你的动画是200毫秒,那么最好延时200毫秒等待动画结束后做其他页面的预载,保证动画的流畅执行。
举个例子,如果准备新入的界面里有一个webview侧滑菜单,这个侧滑菜单页面是在新入页面的mui的init里preload的,那么直接使用会造成pop-in动画会结束时卡一下,在延时200毫秒在动画结束时继续预载页面就不会卡动画 (ps:很深奥~~)。
动画时间(ps:没计算过,相信官方说法)
pop-in的动画在iOS上应该是300毫秒为宜,在Android上,在200-250毫秒为宜。
而slide-in-right的动画一般在150毫秒左右,所以slide-in-right改为pop-in时,应适当延长动画时间,让切换效果看起来更舒畅。
变色问题如何处理?(ps:遇到了在说)
使用pop-in动画如果发现bar的背景色变色,一般是因为bar的背景色设置了透明度,就是rgba里面的那个a。
浏览器在渲染透明度时反应比较慢,建议把透明度去掉。
以前在silde-in-right上变色不明显,是因为在移动过程中,新窗体仍在渲染。
在pop-in上,为了保证2个窗体的挤压效果,我们控制了在窗体移动时不渲染,所以变色问题就会突出。
Android下不支持多webview挤压(ps:一个页面写那多webview干嘛?改产品方案吧,2个足以了吧)
两个webview挤压是比较容易做的,但3个或更多webview挤压会产生很多效率问题。目前只有iOS支持3个webview挤压动画。Android不支持3个webview的挤压动画。
比如一个webview式侧滑菜单,在它出现时,屏幕上有2个webview并排显示着,一个是侧滑菜单的webview,一个是主界面。
此时点击侧滑菜单的item打开新webview,如果是pop-in动画,会产生新入的webview要同时挤压老的主界面webview和侧滑菜单webview,这个效果iOS上实现了,但在Android上因为效率问题暂不支持。此时Android会自动忽略pop-in,改为默认的slide-in-right动画,即普通从右移入动画。
这里提到的3个webview的限制是指主webview,子webview被append到主webview里,它的挤压是与父webview联动做的,不受3个webview的限制。
即一个主webview 子webview,此时点击一个按钮pop-in移入一个新webview,2个老的webview仍然可以被正常挤压。
pop-in动画是一个有趣的技术,但掌握它也需要一些调优技巧。
如果大家反馈问题,请说明在哪个手机、哪个rom版本、哪个app出了问题。
最好先看下Hello H5 和Hello mui这2个官方app在手机上有没有问题。
http://ask.dcloud.net.cn/article/225
(ps:pop-in简单好用,但想用好不容易,大屏高像素手机还是有些卡顿,如果要追求完美,可以去掉动画)
相关文章推荐
- tomcat(13)Host和Engine容器
- Top K 算法详解
- photoshop cs5 key
- Linux命令统计源码行数
- Linux 静态库和动态库的区别
- MyEclipse 2016 Windows/Linux/Mac 版下载地址
- (转)IIS7 优化-网站请发并发数
- Copy & MutableCopy
- Tomcat调优总结
- tomcat的connector与container原理分析(二)
- centos 下面修改mysql的root密码
- Citrix Supportability Pack介绍
- setsockopt()用法(参数详细说明)
- Docker
- 在linux中使用mingw为64位windows交叉编译程序
- Nginx负载均衡+tomcat+session共享
- OpenWrt目录结构
- linux cron计划任务
- apache lucene core
- Hadoop各商业发行版之比较