Html5移动开发论坛

注册

 

发新话题 回复该主题

sencha touch 2.0 气泡式增加项的动画特效解决方案 [复制链接]

1#
银光图片



sencha touch原生的动画特效,大家都应该已经看到过了,笔者也曾经为它的特效兴奋不已,但是当遇到一些自定义特效时,一时却没有找到现成的实现方式,比如要实现类似ios的增加项特效,当真是煞费苦心。网上关于sencha touch的资料本来就比较少,所以只能靠自己来研究了...

目前笔者的实现方式是,使用一个panel,透明的遮盖住目标对象,利用它的显示和隐藏的过程动画,模拟出气泡感的收缩动画
1)使用继承自Ext.fx.animation.Abstract基类的ScaleFade
2)精确计算动画加载对象的位置参数 PS:panel的开始点(x,y)和结束点(x,y)
3)ScaleFade的in(显示),out(隐藏),需要在一个连贯的动作中完成



1),首先.关于基类Ext.fx.animation.Abstract,API中基本没有任何有用的东西,幸好在网上找到了一些示例,经过笔者的修改,利用panel的隐藏实现起来还是比较简单的。

2),但是实现第二点可就不那么容易了,关键就是无法精确获取,panel显示时的最终“坐标”,还有隐藏结束时的“最终落点”。


开始坐标之所以难以得到,最困难的是因为,笔者所使用的背景容器是一个List,它本身是可以滚动的,在此基础上获取目标对象dom节点的位置很困难。
首先笔者的目的是获取list中被点击ITEM行的左上角的座标,主要是指y座标,x座标很容易得到。然后使用该座标在item框上覆盖一个panel,最终是含有高透明度的,所以item不会被完全遮挡,形成item周围被加了一个选中边框的特效。 其中必须先获取List滚动区间高度(Ps:该List是上下滚动的),这可以在List上加scrollend滚动事件获得,然后在item上使用offsetTop获得List整体高度(PS:包括因滚动而被隐藏的部分)-滚动区间的高度+标题栏高度=item左上角的y坐标(PS:相对于浏览器窗口)。

结束点的坐标,对于笔者来说指的是浏览器窗口右上角按钮的中心点位置,这个点看起来是容易确定的,其实不然,笔者一直以为,被移动对象panel的移动时的基准点是左上角,所以一直无法准确得到上移和右移的距离,后来笔者多次测试,发现基准点应该是panel的中心点,也就是item的中心点,这样一来问题就可以引刃而解了。


3),ScaleFade的in(显示),out(隐藏),如果直接使用show,然后再使用hide方法,会出现show效果一闪而过,只有hide效果的问题,很显然这是笔者不愿意看到的样子。估计可能是动画过程本身是异步进行的,所以show还未结束hide已经开始导致的。解决的方法就是捕捉show结束事件,然后增加一个阻塞事件,时间不用很长,大约略长于默认的动画过程时间(PS:默认的动画过程时间为250ms,而且该时间可以自定义),最后测试下来,效果不错。


以上是笔者制作本特效的重点总结,也结合过程中遇到的各种无法预期的困难,由于时间有限,无法对各种细节一一讲解,希望对有相同需求和困惑的人,起到一定帮助,谢谢!

附加ScaleFadeOut.js代码示例
  1. Ext.define('Ext.fx.animation.ScaleFadeOut', {
  2.     extend: 'Ext.fx.animation.Abstract',

  3.     alternateClassName: 'Ext.fx.animation.ScaleFadeIn',
  4.     alias: ['animation.scalefadeout'],
  5.     
  6.     config: {
  7.         // @hide
  8.         out: true,
  9.         duration:500,

  10.         before: {
  11.             display: null,
  12.             opacity: 0
  13.         },

  14.         after: {
  15.             opacity: 0.3
  16.         },
  17.         reverse: null
  18.     },

  19.     updateOut: function(newOut) {
  20.         var to   = this.getTo(),
  21.             from = this.getFrom();
  22.     
  23.         
  24.         //隐藏
  25.             
  26.         from.set('opacity', 1);
  27.         from.setTransform({
  28.             scale: 1,
  29.             translateX: 0,
  30.             translateY: 0                
  31.         });
  32.         
  33.         
  34.         
  35.         to.set('opacity', 1);
  36.         to.setTransform({
  37.             scale: 0,
  38.             //translateX: (window.screen.width/2),
  39.             translateX: anim_out_size_x,
  40.             translateY: (0-anim_out_size_y)
  41.             //translateY:(0-(window.screen.height*2))
  42.         });
  43.         
  44.         
  45.     }
  46. });
复制代码
分享 转发
TOP
2#


Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。
PhoneGap安卓 交流 QQ 群 250395324欢迎您的加入。
Html5 APP 交流 QQ 群 273843464欢迎您的加入。
TOP
发新话题 回复该主题