当前位置:网站首页>Cocos makes Scrollview to realize the effect of zooming in the middle and zooming out on both sides
Cocos makes Scrollview to realize the effect of zooming in the middle and zooming out on both sides
2022-07-07 15:38:00 【Vegetable chicken on the road】
The effect is as follows :
1. To make a prefab, Then generate 10 Join to an empty node , Considering that if the number of levels generated is large , load prefab There must be a Caton effect when , So I found a method similar to frame loading on the Internet , Every prefab The position calculation can calculate the arrangement by itself , The code is as follows :
_initData(){
// establish item
let cb = (i) => {
this._initItemPrefab(i)
};
this._loadPrefabFrame('item', 2, this._itemLength, cb);
}
_loadPrefabFrame(name, limit, max, cb) {
let count = 0;
this[name] = () => {
if (count < max) {
for (let i = 0; i < limit; i++) {
count++;
cb && cb(count);
// Turn off animation
if (count === max - 1) {
}
}
}
};
this.schedule(this[name], 1 / 60, (max - 1) / limit, 0);
}
private _initItemPrefab(index: number) {
let node = LevelModel.inst.createLevelUnitNode();
let unit: HomeLevelUnit = node.getComponent("HomeLevelUnit");
unit.ID = index;
unit.setData();
this.itemList.push(unit);
this.levelContent.addChild(node);
}
2. Load this prefab The parent node of joins the click event
_touchEvent(){
this.levelContent.on('touchstart', function (event) {
this._moveSpeed = 0;
this._startTime = new Date().getTime();
}.bind(this));
this.levelContent.on('touchmove', function (event) {
var movePos = event.getDelta();
this.itemMoveBy(movePos);
}.bind(this));
this.levelContent.on('touchend', function (event) {
this.touchEnd(event)
}.bind(this));
this.levelContent.on('touchcancel', function (event) {
this.touchEnd(event)
}.bind(this));
}
3. Listen and handle events
touchEnd(event) {
var curpos = event.getLocation();
var startpos = event.getStartLocation();
var dis = startpos.x - curpos.x;
var curTime = new Date().getTime();
var disTime = curTime - this._startTime;
this._moveSpeed = dis / disTime;
this.fixedPosition = true;
}
itemMoveBy(pos) {
if(this.itemList[0].node.x > 0 && pos.x>0){
return;
}
if(this.itemList[this.itemList.length-1].node.x < 0 && pos.x<0){
return;
}
for (let i = 0; i < this.itemList.length; i++) {
this.itemList[i].node.active = true;
this.itemList[i].node.x += pos.x;
}
this.updateScale();
}
updateScale() {
if (this.scaleMax < this.scaleMin || this.scaleMax == 0) {
return;
}
for (let i = 0; i < this.itemList.length; i++) {
var pre;
var x = this.itemList[i].node.x + this._maxSize.width / 2;
if (this.itemList[i].node.x < 0) {
pre = x / this._maxSize.width;
}
else {
pre = 1 - x / this._maxSize.width;
}
pre *= 2;
var scaleTo = this.scaleMax - this.scaleMin;
scaleTo *= pre;
scaleTo += this.scaleMin;
scaleTo = Math.abs(scaleTo);
this.itemList[i].node.scaleX = scaleTo;
this.itemList[i].node.scaleY = scaleTo;
if(this.itemList[i].node.scaleX < 0.8){
this.itemList[i].node.active = false;
}else if(this.itemList[i].node.scaleX >=0.95 && this.itemList[i].node.scaleX<=1){
this.itemList[i].node.zIndex = 100;
}else{
this.itemList[i].node.zIndex = 0;
}
}
}
update(dt) {
if(!this.fixedPosition){
return;
}
if (this._moveSpeed == 0 && this.fixedPosition){
this.fixedPosition = false;
let _maxIndex = 0;
let _maxScale = 0;
for (let i = 0; i < this.itemList.length; i++) {
if(this.itemList[i].node.scaleX > _maxScale){
_maxScale = this.itemList[i].node.scaleX;
_maxIndex = i;
}
}
for (let i = 0; i < this.itemList.length; i++) {
this.itemList[i].node.x = 168 * (i - _maxIndex);
if(i == _maxIndex){
this.itemList[_maxIndex].node.scaleX = 1;
this.itemList[_maxIndex].node.zIndex = 100;
}else{
this.itemList[i].node.scaleX = 0.8;
this.itemList[i].node.zIndex = 0;
}
}
};
if(this.itemList[0].node.x > 0){
return;
}
if(this.itemList[this.itemList.length-1].node.x < 0){
return;
}
for (let i = 0; i < this.itemList.length; i++) {
this.itemList[i].node.x -= this._moveSpeed * dt * this.speed;
}
if (this._moveSpeed > 0) {
this._moveSpeed -= dt * this.rub;
if (this._moveSpeed < 0) {
this._moveSpeed = 0;
}
} else {
this._moveSpeed += dt * this.rub;
if (this._moveSpeed > 0) {
this._moveSpeed = 0;
}
}
var moveTo = -this._moveSpeed * dt * this.speed;
this.itemMoveBy(cc.v2(moveTo, moveTo))
}
4. explain
Last in update The main processing in is to let him have a smooth deceleration to stop process , Make him look less stiff .
( Of course, when doing this, you don't need to generate so many at once prafab Of , I thought for a moment about 5 Just one , Then do the fake infinite loop effect , This should be the best , I'll change it later , Code has reference to others' code , It's a little messy. I'll sort it out later )
** Be careful : I'll give it directly here node Of x assignment , In fact, this is wrong , It is better not to assign the location information directly , To pass the setPosition Go set , Otherwise, the matrix will not be updated , Typically, this node has child nodes , If you assign directly , Child nodes will not follow the change of location
边栏推荐
- 【数字IC验证快速入门】29、SystemVerilog项目实践之AHB-SRAMC(9)(AHB-SRAMC SVTB Overview)
- 【数字IC验证快速入门】26、SystemVerilog项目实践之AHB-SRAMC(6)(APB协议基本要点)
- With 8 modules and 40 thinking models, you can break the shackles of thinking and meet the thinking needs of different stages and scenes of your work. Collect it quickly and learn it slowly
- 2.Golang基础知识
- 全日制研究生和非全日制研究生的区别!
- Share the technical details of super signature system construction
- 【OBS】RTMPSockBuf_ Fill, remote host closed connection.
- 【目标检测】YOLOv5跑通VOC2007数据集
- 【服务器数据恢复】戴尔某型号服务器raid故障的数据恢复案例
- Nacos一致性协议 CP/AP/JRaft/Distro协议
猜你喜欢
CTFshow,信息搜集:web2
Super simple and fully automated generation super signature system (cloud Xiaoduo minclouds.com cloud service instance), free application in-house test app distribution and hosting platform, maintenan
简述keepalived工作原理
CTFshow,信息搜集:web5
【深度学习】图像超分实验:SRCNN/FSRCNN
What is Base64?
2. Heap sort "hard to understand sort"
Ctfshow, information collection: web7
Super signature principle (fully automated super signature) [Yun Xiaoduo]
[Lanzhou University] information sharing of postgraduate entrance examination and re examination
随机推荐
简述keepalived工作原理
【OBS】RTMPSockBuf_ Fill, remote host closed connection.
【OBS】RTMPSockBuf_Fill, remote host closed connection.
【深度学习】语义分割实验:Unet网络/MSRC2数据集
Nacos conformance protocol cp/ap/jraft/distro protocol
@ComponentScan
What are PV and UV? pv、uv
一个需求温习到的所有知识,h5的表单被键盘遮挡,事件代理,事件委托
大表delete删数据导致数据库异常解决
Pit avoidance: description of null values in in and not in SQL
How to create Apple Developer personal account P8 certificate
Connecting FTP server tutorial
Unity's ASE achieves full screen sand blowing effect
Comparable and comparator of sorting
Unity之ASE实现全屏风沙效果
银行需要搭建智能客服模块的中台能力,驱动全场景智能客服务升级
【数字IC验证快速入门】18、SystemVerilog学习之基本语法5(并发线程...内含实践练习)
Ctfshow, information collection: web8
[quick start of Digital IC Verification] 18. Basic grammar of SystemVerilog learning 5 (concurrent threads... Including practical exercises)
CTFshow,信息搜集:web5