@cc-component/cc-ex-component 1.1.6 → 1.1.8

package/assets/lib/collectView/lib-ext/yx-card-page-layout.ts

@@ -0,0 +1,132 @@
+import { _decorator, Component, log, math, Node } from 'cc';
+import { YXCollectionView, YXIndexPath, YXLayout, YXLayoutAttributes } from '../lib_collect/yx-collection-view';
+
+export class YXCardPageLayout extends YXLayout {
+
+    /**
+     * 节点大小
+     */
+    itemSize: math.Size = null
+
+    /**
+     * 最多同时显示多少个节点
+     */
+    maxVisibleItemCount: number = 4
+
+    /**
+     * 每个节点之间的缩放差距
+     */
+    eachScale: number = 0.1
+
+    /**
+     * 每个节点之间间距
+     */
+    eachSpacing: number = 50
+
+    /**
+     * 整体内容偏移
+     */
+    contentOffset: math.Vec3 = null
+
+    /**
+     * 此类布局必须确定节点大小
+     */
+    constructor(itemSize: math.Size) {
+        super()
+        this.itemSize = itemSize
+    }
+
+    prepare(collectionView: YXCollectionView): void {
+        collectionView.scrollView.horizontal = true
+        collectionView.scrollView.vertical = false
+
+        let allAttributes = []
+        let total = collectionView.getNumberOfItems(0)
+        total = Math.min(total, this.maxVisibleItemCount)
+        for (let index = 0; index < total; index++) {
+            let attr = YXLayoutAttributes.layoutAttributesForCell(new YXIndexPath(0, index))
+            attr.frame.size = this.itemSize
+            allAttributes.push(attr)
+        }
+        this.attributes = allAttributes
+        let contentSize = collectionView.scrollView.view.contentSize.clone()
+        contentSize.width = contentSize.width * 3
+        this.contentSize = contentSize
+    }
+
+    layoutAttributesForElementsInRect(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
+        let offset = collectionView.scrollView.getScrollOffset()
+        offset.x = - offset.x
+        let progress = (offset.x - collectionView.scrollView.view.width) / collectionView.scrollView.view.width // [ -1 0 1 ]
+
+        for (let index = 0; index < this.attributes.length; index++) {
+            const attr = this.attributes[index];
+
+            // 调整层级
+            attr.zIndex = -index
+
+            // 调整位置
+            let startOffsetY = index * this.eachSpacing
+            attr.frame.x = offset.x + (collectionView.scrollView.view.width - attr.frame.width) * 0.5
+            attr.frame.y = offset.y + (collectionView.scrollView.view.height - attr.frame.height) * 0.5 + startOffsetY
+            attr.frame.y = attr.frame.y - this.eachSpacing * Math.abs(progress)
+            attr.frame.y = Math.max(attr.frame.y, offset.y + (collectionView.scrollView.view.height - attr.frame.height) * 0.5)
+            if (index == 0) {
+                attr.frame.x = attr.frame.x - progress * collectionView.scrollView.view.width
+            }
+
+            // 调整缩放
+            let startScale = 1 - index * this.eachScale
+            let scale = startScale
+            scale = scale + this.eachScale * Math.abs(progress)
+            scale = Math.min(scale, 1)
+            attr.scale = new math.Vec3(scale, scale, 1)
+
+            // 偏移
+            if (this.contentOffset) {
+                attr.offset = this.contentOffset
+            }
+        }
+        return this.attributes
+    }
+
+    initOffset(collectionView: YXCollectionView): void {
+        let offset = new math.Vec2()
+        offset.x = collectionView.scrollView.view.width
+        offset.y = 0
+        collectionView.scrollView.scrollToOffset(offset)
+    }
+
+    /**
+     * 分页逻辑
+     */
+    targetOffset(collectionView: YXCollectionView, touchMoveVelocity: math.Vec3, startOffset: math.Vec2, originTargetOffset: math.Vec2, originScrollDuration: number): { offset: math.Vec2; time?: number; attenuated?: boolean; } | null {
+        let offset = collectionView.scrollView.getScrollOffset()
+        offset.x = - offset.x
+        let threshold = 0.2
+
+        let idx = Math.round(offset.x / collectionView.scrollView.view.width)
+        let r = touchMoveVelocity.x / collectionView.scrollView.view.width
+        if (startOffset && Math.abs(r) >= threshold) {
+            idx = Math.round(startOffset.x / collectionView.scrollView.view.width) + (r > 0 ? -1 : 1)
+        }
+        offset.x = idx * collectionView.scrollView.view.width
+
+        return { offset: offset, time: 0.5 }
+    }
+
+    /**
+     * 标记此布局需要实时更新
+     */
+    shouldUpdateAttributesForBoundsChange(): boolean {
+        return true
+    }
+
+    /**
+     * 标记此布局需要调整节点层级
+     */
+    shouldUpdateAttributesZIndex(): boolean {
+        return true
+    }
+}
+

package/assets/lib/collectView/lib-ext/yx-card-page-layout.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "51c366be-372c-4db4-b338-ead340893f2d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/lib/collectView/lib-ext/yx-carousel-layout.ts

@@ -0,0 +1,156 @@
+import { _decorator, log, math, misc } from 'cc';
+import { YXCollectionView, YXIndexPath, YXLayout, YXLayoutAttributes } from '../lib_collect/yx-collection-view';
+
+const _vec2Out = new math.Vec2()
+
+/**
+ * 旋转木马，会加载所有节点，适合少量数据
+ * 仅支持了水平方向滚动
+ */
+export class YXCarouselLayout extends YXLayout {
+    /**
+     * 节点大小
+     */
+    itemSize: math.Size = null
+
+    /**
+     * 是否开启循环滚动
+     */
+    loop: boolean = true
+
+    /**
+     * 半径
+     */
+    radius: number = 300
+
+    /**
+     * 最远节点的缩放比例，取值范围 [ 0 ~ 1 ]
+     * 模拟近大远小的视觉效果
+     */
+    minScale: number = 0.9
+
+    /**
+     * 最远节点的透明度变化，取值范围 [ 0 ~ 1 ]
+     */
+    minAlpha: number = null
+
+    /**
+     * 整体绕 x 轴旋转角度  
+     * 备注: 只是影响节点的 y 坐标位置，并不会有 3d 旋转效果
+     */
+    angleX: number = 20
+
+    prepare(collectionView: YXCollectionView): void {
+        collectionView.scrollView.horizontal = true
+        collectionView.scrollView.vertical = false
+        let array = []
+        let contentSize = collectionView.scrollView.view.contentSize.clone()
+        let numberOfItems = collectionView.getNumberOfItems(0)
+        for (let item = 0; item < numberOfItems; item++) {
+            let indexPath = new YXIndexPath(0, item)
+            let attr = YXLayoutAttributes.layoutAttributesForCell(indexPath)
+            // 此类布局主要布局业务是在 layoutAttributesForElementsInRect ，这里只是创建出来确定一下节点大小，去 layoutAttributesForElementsInRect 里实时的调整变换效果
+            attr.frame.size = this.itemSize
+            array.push(attr)
+        }
+        this.attributes = array
+        contentSize.width = contentSize.width * numberOfItems * (this.loop ? 3 : 1)
+        this.contentSize = contentSize
+    }
+
+    layoutAttributesForElementsInRect(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
+        // 获取当前滚动视图偏移位置
+        let offset = rect.origin
+
+        // 圆点
+        let contentSize = collectionView.scrollView.view.contentSize.clone()
+        let center = new math.Vec2(contentSize.width * 0.5, contentSize.height * 0.5)
+
+        // 节点分布间隔
+        let angleIncrement = 360 / this.attributes.length
+
+        for (let index = 0; index < this.attributes.length; index++) {
+            const element = this.attributes[index];
+            // 当前节点角度
+            let itemAngle = 360 - element.indexPath.item * angleIncrement
+            // 从 90 度的位置开始排列
+            itemAngle = itemAngle + 90
+            // 根据当前滚动位置计算节点的偏移角度
+            let angleOffset = (offset.x * 1) / contentSize.width * angleIncrement
+            itemAngle = itemAngle + angleOffset
+            // 将角度转换为弧度
+            itemAngle = itemAngle % 360
+            const angle = misc.degreesToRadians(itemAngle);
+            // 计算节点变换
+            let x = center.x + this.radius * Math.cos(angle);
+            let z = 0 + this.radius * Math.sin(angle)
+            let y = center.y + z * Math.sin(misc.degreesToRadians(this.angleX))
+            _vec2Out.x = offset.x + x
+            _vec2Out.y = y
+            element.frame.center = _vec2Out
+            element.zIndex = z
+            // 通过缩放来补充近大远小的效果
+            let progress = Math.floor(Math.sin(angle) * 10000) / 10000
+            if (this.minScale) {
+                let scaleValue = this.minScale + (1 - this.minScale) * progress
+                element.scale = new math.Vec3(scaleValue, scaleValue, 1)
+            }
+            if (this.minAlpha) {
+                let opacity = this.minAlpha + (1 - this.minAlpha) * progress
+                element.opacity = opacity * 255
+            }
+        }
+
+        return this.attributes
+    }
+
+    initOffset(collectionView: YXCollectionView): void {
+        let x = (this.loop ? 1 : 0) * collectionView.scrollView.view.width * this.attributes.length
+        _vec2Out.x = x
+        _vec2Out.y = 0
+        collectionView.scrollView.scrollToOffset(_vec2Out)
+    }
+
+    shouldUpdateAttributesZIndex(): boolean {
+        return true
+    }
+
+    shouldUpdateAttributesOpacity(): boolean {
+        return true
+    }
+
+    shouldUpdateAttributesForBoundsChange(): boolean {
+        return true
+    }
+
+    scrollTo(indexPath: YXIndexPath, collectionView: YXCollectionView): math.Vec2 {
+        let leftX = (this.attributes.length * 0 + indexPath.item) * collectionView.scrollView.view.width
+        let midX = (this.attributes.length * 1 + indexPath.item) * collectionView.scrollView.view.width
+        let rightX = (this.attributes.length * 2 + indexPath.item) * collectionView.scrollView.view.width
+        let currentX = - collectionView.scrollView.getScrollOffset().x
+        // 挑出移动距离最短的一个位置
+        let array = [{ flag: 0, value: leftX }, { flag: 1, value: midX }, { flag: 2, value: rightX }]
+        let flag = array.sort((a, b) => Math.abs(currentX - a.value) - Math.abs(currentX - b.value)).shift().flag
+        do {
+            if (flag == 0) { _vec2Out.x = leftX; break }
+            if (flag == 1) { _vec2Out.x = midX; break }
+            if (flag == 2) { _vec2Out.x = rightX; break }
+        } while (false);
+        _vec2Out.y = 0
+        return _vec2Out
+    }
+
+    onScrollEnded(collectionView: YXCollectionView): void {
+        if (this.loop) {
+            let offset = collectionView.scrollView.getScrollOffset()
+            offset.x = - offset.x
+            let fullWidth = collectionView.scrollView.view.width * this.attributes.length
+            let x = offset.x % fullWidth + fullWidth
+            _vec2Out.x = x
+            _vec2Out.y = 0
+            collectionView.scrollView.scrollToOffset(_vec2Out)
+            collectionView.markForUpdateVisibleData(true)
+        }
+    }
+}
+

package/assets/lib/collectView/lib-ext/yx-carousel-layout.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "d84704bd-3a9d-44fb-b239-1c9b988b73ff",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}