Commit 64764173 authored by Chen Jiping's avatar Chen Jiping

perf:增加动画

parent d9ae9c77
......@@ -260,7 +260,7 @@ 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);
}
......@@ -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,7 +470,7 @@ cc.Class({
hideMaskLayer(cb = null) {
this.maskLayer.opacity = 255;
cc.tween(this.maskLayer)
.to(0.5, {opacity: 0}, {easing: 'sineIn'})
.to(0.5, { opacity: 0 }, { easing: 'sineIn' })
.call(() => {
this.maskLayer.active = false;
if (cb) {
......@@ -485,19 +485,34 @@ 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) => {
centerPart.picArr = [];
this._curExercise.frames.forEach((frame, i) => {
this.getSprNodeByUrl(frame.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.push(spr.node);
//默认显示第一帧动画
if (i == 0) {
spr.node.active = true;
}
else {
spr.node.active = false;
}
let picMaxW = centerPart.width;
......@@ -505,7 +520,18 @@ cc.Class({
setSprNodeMaxLen(spr.node, picMaxW, picMaxH);
centerPart.bubbleArr = centerPart.bubbleArr || [];
});
});
if (centerPart.bubbleArr) {
centerPart.bubbleArr.forEach((bubble, i) => {
bubble.removeFromParent();
});
}
centerPart.bubbleArr = [];
for (let i = 0; i < this._curExercise.hotZoneItemArr.length; ++i) {
......@@ -519,22 +545,22 @@ cc.Class({
let bubble_bg = cc.find('Canvas/stage/centerPart/bubble_bg');
bubbleSpr.node.parent =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);
if (x < bubble_bg.width / 2) {
x = - (bubble_bg.width / 2 - x);
}
else{
else {
x = x - bubble_bg.width / 2;
}
if(y < bubble_bg.height / 2){
if (y < bubble_bg.height / 2) {
y = bubble_bg.height / 2 - y;
}
else{
else {
y = - (y - bubble_bg.height / 2);
}
......@@ -552,13 +578,11 @@ cc.Class({
});
cc.tween(bubbleSpr.node)
.to(0.7, {scale: 1}, {easing: 'cubicIn'}).call(()=>{
.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