Test_Project_Cocos/mk_bezier_animation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
muzzik 2022-07-16 01:54:43 +08:00
parent 5e515568cd
commit 2ceb878bd1
4 changed files with 679 additions and 1043 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/BezierCurveAnimation.ts
View File

@ -1,7 +1,7 @@
import { _decorator, Component } from 'cc';
import * as cc from 'cc';
import BezierCurve from './BezierCurve';
const { ccclass, property } = _decorator;
const { ccclass, property, help } = _decorator;
/** 缓动枚举 */
let easingEnum = {};
@ -51,6 +51,7 @@ class BezierCurveAnimationTweenUnit {
/** 贝塞尔曲线通用动画组件 */
@ccclass('BezierCurveAnimation')
@help('https://www.desmos.com/calculator/cahqdxeshd?lang=zh-CN')
export class BezierCurveAnimation extends Component {
/* --------------- 属性 --------------- */
/** 缓动单元 */

367
assets/RollingLottery.ts
View File

@ -33,8 +33,6 @@ export class RollingLottery2 extends Component {
@property({ displayName: '滚动结束事件', type: cc.EventHandler })
scrollEndEvent = new cc.EventHandler();
/* --------------- private --------------- */
/** transform 组件 */
private _uiTransform: cc.UITransform;
/** 周长 */
private _perimeterV3 = cc.v3();
/** 总距离 */
@ -45,7 +43,7 @@ export class RollingLottery2 extends Component {
private _ItemSize: cc.Size;
/** 滚动状态 */
private _scrollB = false;
/** 循环状态 */
/** 循环滚动状态 */
private _loopScrollB = false;
/** 循环缓动 */
private _loopTween: cc.Tween<any>;
@ -53,19 +51,33 @@ export class RollingLottery2 extends Component {
private _selfRect = cc.rect();
/** 上次曲线 Y */
private _lastCurveYN = 0;
/** 当前目标 */
private _currTargetN: number;
/** 当前缓动下标 */
private _currTweenN = 0;
private _currTweenIndexN = 0;
/** 当前滚动配置 */
private _scrollConfig: RollingLottery2ScrollConfig;
/** 父节点中心点矩形 */
private _parentCenterRect: cc.Rect;
/** 跳过状态 */
private _jumpB = false;
/** uiTransform 表 */
private _uiTransformTab: { [k: string]: cc.UITransform };
/* --------------- 临时变量 --------------- */
private _tempM4 = cc.mat4();
private _temp2M4 = cc.mat4();
/** 滚动子节点临时变量 */
private _temp = new (class {
/** 当前节点矩形 */
currNodeRect = cc.rect();
/** 更新节点坐标 */
updatePosB: boolean;
/** 当前节点 UITransform */
currTransform: cc.UITransform;
/** 当前下标 */
currIndexN: number;
/** 超出周长倍数 */
outOfRangeMultipleN: number;
})();
private _temp3Rect = cc.rect();
/* --------------- public --------------- */
/** 曲线组件 */
curveComp: BezierCurveAnimation;
@ -94,17 +106,148 @@ export class RollingLottery2 extends Component {
}
/* ------------------------------- 功能 ------------------------------- */
/** 获取在世界坐标系下的节点包围盒(不包含自身激活的子节点范围) */
private _getBoundingBoxToWorld(node_: cc.Node): cc.Rect {
let uiTransform = node_.getComponent(cc.UITransform);
private _getBoundingBoxToWorld(node_: cc.Node, outRect_ = cc.rect()): cc.Rect {
let uiTransform = this._uiTransformTab[node_.uuid];
cc.Mat4.fromRTS(this._tempM4, node_.getRotation(), node_.getPosition(), node_.getScale());
const width = uiTransform.contentSize.width;
const height = uiTransform.contentSize.height;
const rect = cc.rect(-uiTransform.anchorPoint.x * width, -uiTransform.anchorPoint.y * height, width, height);
outRect_.set(-uiTransform.anchorPoint.x * width, -uiTransform.anchorPoint.y * height, width, height);
node_.parent.getWorldMatrix(this._temp2M4);
cc.Mat4.multiply(this._temp2M4, this._temp2M4, this._tempM4);
rect.transformMat4(this._temp2M4);
return rect;
outRect_.transformMat4(this._temp2M4);
return outRect_;
}
/** 更新节点下标 */
private _updateNodeIndex(node_: cc.Node, indexN_: number): void {
node_.name = String(indexN_);
this.itemUpdateEvent.emit([node_, indexN_]);
}
/** 上到下移动子节点 */
private _moveNodeTopToBottom(distN_: number): void {
this.node.children.forEach((v, kN) => {
this._temp.currTransform = this._uiTransformTab[v.uuid];
this._temp.updatePosB = false;
this._getBoundingBoxToWorld(v, this._temp.currNodeRect);
// 移动坐标
this._temp.currNodeRect.y += distN_;
// 相交则更新节点坐标
if (this._temp.currNodeRect.intersects(this._selfRect)) {
this._temp.updatePosB = true;
}
// 若不相交则超出范围
else {
// 若节点在上方则跳过更新
if (this._temp.currNodeRect.yMin > this._selfRect.yMax) {
this._temp.updatePosB = true;
} else {
// (超出范围 / 周长) + 超出视图区域的 1
this._temp.outOfRangeMultipleN =
Math.floor((this._selfRect.yMin - this._temp.currNodeRect.yMax) / this._perimeterV3.y) + 1;
// 更新坐标
this._temp.currNodeRect.y += this._temp.outOfRangeMultipleN * this._perimeterV3.y;
v.worldPosition = cc.v3(
v.worldPosition.x,
this._temp.currNodeRect.y + this._ItemSize.height * this._temp.currTransform.anchorY
);
// 更新 item 下标
this._updateNodeIndex(
v,
Number(v.name) - this._temp.outOfRangeMultipleN * this.node.children.length
);
}
}
// 更新节点坐标
if (this._temp.updatePosB) {
v.worldPosition = cc.v3(
v.worldPosition.x,
this._temp.currNodeRect.y + this._temp.currNodeRect.height * this._temp.currTransform.anchorY
);
}
// 更新当前下标
this._temp.currIndexN = Number(v.name);
if (
this._temp.currIndexN < this._currIndexN &&
cc.Rect.intersection(this._temp3Rect, this._temp.currNodeRect, this._parentCenterRect).height >=
this._parentCenterRect.height * 0.5
) {
if (this._temp.currIndexN === -51) {
debugger;
}
this.currIndexN = this._temp.currIndexN;
}
});
}
/** 下到上移动子节点 */
private _moveNodeBottomToTop(distN_: number): void {
this.node.children.forEach((v, kN) => {
this._temp.currTransform = this._uiTransformTab[v.uuid];
this._temp.updatePosB = false;
this._getBoundingBoxToWorld(v, this._temp.currNodeRect);
// 移动坐标
this._temp.currNodeRect.y += distN_;
// 相交则更新节点坐标
if (this._temp.currNodeRect.intersects(this._selfRect)) {
this._temp.updatePosB = true;
}
// 若不相交则超出范围
else {
// 若节点在下方则跳过更新
if (this._selfRect.yMin > this._temp.currNodeRect.yMax) {
this._temp.updatePosB = true;
} else {
// (超出范围 / 周长) + 超出视图区域的 1
this._temp.outOfRangeMultipleN =
Math.floor((this._temp.currNodeRect.yMin - this._selfRect.yMax) / this._perimeterV3.y) + 1;
// 更新坐标
this._temp.currNodeRect.y -= this._temp.outOfRangeMultipleN * this._perimeterV3.y;
v.worldPosition = cc.v3(
v.worldPosition.x,
this._temp.currNodeRect.y + this._ItemSize.height * this._temp.currTransform.anchorY
);
// 更新 item 下标
this._updateNodeIndex(
v,
Number(v.name) + this._temp.outOfRangeMultipleN * this.node.children.length
);
}
}
// 更新节点坐标
if (this._temp.updatePosB) {
v.worldPosition = cc.v3(
v.worldPosition.x,
this._temp.currNodeRect.y + this._temp.currNodeRect.height * this._temp.currTransform.anchorY
);
}
// 更新当前下标
this._temp.currIndexN = Number(v.name);
if (
this._temp.currIndexN > this._currIndexN &&
cc.Rect.intersection(this._temp3Rect, this._temp.currNodeRect, this._parentCenterRect).height >=
this._parentCenterRect.height * 0.5
) {
if (this._temp.currIndexN === -51) {
debugger;
}
this.currIndexN = this._temp.currIndexN;
}
});
}
/**
@ -112,23 +255,6 @@ export class RollingLottery2 extends Component {
* @param distV3_ 距离
*/
private _scrollChild(distV3_: cc.Vec3): void {
/** 当前节点矩形 */
let currNodeRect: cc.Rect;
/** 更新节点坐标 */
let updatePosB = false;
/** 当前节点 UITransform */
let currTransform: cc.UITransform;
/** 头节点 */
// let headNode = this.node.children[0];
// /** 尾节点 */
// let tailNode = this.node.children[this.node.children.length - 1];
// /** 头节点矩形 */
// let headNodeRect: cc.Rect;
// /** 尾节点矩形 */
// let tailNodeRect: cc.Rect;
/** 当前下标 */
let currIndexN: number;
// 左右滚动
if (this.dire === RollingLottery2Direction.HORIZONTAL) {
cc.error('未实现');
@ -138,148 +264,11 @@ export class RollingLottery2 extends Component {
else {
// 从上往下滚动
if (distV3_.y < 0) {
this.node.children.forEach((v, kN) => {
currTransform = v.getComponent(cc.UITransform);
updatePosB = false;
currNodeRect = this._getBoundingBoxToWorld(v);
// 移动坐标
currNodeRect.y += distV3_.y;
// 相交则更新节点坐标
if (currNodeRect.intersects(this._selfRect)) {
updatePosB = true;
}
// 若不相交则超出范围
else {
// 若节点在上方则跳过更新
if (currNodeRect.yMin > this._selfRect.yMax) {
updatePosB = true;
} else {
// // setTimeout 防止获取节点坐标错误、防止 setSiblingIndex 后遍历错误
// setTimeout(() => {
// // 切换位置到头节点上方
// headNodeRect = this._getBoundingBoxToWorld(headNode);
// v.worldPosition = cc.v3(
// v.worldPosition.x,
// headNodeRect.yMax + currNodeRect.height * currTransform.anchorY
// );
// // 更新 item
// let indexN = Number(headNode.name) - 1;
// v.name = String(indexN);
// this.itemUpdateEvent.emit([v, indexN]);
// // 更新 item 下标
// headNode = v;
// v.setSiblingIndex(0);
// }, 0);
/** 展示周长 */
let tempN = this._selfRect.height + this._ItemSize.height;
// 超出圈数
let beyondTurnsN = Math.floor((this._selfRect.yMin - currNodeRect.yMax) / tempN);
// 超出距离
let beyondDistN = (this._selfRect.yMin - currNodeRect.yMax) % tempN;
cc.log(beyondDistN);
currNodeRect.y = this._selfRect.yMax + currNodeRect.height - beyondDistN;
v.worldPosition = cc.v3(
v.worldPosition.x,
currNodeRect.y - currNodeRect.height * (1 - currTransform.anchorY)
);
// // 更新 item
// let indexN = Number(v.name) - beyondTurnsN;
// v.name = String(indexN);
// this.itemUpdateEvent.emit([v, indexN]);
}
}
// 更新节点坐标
if (updatePosB) {
v.worldPosition = cc.v3(
v.worldPosition.x,
currNodeRect.y + currNodeRect.height * currTransform.anchorY
);
}
// 更新当前下标
currIndexN = Number(v.name);
if (currIndexN < this._currIndexN && currNodeRect.intersects(this._parentCenterRect)) {
this.currIndexN = currIndexN;
}
});
this._moveNodeTopToBottom(distV3_.y);
}
// 从下往上滚动
else if (distV3_.y > 0) {
this.node.children.forEach((v, kN) => {
currTransform = v.getComponent(cc.UITransform);
updatePosB = false;
currNodeRect = this._getBoundingBoxToWorld(v);
// 移动坐标
currNodeRect.y += distV3_.y;
// 相交则更新节点坐标
if (currNodeRect.intersects(this._selfRect)) {
updatePosB = true;
}
// 若不相交则超出范围
else {
// 若节点在下方则跳过更新
if (this._selfRect.yMin > currNodeRect.yMax) {
updatePosB = true;
} else {
// // setTimeout 防止获取节点坐标错误、防止 setSiblingIndex 后遍历错误
// setTimeout(() => {
// // 切换位置到尾节点下方
// tailNodeRect = this._getBoundingBoxToWorld(tailNode);
// v.worldPosition = cc.v3(
// v.worldPosition.x,
// tailNodeRect.yMin - currNodeRect.height * (1 - currTransform.anchorY)
// );
// // 更新 item
// let indexN = Number(tailNode.name) + 1;
// v.name = String(indexN);
// this.itemUpdateEvent.emit([v, indexN]);
// // 更新 item 下标
// tailNode = v;
// v.setSiblingIndex(this.node.children.length - 1);
// }, 0);
// 超出圈数
let beyondTurnsN = Math.floor(
(this._selfRect.yMin - currNodeRect.yMax) / this._selfRect.height
);
// 超出距离
let beyondDistN = (currNodeRect.yMin - this._selfRect.yMax) % this._selfRect.height;
v.worldPosition = cc.v3(
v.worldPosition.x,
this._selfRect.yMin + beyondDistN + currNodeRect.height * currTransform.anchorY
);
// 更新 item
let indexN = Number(v.name) + beyondTurnsN;
v.name = String(indexN);
this.itemUpdateEvent.emit([v, indexN]);
}
}
// 更新节点坐标
if (updatePosB) {
v.worldPosition = cc.v3(
v.worldPosition.x,
currNodeRect.y + currNodeRect.height * currTransform.anchorY
);
}
// 更新当前下标
currIndexN = Number(v.name);
if (currIndexN > this._currIndexN && currNodeRect.intersects(this._parentCenterRect)) {
this.currIndexN = currIndexN;
}
});
this._moveNodeBottomToTop(distV3_.y);
}
}
}
@ -299,17 +288,12 @@ export class RollingLottery2 extends Component {
this._totalDistV3 = cc.v3(intervalN * boxDistN + offsetDistV3.x);
} else {
this._totalDistV3 = cc.v3(0, intervalN * boxDistN + offsetDistV3.y);
cc.log('目标距离', this._currIndexN, offsetDistV3.y, this._totalDistV3.y);
}
// // eslint-disable-next-line autofix/no-debugger
// debugger;
this._currDistV3 = cc.v3();
}
/** 初始化数据 */
private _initData(): void {
this.curveComp = this.node.getComponent(BezierCurveAnimation);
this._uiTransform = this.node.getComponent(cc.UITransform);
// 设置更新事件
let updateEvent = new cc.EventHandler();
@ -340,15 +324,18 @@ export class RollingLottery2 extends Component {
this._ItemSize.height
);
// 自己矩形
// 重置数据
this._uiTransformTab = Object.create(null);
this._uiTransformTab[this.node.uuid] = this.node.getComponent(cc.UITransform);
this._selfRect = this._getBoundingBoxToWorld(this.node);
// 单圈长度
this._perimeterV3.set(cc.Vec3.ZERO);
let size: cc.Size;
// 更新 _uiTransformTab, _perimeterV3
let itemSize: cc.Size;
this.node.children.forEach((v1) => {
size = v1.getComponent(cc.UITransform).contentSize;
this._perimeterV3.add3f(size.x, size.y, 0);
this._uiTransformTab[v1.uuid] = v1.getComponent(cc.UITransform);
itemSize = this._uiTransformTab[v1.uuid].contentSize;
this._perimeterV3.add3f(itemSize.x, itemSize.y, 0);
});
}
@ -431,9 +418,6 @@ export class RollingLottery2 extends Component {
if (this._scrollB && !this._loopScrollB) {
return;
}
if (this.currIndexN === indexN_) {
return;
}
this._scrollB = true;
this._jumpB = true;
@ -449,6 +433,9 @@ export class RollingLottery2 extends Component {
// 开始滚动
this._scrollChild(this._totalDistV3);
// 更新状态
if (indexN_ === -51) {
debugger;
}
this.currIndexN = indexN_;
this._scrollB = false;
this._jumpB = false;
@ -459,10 +446,6 @@ export class RollingLottery2 extends Component {
if (this._scrollB && !this._loopScrollB) {
return;
}
if (this.currIndexN === indexN_) {
return;
}
cc.log('目标', indexN_);
this._scrollB = true;
this._scrollConfig = new RollingLottery2ScrollConfig(scrollConfig_);
@ -473,22 +456,19 @@ export class RollingLottery2 extends Component {
this._loopScrollB = false;
}
this._currTargetN = indexN_;
this._lastCurveYN = 0;
// 更新移动距离
this._updateMoveDist(indexN_);
// 开始滚动
this._currTweenN = this._scrollConfig.tweenIndexN;
this.curveComp.startTween(this._currTweenN);
this._currTweenIndexN = this._scrollConfig.tweenIndexN;
this.curveComp.startTween(this._currTweenIndexN);
}
private _currDistV3: cc.Vec3;
/* ------------------------------- 自定义事件 ------------------------------- */
private _eventUpdate(yN_: number, indexN_: number, y2N_: number): void {
if (this.dire === RollingLottery2Direction.HORIZONTAL) {
cc.error('未实现');
// ...
} else {
this._currDistV3.add(cc.v3(0, (yN_ - this._lastCurveYN) * this._totalDistV3.y));
this._scrollChild(cc.v3(0, (yN_ - this._lastCurveYN) * this._totalDistV3.y));
}
this._lastCurveYN = yN_;
@ -497,13 +477,10 @@ export class RollingLottery2 extends Component {
private _eventEnd(): void {
this._scrollB = false;
this.currIndexN = this._currTargetN;
cc.log('滚动结束', this._currDistV3.y, this._totalDistV3.y);
// 继续缓动
if (this._scrollConfig.nextPlayB && ++this._currTweenN < this.curveComp.tweenUnitAS.length) {
this.curveComp.startTween(this._currTweenN);
if (this._scrollConfig.nextPlayB && ++this._currTweenIndexN < this.curveComp.tweenUnitAS.length) {
this.curveComp.startTween(this._currTweenIndexN);
} else {
this.scrollEndEvent.emit([]);
this._scrollConfig.endCBF?.();

1329
assets/main.scene
View File

File diff suppressed because it is too large Load Diff

23
assets/main.ts
View File

@ -8,10 +8,31 @@ export class main extends Component {
/* ------------------------------- segmentation ------------------------------- */
start() {
let comp = this.node.getComponentInChildren(RollingLottery2);
comp.jump(-180);
// let indexN = 0;
// this.node.on(
// cc.Node.EventType.TOUCH_END,
// () => {
// comp['_scrollChild'](cc.v3(0, -50));
// },
// this
// );
// comp.loop(10000);
comp.scroll(50, {
tweenIndexN: 0,
nextPlayB: true
});
}
/* ------------------------------- segmentation ------------------------------- */
eventItemUpdate(node_: cc.Node, indexN_: number): void {
node_.getComponentInChildren(cc.Label).string = indexN_ + '';
}
centerNodeEvent(indexN_: number): void {
cc.log('当前下标', indexN_);
}
scrollEndEvent(): void {
cc.log('滚动结束');
}
}