Laya 滑动切换的ViewStack

Laya 滑动切换的ViewStack

@ixenos 2020-10-29 11:08:36

 

1.查看ViewStack源码，发现只是个简单的visible切换，我们继承修改一下，实现缓动切换

  1     /**
  2      * 使用运动切换的ViewStack 
  3      * @author ixenos 2020-10-14 18:29:22
  4      * 
  5      */
  6     public class CViewStack extends ViewStack
  7     {
  8         /**
  9          * 运动模式 
 10          */
 11         public var motionMode:Boolean = false;
 12         
 13         private var _lastSelectIndex:int = -1;
 14         private var _tweenStack:Vector.<Tween> = new Vector.<Tween>();
 15         
 16         public function CViewStack()
 17         {
 18             super();
 19         }
 20         
 21         override public function set selectedIndex(value:int):void {
 22             if (_selectedIndex != value) {
 23                 if(motionMode){
 24                     this.disposeItems();
 25                     var dirV:int = value - _lastSelectIndex;
 26                     setSelectMotion(_selectedIndex, false, dirV);
 27                     _selectedIndex = value;
 28                     setSelectMotion(_selectedIndex, true, dirV);
 29                     _lastSelectIndex = value;
 30                 }else{
 31                     setSelect(_selectedIndex, false);
 32                     _selectedIndex = value;
 33                     setSelect(_selectedIndex, true);
 34                 }
 35             }
 36         }
 37         
 38         /**
 39          * @private
 40          * @param index 需要设置的对象的索引。
 41          * @param selected 表示对象的选中状态。
 42          */
 43         protected function setSelectMotion(index:int, selected:Boolean, dirV:int):void {
 44             if (_items && index > -1 && index < _items.length) {
 45                 
 46                 var item:Sprite = _items[index] as Sprite;
 47                 if (item == null) {
 48                     return;
 49                 }
 50                 
 51                 if(!selected){
 52                     dirV = -dirV;
 53                 }
 54                 
 55                 var outsideX:Number = (dirV>0?1:-1) * width;
 56                 var motionTime:Number = 500;
 57                 
 58                 item.visible = true;
 59                 var t:Tween;
 60                 if(selected){
 61                     item.x = outsideX;
 62                     t = Tween.to(item, {"x":0}, motionTime, Ease.circOut);
 63                 }else{
 64                     item.x = 0;
 65                     t = Tween.to(item, {"x":outsideX}, motionTime, Ease.circOut, new Handler(this, com));
 66                 }
 67                 
 68                 _tweenStack.push(t);
 69                 
 70                 function com():void{
 71                     item.visible = false;
 72                 }
 73                 
 74             }
 75         }
 76         
 77         /**
 78          * items 表层事件清洗 
 79          */
 80         private function disposeItems():void{
 81             while(_tweenStack.length > 0){
 82                 var t:Tween = _tweenStack.pop();
 83                 if(t){
 84                     t.complete();
 85                     t = null; 
 86                 }
 87             }
 88             
 89             if(_items && _items.length>0){
 90                 for (var i:int = 0; i < _items.length; i++) {
 91                     var item:Sprite = _items[i] as Sprite;
 92                     if (item == null) {
 93                         break;
 94                     }
 95                     Laya.timer.clearAll(item);
 96                     Tween.clearAll(item);
 97                 }
 98             }
 99         }
100         
101         /**@inheritDoc */
102         override public function destroy(destroyChild:Boolean = true):void {
103             this.disposeItems();
104             super.destroy(destroyChild);
105         }

 

2.业务伪代码

viewStack业务

 1         private function addEvent():void
 2         {
 3             if(lui.viewStack.motionMode){
 4                 lui.viewStack.on(Event.MOUSE_DOWN, this, onViewStackDown);
 5             }
 6         }
 7         
 8         private function onViewStackDown(e:Event = null):void
 9         {
10             lui.viewStack.once(Event.MOUSE_UP, this, onViewStackUp, [e.stageX]);
11             lui.viewStack.once(Event.MOUSE_OUT, this, onViewStackUp, [e.stageX]);
12         }
13         
14         private function onViewStackUp(lastStageX:Number, e:Event = null):void
15         {
16             lui.viewStack.off(Event.MOUSE_UP, this, onViewStackUp);
17             lui.viewStack.off(Event.MOUSE_OUT, this, onViewStackUp);
18             
19             var dirV:Number = lastStageX - e.stageX;
20             if(dirV > 20)
21             {
22                 if(lui.listTab.selectedIndex<lui.listTab.length-1)
23                 {
24                     lui.listTab.selectedIndex += 1;                
25                 }
26             }
27             else if(dirV < -20)
28             {
29                 if(lui.listTab.selectedIndex>0)
30                 {
31                     lui.listTab.selectedIndex -= 1;                
32                 }
33             }
34         }
35         
36         private function delEvent():void
37         {
38             lui.viewStack.off(Event.MOUSE_DOWN, this, onViewStackDown);
39         }

 

viewStack搭配tab

 1             lui.listTab.selectEnable = false;
 2             lui.listTab.selectHandler = Handler.create(this, listTabSelect, null, false);
 3             lui.listTab.selectedIndex = 1;
 4 
 5         private function listTabSelect(index:int):void
 6         {
 7             //动态加载
 8             if(!lui.viewStack.items[index])
 9             {
10                 var item:StageSelectContent = new StageSelectContent();
11                 lui.viewStack.addItem(item);
12             }
13             
14             //切换页面
15             var dat:* = lui.listTab.getItem(index);
16             lui.viewStack.selectedIndex = index;
17         }

 

posted @ 2020-10-29 11:16  ixenos  阅读(497)  评论(0)  编辑  收藏  举报