Commit 64764173 authored by Chen Jiping's avatar Chen Jiping

perf:增加动画

parent d9ae9c77
...@@ -260,12 +260,12 @@ cc.Class({ ...@@ -260,12 +260,12 @@ cc.Class({
showQuestionAudio() { showQuestionAudio() {
if(this._curExercise.hotZoneItemArr && this._curExercise.hotZoneItemArr.length > 0){ if (this._curExercise.hotZoneItemArr && this._curExercise.hotZoneItemArr.length > 0) {
playAudioByUrl(this._curExercise.hotZoneItemArr[0].audio_url); playAudioByUrl(this._curExercise.hotZoneItemArr[0].audio_url);
} }
}, },
initBg() { initBg() {
const bgNode = cc.find('Canvas/bg'); const bgNode = cc.find('Canvas/bg');
...@@ -277,7 +277,7 @@ cc.Class({ ...@@ -277,7 +277,7 @@ cc.Class({
const spr = bgNode.getComponent(cc.Sprite) const spr = bgNode.getComponent(cc.Sprite)
cc.find('Canvas/decorate').active = false; cc.find('Canvas/decorate').active = false;
this.getSpriteFrimeByUrl(this.data.bg.picUrl, (sf) => { this.getSpriteFrimeByUrl(this.data.bg.picUrl, (sf) => {
spr.spriteFrame = sf; spr.spriteFrame = sf;
...@@ -286,7 +286,7 @@ cc.Class({ ...@@ -286,7 +286,7 @@ cc.Class({
} }
else { else {
cc.find('Canvas/decorate').active = true; cc.find('Canvas/decorate').active = true;
const titleBgNode = this.getSprNode('bg'); const titleBgNode = this.getSprNode('bg');
titleBgNode.parent = bgNode; titleBgNode.parent = bgNode;
} }
...@@ -460,7 +460,7 @@ cc.Class({ ...@@ -460,7 +460,7 @@ cc.Class({
this.maskLayer.opacity = 0; this.maskLayer.opacity = 0;
this.maskLayer.active = true; this.maskLayer.active = true;
cc.tween(this.maskLayer) cc.tween(this.maskLayer)
.to(0.5, {opacity: 255}, {easing: 'sineOut'}) .to(0.5, { opacity: 255 }, { easing: 'sineOut' })
.call(() => { .call(() => {
cb() cb()
}) })
...@@ -470,14 +470,14 @@ cc.Class({ ...@@ -470,14 +470,14 @@ cc.Class({
hideMaskLayer(cb = null) { hideMaskLayer(cb = null) {
this.maskLayer.opacity = 255; this.maskLayer.opacity = 255;
cc.tween(this.maskLayer) cc.tween(this.maskLayer)
.to(0.5, {opacity: 0}, {easing: 'sineIn'}) .to(0.5, { opacity: 0 }, { easing: 'sineIn' })
.call(() => { .call(() => {
this.maskLayer.active = false; this.maskLayer.active = false;
if (cb) { if (cb) {
cb() cb()
} }
}) })
.start() .start()
}, },
...@@ -485,80 +485,104 @@ cc.Class({ ...@@ -485,80 +485,104 @@ cc.Class({
const centerPart = cc.find('Canvas/stage/centerPart'); const centerPart = cc.find('Canvas/stage/centerPart');
centerPart.scale = this._mapScaleMin; centerPart.scale = this._mapScaleMin;
if (this._curExercise.frames && this._curExercise.frames.length > 1) { if (this._curExercise.frames) {
if (centerPart.pic) { if (centerPart.picArr) {
centerPart.pic.removeFromParent();
for (let i = 0; i < centerPart.picArr.length; ++i) {
centerPart.picArr[i].removeFromParent();
}
} }
console.log(this._curExercise.frames[0].picUrl);
this.getSprNodeByUrl(this._curExercise.frames[0].picUrl, (spr) => {
spr.node.parent = centerPart; centerPart.picArr = [];
spr.node.scale = 1.0;
spr.node.x = 0;
spr.node.y = 0;
centerPart.pic = spr.node;
let picMaxW = centerPart.width; this._curExercise.frames.forEach((frame, i) => {
let picMaxH = centerPart.height; this.getSprNodeByUrl(frame.picUrl, (spr) => {
setSprNodeMaxLen(spr.node, picMaxW, picMaxH); spr.node.parent = centerPart;
spr.node.scale = 1.0;
spr.node.x = 0;
spr.node.y = 0;
centerPart.picArr.push(spr.node);
centerPart.bubbleArr = centerPart.bubbleArr || []; //默认显示第一帧动画
if (i == 0) {
spr.node.active = true;
}
else {
spr.node.active = false;
}
for (let i = 0; i < this._curExercise.hotZoneItemArr.length; ++i) { let picMaxW = centerPart.width;
let hotZoneItem = this._curExercise.hotZoneItemArr[i]; let picMaxH = centerPart.height;
this.getSprNodeByUrl(hotZoneItem.pic_url, (bubbleSpr) => { setSprNodeMaxLen(spr.node, picMaxW, picMaxH);
if (centerPart.bubbleArr[i]) {
centerPart.bubbleArr[i].removeFromParent();
}
let bubble_bg = cc.find('Canvas/stage/centerPart/bubble_bg');
bubbleSpr.node.parent =bubble_bg;
console.log(hotZoneItem.rect.x, hotZoneItem.rect.y);
let x = hotZoneItem.rect.x / hotZoneItem.mapScale; });
let y = hotZoneItem.rect.y / hotZoneItem.mapScale; });
if( x < bubble_bg.width / 2){
x = - ( bubble_bg.width / 2 - x);
}
else{
x = x - bubble_bg.width / 2;
}
if(y < bubble_bg.height / 2){ if (centerPart.bubbleArr) {
y = bubble_bg.height / 2 - y; centerPart.bubbleArr.forEach((bubble, i) => {
} bubble.removeFromParent();
else{ });
y = - (y - bubble_bg.height / 2); }
}
bubbleSpr.node.x = x; centerPart.bubbleArr = [];
bubbleSpr.node.y = y;
bubbleSpr.node.scale = 0;
centerPart.bubbleArr[i] = bubbleSpr.node;
bubbleSpr.node.addComponent(cc.Button)
bubbleSpr.node.on('click', () => {
playAudioByUrl(hotZoneItem.audio_url, () => {
});
});
cc.tween(bubbleSpr.node) for (let i = 0; i < this._curExercise.hotZoneItemArr.length; ++i) {
.to(0.7, {scale: 1}, {easing: 'cubicIn'}).call(()=>{
}).start(); let hotZoneItem = this._curExercise.hotZoneItemArr[i];
this.getSprNodeByUrl(hotZoneItem.pic_url, (bubbleSpr) => {
if (centerPart.bubbleArr[i]) {
centerPart.bubbleArr[i].removeFromParent();
}
let bubble_bg = cc.find('Canvas/stage/centerPart/bubble_bg');
bubbleSpr.node.parent = bubble_bg;
console.log(hotZoneItem.rect.x, hotZoneItem.rect.y);
let x = hotZoneItem.rect.x / hotZoneItem.mapScale;
let y = hotZoneItem.rect.y / hotZoneItem.mapScale;
if (x < bubble_bg.width / 2) {
x = - (bubble_bg.width / 2 - x);
}
else {
x = x - bubble_bg.width / 2;
}
if (y < bubble_bg.height / 2) {
y = bubble_bg.height / 2 - y;
}
else {
y = - (y - bubble_bg.height / 2);
}
bubbleSpr.node.x = x;
bubbleSpr.node.y = y;
bubbleSpr.node.scale = 0;
centerPart.bubbleArr[i] = bubbleSpr.node;
bubbleSpr.node.addComponent(cc.Button)
bubbleSpr.node.on('click', () => {
playAudioByUrl(hotZoneItem.audio_url, () => {
});
}); });
}
}); cc.tween(bubbleSpr.node)
.to(0.7, { scale: 1 }, { easing: 'cubicIn' }).call(() => {
}).start();
});
}
} }
}, },
...@@ -652,7 +676,7 @@ cc.Class({ ...@@ -652,7 +676,7 @@ cc.Class({
this._cantouch = true; this._cantouch = true;
}, },
_answer_node : null, _answer_node: null,
getCircleArr(answers) { getCircleArr(answers) {
const circleArr = []; const circleArr = [];
...@@ -772,12 +796,17 @@ cc.Class({ ...@@ -772,12 +796,17 @@ cc.Class({
cc.tween(this._answer_node) cc.tween(this._answer_node)
.to(0.7, {scale: 0}, {easing: 'cubicIn'}) .to(0.7, { scale: 0 }, { easing: 'cubicIn' })
.call(() => { .call(() => {
this._answer_node.active = false; this._answer_node.active = false;
this._answer_node.scale = this._mapScaleMin; this._answer_node.scale = this._mapScaleMin;
this._cantouch = true; this._cantouch = true;
const centerPart = cc.find('Canvas/stage/centerPart');
//播放动画
this.animation(centerPart, centerPart.picArr, 0, 80);
}) })
.start(); .start();
}, },
...@@ -813,7 +842,61 @@ cc.Class({ ...@@ -813,7 +842,61 @@ cc.Class({
/**
* 播放序列针动画
* @param parItem
* @param arr 图片数组
* @param nextIndex 下一图片顺序
* @param intervalTime 间隔时间
*/
animation(parItem, arr, nextIndex , intervalTime ){
if(!parItem){
return;
}
if(!arr || arr.length == 0){
return;
}
let tNextIndex = nextIndex;
//如果相等,则表示一轮播放结束,将播放顺序重置为0
if(nextIndex == arr.length){
tNextIndex = 0;
}
//暂停动画
if(parItem.animationStop){
//隐藏上一张图
if(nextIndex > 0){
arr[nextIndex - 1].active = false;
}
else if(nextIndex == 0){
arr[nextIndex].active = false;
}
return;
}
//console.log('nextIndex', tNextIndex);
//隐藏上一张图
if(nextIndex > 0){
arr[nextIndex - 1].active = false;
}
arr[tNextIndex].active = true;
setTimeout(() => {
let nextIndex = tNextIndex + 1;
this.animation(parItem, arr, nextIndex, intervalTime);
}, intervalTime);
},
......
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