Commit 64764173 authored by Chen Jiping's avatar Chen Jiping

perf:增加动画

parent d9ae9c77
......@@ -260,12 +260,12 @@ cc.Class({
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);
}
},
initBg() {
const bgNode = cc.find('Canvas/bg');
......@@ -277,7 +277,7 @@ cc.Class({
const spr = bgNode.getComponent(cc.Sprite)
cc.find('Canvas/decorate').active = false;
this.getSpriteFrimeByUrl(this.data.bg.picUrl, (sf) => {
spr.spriteFrame = sf;
......@@ -286,7 +286,7 @@ cc.Class({
}
else {
cc.find('Canvas/decorate').active = true;
const titleBgNode = this.getSprNode('bg');
titleBgNode.parent = bgNode;
}
......@@ -460,7 +460,7 @@ cc.Class({
this.maskLayer.opacity = 0;
this.maskLayer.active = true;
cc.tween(this.maskLayer)
.to(0.5, {opacity: 255}, {easing: 'sineOut'})
.to(0.5, { opacity: 255 }, { easing: 'sineOut' })
.call(() => {
cb()
})
......@@ -470,14 +470,14 @@ cc.Class({
hideMaskLayer(cb = null) {
this.maskLayer.opacity = 255;
cc.tween(this.maskLayer)
.to(0.5, {opacity: 0}, {easing: 'sineIn'})
.call(() => {
this.maskLayer.active = false;
if (cb) {
cb()
}
})
.start()
.to(0.5, { opacity: 0 }, { easing: 'sineIn' })
.call(() => {
this.maskLayer.active = false;
if (cb) {
cb()
}
})
.start()
},
......@@ -485,80 +485,104 @@ cc.Class({
const centerPart = cc.find('Canvas/stage/centerPart');
centerPart.scale = this._mapScaleMin;
if (this._curExercise.frames && this._curExercise.frames.length > 1) {
if (this._curExercise.frames) {
if (centerPart.pic) {
centerPart.pic.removeFromParent();
if (centerPart.picArr) {
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;
spr.node.scale = 1.0;
spr.node.x = 0;
spr.node.y = 0;
centerPart.pic = spr.node;
centerPart.picArr = [];
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){
y = bubble_bg.height / 2 - y;
}
else{
y = - (y - bubble_bg.height / 2);
}
if (centerPart.bubbleArr) {
centerPart.bubbleArr.forEach((bubble, i) => {
bubble.removeFromParent();
});
}
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, () => {
});
});
centerPart.bubbleArr = [];
cc.tween(bubbleSpr.node)
.to(0.7, {scale: 1}, {easing: 'cubicIn'}).call(()=>{
for (let i = 0; i < this._curExercise.hotZoneItemArr.length; ++i) {
}).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({
this._cantouch = true;
},
_answer_node : null,
_answer_node: null,
getCircleArr(answers) {
const circleArr = [];
......@@ -772,12 +796,17 @@ cc.Class({
cc.tween(this._answer_node)
.to(0.7, {scale: 0}, {easing: 'cubicIn'})
.to(0.7, { scale: 0 }, { easing: 'cubicIn' })
.call(() => {
this._answer_node.active = false;
this._answer_node.scale = this._mapScaleMin;
this._cantouch = true;
const centerPart = cc.find('Canvas/stage/centerPart');
//播放动画
this.animation(centerPart, centerPart.picArr, 0, 80);
})
.start();
},
......@@ -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