lufy's legend

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1827|回复: 6

惯性滚动效果,问下有内置吗?感觉挺常用。

[复制链接]

3

主题

0

好友

41

积分

士兵

Rank: 1

发表于 2019-7-10 09:16:18 |显示全部楼层
最近在写聊天界面和背包界面,想做成那种惯性滚动,市面上几乎大部分的游戏在遇到长界面展示时都是采用滑动(惯性滚动)展示,
我知道有内置的缓动函数,但不知掉能不能用上,如果能,对于界面滑动(滚动)还请前辈指点一下怎么使用。

回复

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2019-7-11 15:25:32 |显示全部楼层
这个你可以试一下引擎的LListView组件
http://lufylegend.com/api/zh_CN/out/classes/UI:LListView.html
不回答与技术和引擎不相关的问题
回复

使用道具 举报

3

主题

0

好友

41

积分

士兵

Rank: 1

发表于 2019-7-12 16:22:14 |显示全部楼层
lufy 发表于 2019-7-11 15:25
这个你可以试一下引擎的LListView组件
http://lufylegend.com/api/zh_CN/out/classes/UIListView.html ...

我在官方demo中做了些修改,来复现实际在项目中使用遇到的问题,以下是代码;
现象:在蓝色区域拖动效果正常,橘色区域“基本无效果,得使劲使劲频繁才有效”,以下附上图片
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>UI:LListView</title>
  6.     <script type="text/javascript" src="../load_lufylegend.js"></script>
  7.     <script type="text/javascript" src="../load_lufylegend.ui.js"></script>
  8. </head>
  9. <body style="margin:0;padding:0;">
  10. <div id="legend"></div>
  11. <script>
  12.     //-----------------新加-----------------------------
  13.     var screen_width = window.innerWidth;
  14.     var screen_height = window.innerHeight;
  15.     var screen_rate = 2;
  16.     //-----------------新加-----------------------------

  17.     init(1000/60,"legend",screen_width*screen_rate,screen_height*screen_rate,main);
  18.     var backLayer, ctrlLayer, listView, index = 1;
  19.     function MyListChildView(i){
  20.         var self = this;
  21.         base(self,LListChildView,[]);
  22.         var rand = Math.random();
  23.         self.graphics.drawRect(1, "#000000", [0, 0, 100, 30],true,rand < 0.33?"#90EE90":(rand < 0.66 ? "#F4A460":"#E6E6FA"));
  24.         var t = new LTextField();
  25.         t.text = "点击删除"+i;
  26.         t.x = t.y = 5;
  27.         self.addChild(t);
  28.     }
  29.     MyListChildView.prototype.onClick = function(event){
  30.         event.currentTarget.deleteChildView(event.target);
  31.     };
  32.     function main(){
  33.         //-----------------新加-----------------------------
  34.         LGlobal.canvasObj.style.width = screen_width + "px";
  35.         LGlobal.canvasObj.style.height = screen_height + "px";
  36.         LGlobal.canvasStyleWidth = screen_width;
  37.         LGlobal.canvasStyleHeight = screen_height;
  38.         //-----------------新加-----------------------------


  39.         LMouseEventContainer.set(LMouseEvent.MOUSE_DOWN,true);
  40.         LMouseEventContainer.set(LMouseEvent.MOUSE_UP,true);
  41.         LMouseEventContainer.set(LMouseEvent.MOUSE_MOVE,true);
  42.         LGlobal.setDebug(true);
  43.         ctrlLayer = new LSprite();
  44.         addChild(ctrlLayer);
  45.         backLayer = new LSprite();
  46.         backLayer.x = (LGlobal.width-600)*0.5;
  47.         backLayer.y = (LGlobal.height-600)*0.5;
  48.         addChild(backLayer);
  49.         var button01 = new LButtonSample1("点击按钮添加单元");
  50.         button01.x = 30;
  51.         button01.y = 10;
  52.         ctrlLayer.addChild(button01);
  53.         button01.addEventListener(LMouseEvent.MOUSE_UP,addListChildView);
  54.         //-----------------修改-----------------------------
  55.         listViewInit(600,600);
  56.         //-----------------修改-----------------------------
  57.     }
  58.     function listViewInit(width,height){
  59.         listView = new LListView();
  60.         backLayer.addChild(listView);
  61.         listView.maxPerLine = 3;
  62.         listView.cellWidth = 100;
  63.         listView.cellHeight = 30;
  64.         //-----------------修改-----------------------------
  65.         listView.resize(width,height);
  66.         //-----------------修改-----------------------------
  67.         listView.arrangement = LListView.Direction.Horizontal;
  68.         listView.movement = LListView.Direction.Vertical;
  69.         listView.graphics.drawRect(1, "#00ff00", [0, 0, listView.clipping.width,listView.clipping.height]);
  70.     }
  71.     function addListChildView(){
  72.         var child = new MyListChildView(index++);
  73.         listView.insertChildView(child);
  74.     }
  75. </script>
  76. </body>
  77. </html>
复制代码
回复

使用道具 举报

3

主题

0

好友

41

积分

士兵

Rank: 1

发表于 2019-7-12 16:28:22 |显示全部楼层
本帖最后由 leauna 于 2019-7-13 17:20 编辑
leauna 发表于 2019-7-12 16:22
我在官方demo中做了些修改,来复现实际在项目中使用遇到的问题,以下是代码;
现象:在蓝色区域拖动效果 ...

我今天尝试了一下午,应该是采用LGlobal.canvasObj.style.width 、 LGlobal.canvasObj.style.height、LGlobal.canvasStyleWidth、LGlobal.canvasStyleHeight 缩放canvas照成的引擎监听事件x,y的数值偏差;
但是实际项目中必须要做个这个操作,为了使游戏画面高清,所以才会有代码中的screen_rate = 2,画2倍的图在1倍的canvas上。
更新补充:经过我在引擎.js和ui.js中加输出定位,发现引起问题的地方了,是ui.js中 LListViewDragObject类的构造函数中LGlobal.stage.addEventListener(LFocusEvent.FOCUS_OUT, self._ll_focusout);照成的;
暂时的解决方案:替换为self.addEventListener(LFocusEvent.FOCUS_OUT, self._ll_focusout);就可以了。
新的追求和疑问:
1.问题解决了,问题点也锁定的差不多了,原来监听的是LGlobal.stage,可能由于我那样的缩放的问题,导致事件监听错位了,我换成监听self就行了,但不知道怎么处理好不好;
2.官方给的例子按照理想的效果应该是,鼠标向下拖动出绿色线框后,会停止“取消”拖拽,但是官方的例子并不是这样的,感觉有点瑕疵,感觉是事件监听 LFocusEvent.FOCUS_OUT的问题,或者是监听的对象不对的问题。
回复

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2019-7-13 22:50:58 |显示全部楼层
leauna 发表于 2019-7-12 16:28
我今天尝试了一下午,应该是采用LGlobal.canvasObj.style.width 、 LGlobal.canvasObj.style.height、LGlo ...

我不明白你为什么要改LGlobal.canvasObj.style.width 、 LGlobal.canvasObj.style.height、LGlobal.canvasStyleWidth、LGlobal.canvasStyleHeight这些,
你要实现什么效果?按你说的要渲染2倍大的图,应该也不需要改动这些值的
不回答与技术和引擎不相关的问题
回复

使用道具 举报

3

主题

0

好友

41

积分

士兵

Rank: 1

发表于 2019-7-22 12:24:54 |显示全部楼层
本帖最后由 leauna 于 2019-7-22 12:37 编辑
lufy 发表于 2019-7-13 22:50
我不明白你为什么要改LGlobal.canvasObj.style.width 、 LGlobal.canvasObj.style.height、LGlobal.canvas ...

我看cocos用的canvas的style width height,erget和laya用的canvas的style transform matrix 进行的缩放;
之所以要用这种缩放是为了解决canvas在高倍屏下变模糊的问题。
可以搜索“解决canvas在高倍屏下变模糊的问题”,可以查到相关文章。
回复

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2019-7-22 13:03:57 |显示全部楼层
leauna 发表于 2019-7-22 12:24
我看cocos用的canvas的style width height,erget和laya用的canvas的style transform matrix 进行的缩放; ...

关键是lufylegend引擎本身的全屏设置,内置缩放就是这个原理,你自己再手动设置是没有必要的
代码
https://github.com/lufylegend/lu ... obal.js#L2022-L2029
不回答与技术和引擎不相关的问题
回复

使用道具 举报

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

防止垃圾广告,请填写任意字符

Archiver|lufy's legend

GMT+8, 2020-8-12 20:19 , Processed in 0.070166 second(s), 24 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部