Commit 21e8ab2e authored by 李维's avatar 李维

调整进度条显隐藏逻辑

parent 14b30b16
......@@ -55,8 +55,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
"width": 1280,
"height": 150
},
"_anchorPoint": {
"__type__": "cc.Vec2",
......@@ -135,7 +135,7 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
8,
100,
0,
0,
0,
......@@ -426,7 +426,7 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-650,
-550,
0,
0,
0,
......@@ -822,7 +822,7 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-520,
-420,
0,
0,
0,
......@@ -1005,33 +1005,76 @@
"__id__": 1
},
"_enabled": true,
"setTimeoutIDs": [],
"setIntervalIDs": [],
"_id": ""
},
{
"__type__": "cc.Widget",
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 20,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 100,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$transition": 0,
"transition": 0,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"_N$hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": null,
"_id": ""
},
{
......
......@@ -23,6 +23,9 @@ cc.Class({
playBtn: null, // 播放按钮
pauseBtn: null, // 暂停按钮
replayBtn: null, // 重播按钮
posYShow: 0,
posYHide: 0,
properties: {
setTimeoutIDs: [],
......@@ -31,6 +34,7 @@ cc.Class({
init() {
// console.log("Init video control component.")
const canvas = cc.find("Canvas");
this.bgProgress = cc.find('progress', this.node);
this.bar = cc.find('progress/bar', this.node);
this.dragBtn = cc.find('dragButton', this.node);
......@@ -45,6 +49,13 @@ cc.Class({
this.videoStatus = 0; // 0:暂停 1:播放中 2:重播
this.barBaseW = this.bgProgress.width;;
this.posYShow = -canvas.height / 2 + this.node.height / 2 + 50;
this.posYHide = -canvas.height / 2 - this.node.height / 2 - 50;
this.node.x = 0
this.node.y = this.posYShow;
this.setProgress(0);
},
......@@ -63,7 +74,7 @@ cc.Class({
userDragStart: null,
initdDrag() {
const dragStartX = -520;
const dragStartX = -420;
const maxX = this.bgProgress.width + dragStartX ;
const minX = dragStartX;
......@@ -173,50 +184,74 @@ cc.Class({
const markPointsContainer = cc.find("markNode", this.node);
for(let i=0; i<data.length; i++) {
const newPoint = cc.instantiate(markPoint);
newPoint.x = -520 + this.bgProgress.width * data[i];
newPoint.x = -420 + this.bgProgress.width * data[i];
newPoint.active = true;
markPointsContainer.addChild(newPoint);
}
})
this.node.off(cc.Node.EventType.TOUCH_START);
this.node.on(cc.Node.EventType.TOUCH_START, ()=>{
this.node.emit("on_touch_progressbar")
})
this.node.off(cc.Node.EventType.MOUSE_DOWN);
this.node.on(cc.Node.EventType.MOUSE_DOWN, ()=>{
this.node.emit("on_touch_progressbar")
})
},
tweening: null,
// 显示进度条
showBar(withAnimation) {
const widget = this.node.getComponent(cc.Widget);
if(withAnimation) {
widget.bottom = -100;
let count = 10;
let step = 200 / count;
const _intervalId = setInterval(()=>{
widget.bottom+=step;
count--;
if(count <=0) {
widget.bottom = 100;
clearInterval(_intervalId)
}
},30)
this.setIntervalIDs.push(_intervalId);
// widget.bottom = -100;
// let count = 10;
// let step = 200 / count;
// const _intervalId = setInterval(()=>{
// widget.bottom+=step;
// count--;
// if(count <=0) {
// widget.bottom = 100;
// clearInterval(_intervalId)
// }
// },30)
// this.setIntervalIDs.push(_intervalId);
this.tweening = cc.tween(this.node)
.to(0.1, { y: this.posYShow})
.call(() => {
this.tweening = null;
})
.start();
} else {
widget.bottom = 100;
this.node.y = this.posYShow;
}
},
// 隐藏进度条
hideBar(withAnimation) {
const widget = this.node.getComponent(cc.Widget);
console.log(widget)
if(withAnimation) {
widget.bottom = 100;
let count = 10;
let step = 200 / count;
const _intervalId = setInterval(()=>{
widget.bottom-=step;
count--;
if(count <=0) {
widget.bottom = -100;
clearInterval(_intervalId)
}
},30)
this.setIntervalIDs.push(_intervalId);
// widget.bottom = 100;
// let count = 10;
// let step = 300 / count;
// const _intervalId = setInterval(()=>{
// widget.bottom-=step;
// count--;
// if(count <=0) {
// widget.bottom = -100;
// clearInterval(_intervalId)
// }
// },30)
// this.setIntervalIDs.push(_intervalId);
this.tweening = cc.tween(this.node)
.to(0.1, { y: this.posYHide})
.call(() => {
this.tweening = null;
})
.start();
} else {
widget.bottom = -100;
}
......@@ -225,7 +260,7 @@ cc.Class({
setTimeoutID: null,
setProgress(progress) {
const dragStartX = -520;
const dragStartX = -420;
this.setTimeoutID = setTimeout(() => {
const w = this.barBaseW * progress;
this.bar.width = w;
......
......@@ -737,8 +737,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
"width": 1280,
"height": 150
},
"_anchorPoint": {
"__type__": "cc.Vec2",
......@@ -749,15 +749,15 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
640,
100,
-370,
0,
0,
0,
0,
1,
0.7,
0.7,
1,
1,
1
]
},
......@@ -772,7 +772,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "e5bF4KDU1F0ZXH6XOAcyPh"
"_id": "21rpQCUqBCvbe7O7Wk5wcb"
},
{
"__type__": "cc.Node",
......@@ -817,7 +817,7 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
8,
100,
0,
0,
0,
......@@ -840,7 +840,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "b8DFmtrzpILI8tvxl45iMF"
"_id": "474Uowh/xOHJd22j20YApZ"
},
{
"__type__": "cc.Node",
......@@ -904,7 +904,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "2foXUCKE5BS7DPMKtOI8r9"
"_id": "37yopM59xFlLWK/vID3Lbg"
},
{
"__type__": "cc.Sprite",
......@@ -936,7 +936,7 @@
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "7evFazcUNOu6fHqFYdjyDH"
"_id": "14JdGAam9M66cwIbuJyzZ6"
},
{
"__type__": "cc.PrefabInfo",
......@@ -979,7 +979,7 @@
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "17JjUkgOVEOqt4lOqtnX86"
"_id": "fcCbueXrNPxpwsa6Abpub5"
},
{
"__type__": "cc.PrefabInfo",
......@@ -1050,7 +1050,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "81KVs/SbZPcKwSKLz/nndo"
"_id": "9fFz0gochDlYPemMcZFuCR"
},
{
"__type__": "cc.PrefabInfo",
......@@ -1108,7 +1108,7 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-650,
-550,
0,
0,
0,
......@@ -1131,7 +1131,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "6dmH2RBYdBjZPm1Nd+E4A+"
"_id": "3bpHkpqkNCtYh/od0ep7YP"
},
{
"__type__": "cc.Node",
......@@ -1195,7 +1195,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "4dXD7kKj1CkY4MaCJg8cOw"
"_id": "9fI35lFoxD972EEJEH5oxR"
},
{
"__type__": "cc.Sprite",
......@@ -1227,7 +1227,7 @@
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "d0IayV8PRKzp8LiwXDVIrH"
"_id": "b7J4OBYa9JWJN5iikZ3V15"
},
{
"__type__": "cc.PrefabInfo",
......@@ -1302,7 +1302,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "95bI4531NJyrJSZV0fayex"
"_id": "e4NHDZuy9OT73CBimdt5FH"
},
{
"__type__": "cc.Sprite",
......@@ -1334,7 +1334,7 @@
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "adhS8IX3pBgrN8J1hWpNOl"
"_id": "79nHWiiU9HLoCyNVU2FDqj"
},
{
"__type__": "cc.PrefabInfo",
......@@ -1409,7 +1409,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "eftZh/6TZMKrRBgJqHsEpf"
"_id": "0fKG0W0mRJTLbM6Ez2ueos"
},
{
"__type__": "cc.Sprite",
......@@ -1441,7 +1441,7 @@
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "52Std+h5BI96wIxGPGfVE9"
"_id": "102miMb6NNRIBR7v06aLfX"
},
{
"__type__": "cc.PrefabInfo",
......@@ -1504,7 +1504,7 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-520,
-420,
0,
0,
0,
......@@ -1527,7 +1527,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "c2KHpc9t9NjLjaBpsfqpPy"
"_id": "35mhAF3PtDvZgnLcGZUCHq"
},
{
"__type__": "cc.Sprite",
......@@ -1559,7 +1559,7 @@
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "4ejxxGDy5PPaBb6LVFKpsc"
"_id": "50YSLLZ7BIAJVFt/WntkXW"
},
{
"__type__": "cc.PrefabInfo",
......@@ -1634,7 +1634,7 @@
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "6ad+N+W5hJPL901Y2uUpbz"
"_id": "7bvtlGqqVPBqQKzkx5Rdzh"
},
{
"__type__": "cc.Sprite",
......@@ -1666,7 +1666,7 @@
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "3crB2UVtJDL5iR88caaxi5"
"_id": "244QufgmdFw4iTGwnLQTPr"
},
{
"__type__": "cc.PrefabInfo",
......@@ -1689,34 +1689,75 @@
"_enabled": true,
"setTimeoutIDs": [],
"setIntervalIDs": [],
"_id": "42XWQfk9tE94NY0efe9K5z"
"_id": "b61/p/myFAzY+He2+Sq7Ie"
},
{
"__type__": "cc.Widget",
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 15
},
"_enabled": true,
"alignMode": 2,
"_target": null,
"_alignFlags": 20,
"_left": 0,
"_right": 0,
"_top": 100,
"_bottom": 100,
"_verticalCenter": 0,
"_horizontalCenter": 100,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "55RxCZdFRM57g/M/UMg8IZ"
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$transition": 0,
"transition": 0,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"_N$hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": null,
"_id": "c0dkbMUnVBfbdJeIxQi3k8"
},
{
"__type__": "cc.PrefabInfo",
......
......@@ -526,7 +526,7 @@ cc.Class({
this.initData();
this.initMask();
this.showProgressBar();
this.showHideProgressBar();
this.getState(() => {
this.initView();
this.initListener();
......@@ -1543,8 +1543,8 @@ cc.Class({
const touchStart = (e) => {
this.canvasTouchStart(e);
// console.log("touch start");
if(e.target.name != "dragButton") {
this.showProgressBar(true);
if(e.target.name != "VideoControlBar" && e.target.name != "dragButton") {
this.showHideProgressBar(true);
}
if (canvas.hasEventListener(cc.Node.EventType.MOUSE_DOWN)) {
......@@ -1558,8 +1558,8 @@ cc.Class({
}
this.canvasTouchStart(e);
// console.log("mouse down");
if(e.target.name != "dragButton") {
this.showProgressBar(true);
if(e.target.name != "VideoControlBar" && e.target.name != "dragButton") {
this.showHideProgressBar(true);
}
if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) {
......@@ -1626,42 +1626,47 @@ cc.Class({
canvas.on(cc.Node.EventType.TOUCH_CANCEL, touchEnd);
canvas.on(cc.Node.EventType.MOUSE_UP, mouseUp);
// 监听组件发来的拖动开始和结束消息
this.videoControlBar.on("on_drag_button", (isDragStart)=>{
if(isDragStart) {
this.hideWaitingVideo();
this.isDragProgressBar = true;
this.video.pause();
this.videoControlBar.emit("update_video_status", 0);
// 监听组件发来的拖动开始和结束消息
this.videoControlBar.on("on_drag_button", (isDragStart)=>{
if(isDragStart) {
this.hideWaitingVideo();
this.isDragProgressBar = true;
this.video.pause();
this.videoControlBar.emit("update_video_status", 0);
this.cleanProgressBarTimer();
} else {
this.restQuesData(this.video.currentTime);
this.isDragProgressBar = false;
this.video.play();
this.videoControlBar.emit("update_video_status", 1);
this.setProgressBarTimer();
}
})
// 监听组件发来的拖动百分比
this.videoControlBar.on("on_drag_percent", (percent)=>{
this.video.currentTime = percent * this.videoDuration;
})
// 监听组件发来视频播放、暂停事件
this.videoControlBar.on("video_btn_click", (isPlay)=>{
this.cleanProgressBarTimer();
} else {
this.restQuesData(this.video.currentTime);
this.isDragProgressBar = false;
this.video.play();
this.videoControlBar.emit("update_video_status", 1);
this.setProgressBarTimer();
}
})
// 监听组件发来的拖动百分比
this.videoControlBar.on("on_drag_percent", (percent)=>{
this.video.currentTime = percent * this.videoDuration;
})
if(isPlay) {
if(this.isWaitingUserAction) {
this.hideWaitingVideo();
this.restQuesData(this.video.currentTime);
}
this.video.play();
} else {
this.video.pause();
}
})
// 监听组件发来视频播放、暂停事件
this.videoControlBar.on("video_btn_click", (isPlay)=>{
this.cleanProgressBarTimer();
this.setProgressBarTimer();
if(isPlay) {
if(this.isWaitingUserAction) {
this.hideWaitingVideo();
this.restQuesData(this.video.currentTime);
}
this.video.play();
} else {
this.video.pause();
}
})
this.videoControlBar.on("on_touch_progressbar", (e)=>{
console.log("Click bar")
this.showProgressBar();
})
},
// 显示进度条 2秒没有操作后消失
......@@ -1669,7 +1674,7 @@ cc.Class({
isShowProgressBar: null,
// 隐藏进度条定时器
timeoutHideBarId : null,
showProgressBar(withAnimation = false) {
showHideProgressBar(withAnimation = false) {
this.cleanProgressBarTimer()
if(this.isShowProgressBar) {
......@@ -1684,6 +1689,15 @@ cc.Class({
}
},
// 显示进度条 重置计时器
showProgressBar() {
cc.log("显示进度条")
this.cleanProgressBarTimer();
this.videoControlBar.emit("show_bar", false);
this.isShowProgressBar = true;
this.setProgressBarTimer();
},
cleanProgressBarTimer() {
if(this.timeoutHideBarId) {
clearTimeout(this.timeoutHideBarId);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment