【100个Cocos实例】环形ScrollView的实现方法

引言

Cocos中环形ScrollView的实现

大家好，今天是圣诞节，又是寒冷的一天。

在游戏开发中经常需要用到ScrollView去实现滚动的列表。

他通常包括垂直方向和水平方向两个选择。

本文将介绍一下ScrollView环形方向的实现。

本文源工程可在文末阅读原文获取，小伙伴们自行前往。

1.什么是ScrollView

ScrollView（滚动视图组件）是一种用户界面元素，用于显示超过屏幕尺寸的内容，并允许用户在内容中进行滚动浏览。在游戏开发中，ScrollView通常用于处理大量的游戏界面元素，比如角色列表、道具列表等，这些内容可能超出屏幕可见区域。

我们接着来看看Cocos中的ScrollView

2.Cocos的ScrollView

滚动视图组件。

我们仔细看下编辑器，ScrollView主要有以下可视选项：

• Horizontal和Vertical，水平和垂直方向的支持，勾选后可开启该方向的滚动。

• ScrollBar，进度条，勾选了哪个方向的可以引用哪个方向的进度条。

• Intertia和Brake，滚动惯性及系数，手停止滑动后，滚动列表继续滚动的惯性。

• Elastic和Duration，回弹，触顶、触底后的回弹和系数。

• Content，可视内容的父节点。

• CancelInnerEvents，滚动过程阻断子节点的事件，防止误操作。

• Events，监听滚动相关的事件。

下面一起来看看环形ScrollView的原理

2.环形ScrollView的原理

要实现环形滚动，即Item在圆周上运动，我们要先选择圆心和半径。

然后根据以下向量的模的计算公式，利用圆上的点到圆心的距离相等得出每个Item的x坐标。

设置的时机则是滚动事件的回调：

下面一起来实现环形ScrollView。

3.环形ScrollView的实现

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

为了有更好的节目效果，本期借用笔者游戏《填色之旅》中的资源(不吐槽节目组了)。

3.编写代码

首先创建一个CircularScrollView组件。

import {
    _decorator, CCFloat, Color, Component, Graphics, ScrollView, v3, Vec3 } from 'cc';
const {
    ccclass, property } = _decorator;

@ccclass('CircularScrollView')