cocosCreator动态调整pageView下面的标记indicator | 南锋

南锋

南奔万里空,脱死锋镝余

cocosCreator动态调整pageView下面的标记indicator

pageView是我们在开发过程中经常使用到的一个组件,但是之前很少去动态修改过该属性的indicator,一般都是使用的默认的。今天产品要求实现一个动态效果,就是当页面左滑或者右滑时,下面的标记也会有一个左右滑动的效果(不知道怎么描述合适,大家进来看效果图自然明白)

效果如图:

效果图

实现思路:

1、监听滑动方向

  • 使用 page-turning 事件,结合 currentPagepreviousPage 的差值判断滑动方向。
    2、动态调整标记尺寸
  • 根据滑动方向,决定标记的拉伸动画从哪一侧开始,使用 UITransformcontentSize 属性进行拉伸。
    3、区分左右滑动
  • 左滑时标记从左侧向右拉伸,右滑时标记从右侧向左拉伸。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { tween, Size } from 'cc';

private previousPage: number = 0; // 记录上一次的页面索引
private currentPage: number = 0; // 当前页面的索引

private updateIndicatorHighlight() {
const indicator = this._view._PageC_banner.indicator;
if (!indicator) return;

const markers = indicator.node.children;
const currentPage = this._view._PageC_banner.getCurrentPageIndex();

for (let i = 0; i < markers.length; i++) {
const sprite = markers[i].getComponent(Sprite);
if (sprite) {
let uiTransform = markers[i].getComponent(UITransform);

if (i === currentPage) {
// 根据滑动方向决定拉伸动画
if (currentPage > this.previousPage) {
// 左滑:从左往右拉伸
Tool.setImgSprite(markers[i], "texture/illustrate/UI_Introduce_Point1", UIPnlillustrateLogic.bundleName);
uiTransform.setContentSize(this.markerWidth2, this.markerHeight); // 初始化为较小的尺寸
tween(uiTransform)
.to(0.2, { contentSize: new Size(this.markerWidth1, this.markerHeight) }, { easing: 'smooth' })
.start();
} else {
// 右滑:从右往左拉伸
Tool.setImgSprite(markers[i], "texture/illustrate/UI_Introduce_Point1", UIPnlillustrateLogic.bundleName);
uiTransform.setContentSize(this.markerWidth2, this.markerHeight); // 初始化为较小的尺寸
tween(uiTransform)
.to(0.2, { contentSize: new Size(this.markerWidth1, this.markerHeight) }, { easing: 'smooth' })
.start();
}
} else {
// 非当前页面,设置为未选中状态
Tool.setImgSprite(markers[i], "texture/illustrate/UI_Introduce_Point2", UIPnlillustrateLogic.bundleName);
tween(uiTransform)
.to(0.2, { contentSize: new Size(this.markerWidth2, this.markerHeight) }, { easing: 'smooth' })
.start();
}
}
}

// 更新 previousPage
this.previousPage = currentPage;
}

代码说明

1、previousPage
通过记录上一个页面索引来判断滑动方向:

  • currentPage > previousPage:左滑。
  • currentPage < previousPage:右滑。
    2、动态调整尺寸
  • 使用 UITransformsetContentSize 方法动态调整标记尺寸
    3、平滑效果
  • 使用 tweensmooth 插值函数,让尺寸调整更加自然。
+