查看: 13108|回复: 6

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

4 主题	0 好友	52 积分

士兵

Rank: 1

发消息

发表于 2019-7-10 09:16:18 |显示全部楼层

最近在写聊天界面和背包界面，想做成那种惯性滚动，市面上几乎大部分的游戏在遇到长界面展示时都是采用滑动（惯性滚动）展示，
我知道有内置的缓动函数，但不知掉能不能用上，如果能，对于界面滑动（滚动）还请前辈指点一下怎么使用。

使用道具举报

lufy

37 主题	8 好友	9356 积分

诸侯王

Rank: 15

发消息

发表于 2019-7-11 15:25:32 |显示全部楼层

这个你可以试一下引擎的LListView组件
http://lufylegend.com/api/zh_CN/out/classes/UI:LListView.html

不回答与技术和引擎不相关的问题

使用道具举报

leauna

4 主题	0 好友	52 积分

士兵

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中做了些修改，来复现实际在项目中使用遇到的问题，以下是代码；
现象：在蓝色区域拖动效果正常，橘色区域“基本无效果，得使劲使劲频繁才有效”，以下附上图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>UI:LListView</title>
<script type="text/javascript" src="../load_lufylegend.js"></script>
<script type="text/javascript" src="../load_lufylegend.ui.js"></script>
</head>
<body style="margin:0;padding:0;">
<div id="legend"></div>
<script>
//-----------------新加-----------------------------
var screen_width = window.innerWidth;
var screen_height = window.innerHeight;
var screen_rate = 2;
//-----------------新加-----------------------------
init(1000/60,"legend",screen_width*screen_rate,screen_height*screen_rate,main);
var backLayer, ctrlLayer, listView, index = 1;
function MyListChildView(i){
var self = this;
base(self,LListChildView,[]);
var rand = Math.random();
self.graphics.drawRect(1, "#000000", [0, 0, 100, 30],true,rand < 0.33?"#90EE90":(rand < 0.66 ? "#F4A460":"#E6E6FA"));
var t = new LTextField();
t.text = "点击删除"+i;
t.x = t.y = 5;
self.addChild(t);
}
MyListChildView.prototype.onClick = function(event){
event.currentTarget.deleteChildView(event.target);
};
function main(){
//-----------------新加-----------------------------
LGlobal.canvasObj.style.width = screen_width + "px";
LGlobal.canvasObj.style.height = screen_height + "px";
LGlobal.canvasStyleWidth = screen_width;
LGlobal.canvasStyleHeight = screen_height;
//-----------------新加-----------------------------
LMouseEventContainer.set(LMouseEvent.MOUSE_DOWN,true);
LMouseEventContainer.set(LMouseEvent.MOUSE_UP,true);
LMouseEventContainer.set(LMouseEvent.MOUSE_MOVE,true);
LGlobal.setDebug(true);
ctrlLayer = new LSprite();
addChild(ctrlLayer);
backLayer = new LSprite();
backLayer.x = (LGlobal.width-600)*0.5;
backLayer.y = (LGlobal.height-600)*0.5;
addChild(backLayer);
var button01 = new LButtonSample1("点击按钮添加单元");
button01.x = 30;
button01.y = 10;
ctrlLayer.addChild(button01);
button01.addEventListener(LMouseEvent.MOUSE_UP,addListChildView);
//-----------------修改-----------------------------
listViewInit(600,600);
//-----------------修改-----------------------------
}
function listViewInit(width,height){
listView = new LListView();
backLayer.addChild(listView);
listView.maxPerLine = 3;
listView.cellWidth = 100;
listView.cellHeight = 30;
//-----------------修改-----------------------------
listView.resize(width,height);
//-----------------修改-----------------------------
listView.arrangement = LListView.Direction.Horizontal;
listView.movement = LListView.Direction.Vertical;
listView.graphics.drawRect(1, "#00ff00", [0, 0, listView.clipping.width,listView.clipping.height]);
}
function addListChildView(){
var child = new MyListChildView(index++);
listView.insertChildView(child);
}
</script>
</body>
</html>

复制代码

使用道具举报

leauna

4 主题	0 好友	52 积分

士兵

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的问题，或者是监听的对象不对的问题。

使用道具举报

lufy

37 主题	8 好友	9356 积分

诸侯王

Rank: 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倍大的图，应该也不需要改动这些值的

不回答与技术和引擎不相关的问题

使用道具举报

leauna

4 主题	0 好友	52 积分

士兵

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在高倍屏下变模糊的问题”，可以查到相关文章。

使用道具举报

lufy

37 主题	8 好友	9356 积分

诸侯王

Rank: 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

不回答与技术和引擎不相关的问题

使用道具举报

返回列表

		自动登录	找回密码
密码			立即注册