Commit ba8c6d0e authored by Chen Jiping's avatar Chen Jiping

feat:动画逻辑调整

parent b561951b
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
<tr> <tr>
<th>序号</th> <th>序号</th>
<th>字母</th> <th>字母</th>
<th>音频</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
...@@ -72,6 +73,11 @@ ...@@ -72,6 +73,11 @@
<tr *ngFor="let row of wordTable.data;let j = index"> <tr *ngFor="let row of wordTable.data;let j = index">
<td>{{ j+1 }}</td> <td>{{ j+1 }}</td>
<td><input type="text" nz-input [(ngModel)]="row.val" (blur)="save()" maxlength="1"></td> <td><input type="text" nz-input [(ngModel)]="row.val" (blur)="save()" maxlength="1"></td>
<td>
<app-audio-recorder [audioUrl]="row.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, row, 'audioUrl')">
</app-audio-recorder>
</td>
<td> <td>
<button nz-button nzType="dashed" id="del-btn" (click)="delWord(item.exercises, j)"> <button nz-button nzType="dashed" id="del-btn" (click)="delWord(item.exercises, j)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除 <i nz-icon nzType="delete" nzTheme="outline"></i>删除
...@@ -82,9 +88,6 @@ ...@@ -82,9 +88,6 @@
</nz-table> </nz-table>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-divider nzText="音频编辑" nzOrientation="left"></nz-divider>
<app-lrc-editor [LRCData]="item.exercises.lrcData" (editFinished)="getLRC($event, item.exercises)">
</app-lrc-editor>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -109,11 +109,16 @@ cc.Class({ ...@@ -109,11 +109,16 @@ cc.Class({
this._audioResList.push({ url: this.data.exercises.audioUrl }); this._audioResList.push({ url: this.data.exercises.audioUrl });
} }
if(this.data){ let wordArr = this.data.exercises.wordArr;
this._audioResList.push({ url: this.data.guideAudioUrl1 });
this._audioResList.push({ url: this.data.guideAudioUrl2 }); for (let i = 0; i < wordArr.length; ++i) {
this._audioResList.push({ url: this.data.guideAudioUrl3 });
if (wordArr[i].audioUrl) {
this._audioResList.push({ url: wordArr[i].audioUrl });
}
} }
}, },
addPreloadAnima() { addPreloadAnima() {
...@@ -206,13 +211,13 @@ cc.Class({ ...@@ -206,13 +211,13 @@ cc.Class({
} }
//如果有引导音频,则播放完引导音频再开始 //如果有引导音频,则播放完引导音频再开始
if(this.data.guideAudioUrl1){ if (this.data.guideAudioUrl1) {
//播放引导音频1 //播放引导音频1
this.playAudioByUrl(this.data.guideAudioUrl1, () => { this.playAudioByUrl(this.data.guideAudioUrl1, () => {
begin(); begin();
}); });
} }
else{ else {
begin(); begin();
} }
...@@ -230,7 +235,7 @@ cc.Class({ ...@@ -230,7 +235,7 @@ cc.Class({
maskNode.anchorY = 0.5; maskNode.anchorY = 0.5;
const mask = maskNode.addComponent(cc.Graphics); const mask = maskNode.addComponent(cc.Graphics);
mask.fillColor = cc.Color.BLACK.setA(100); mask.fillColor = cc.Color.BLACK.setA(100);
mask.fillRect(-this.canvas.width/2, -this.canvas.height/2, this.canvas.width, this.canvas.height); mask.fillRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);
this.canvas.addChild(maskNode, 9); this.canvas.addChild(maskNode, 9);
maskNode.addComponent(cc.BlockInputEvents); maskNode.addComponent(cc.BlockInputEvents);
...@@ -284,13 +289,13 @@ cc.Class({ ...@@ -284,13 +289,13 @@ cc.Class({
//首字母 //首字母
let initial = wordArr[i].val.substr(0, 1); let initial = wordArr[i].val.substr(0, 1);
let label = this.getWord(initial, 700, true); let label = this.getWord(wordArr[i], initial, 700, true);
label.isInitial = true; label.isInitial = true;
wordNodeArr.push(label); wordNodeArr.push(label);
//其余字母 //其余字母
let last = wordArr[i].val.substr(1); let last = wordArr[i].val.substr(1);
let lastLabel = this.getWord(last, 700, false); let lastLabel = this.getWord(wordArr[i], last, 700, false);
wordNodeArr.push(lastLabel); wordNodeArr.push(lastLabel);
} }
...@@ -309,7 +314,7 @@ cc.Class({ ...@@ -309,7 +314,7 @@ cc.Class({
}, },
getWord(wordVal, size, isInitial) { getWord(word, wordVal, size, isInitial) {
size /= 2; size /= 2;
let color = new cc.color(); let color = new cc.color();
...@@ -343,7 +348,7 @@ cc.Class({ ...@@ -343,7 +348,7 @@ cc.Class({
//如果是首字母,则添加点击事件 //如果是首字母,则添加点击事件
if (isInitial) { if (isInitial) {
this.playTextAutio(() =>{ this.playTextAutio(labelNode, word.audioUrl, () => {
this._cantouch = true; this._cantouch = true;
}) })
...@@ -351,11 +356,11 @@ cc.Class({ ...@@ -351,11 +356,11 @@ cc.Class({
else { else {
//显示完,则播放音频 //显示完,则播放音频
if (this._shown) { if (this._shown) {
this.playTextAutio(() => { this.playTextAutio(labelNode, word.audioUrl, () => {
this._cantouch = true; this._cantouch = true;
}); });
} }
else{ else {
this._cantouch = true; this._cantouch = true;
} }
} }
...@@ -368,7 +373,7 @@ cc.Class({ ...@@ -368,7 +373,7 @@ cc.Class({
return labelNode; return labelNode;
}, },
playTipAni(name, times = 1, cb=null) { playTipAni(name, times = 1, cb = null) {
const tip = cc.find('Canvas/tipFrame/tip'); const tip = cc.find('Canvas/tipFrame/tip');
tip.parent.zIndex = 10; tip.parent.zIndex = 10;
...@@ -428,12 +433,13 @@ cc.Class({ ...@@ -428,12 +433,13 @@ cc.Class({
}, },
/** /**
* 播放文本音频 * @param {*}
* @param {*} audioUrl
* @param {*} callback * @param {*} callback
*/ */
playTextAutio(callback = null) { playTextAutio(labelNode, audioUrl, callback = null) {
this.playAudioByUrl(this.data.exercises.audioUrl, () => { this.playAudioByUrl(audioUrl, () => {
//停止监听动画 //停止监听动画
this._stopAni = true; this._stopAni = true;
...@@ -441,7 +447,7 @@ cc.Class({ ...@@ -441,7 +447,7 @@ cc.Class({
if (callback) { if (callback) {
callback(); callback();
} }
},(audioId) => { }, (audioId) => {
//显示完成,不再播放动画 //显示完成,不再播放动画
if (this._shown) { if (this._shown) {
...@@ -455,13 +461,16 @@ cc.Class({ ...@@ -455,13 +461,16 @@ cc.Class({
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand"); let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.opacity = 0; handNode.opacity = 0;
let lyrics = this.data.exercises.lrcData.lyrics; this.textTwinkle(labelNode, () => {
this._cantouch = true;
//临时音频打点数组 this._curIndex++;
let arr = JSON.parse(JSON.stringify(lyrics)); this.moveHand(this._curIndex, () => {
console.log(arr); this._cantouch = true;
this.monitor(audioId, arr); this.showEnd();
})
});
}) })
}, },
...@@ -508,7 +517,7 @@ cc.Class({ ...@@ -508,7 +517,7 @@ cc.Class({
startX += space; startX += space;
} }
if(tW > textNode.width){ if (tW > textNode.width) {
const sx = textNode.width / tW; const sx = textNode.width / tW;
textNode.scale = Math.round(sx * 1000) / 1000; textNode.scale = Math.round(sx * 1000) / 1000;
...@@ -544,9 +553,9 @@ cc.Class({ ...@@ -544,9 +553,9 @@ cc.Class({
_stop: null, _stop: null,
_tween: null, _tween: null,
handAni(){ handAni() {
if(this._tween){ if (this._tween) {
this._tween.stop(); this._tween.stop();
} }
...@@ -556,11 +565,11 @@ cc.Class({ ...@@ -556,11 +565,11 @@ cc.Class({
handNode.y = handNode.initY; handNode.y = handNode.initY;
const move = () => { const move = () => {
this._tween = cc.tween(handNode) this._tween = cc.tween(handNode)
.to(0.5,{y: handNode.initY + 50}) .to(0.5, { y: handNode.initY + 50 })
.to(0.5,{y: handNode.initY}) .to(0.5, { y: handNode.initY })
.call(() =>{ .call(() => {
if(!this._stop){ if (!this._stop) {
move() move()
} }
}) })
...@@ -572,10 +581,10 @@ cc.Class({ ...@@ -572,10 +581,10 @@ cc.Class({
move(); move();
}, },
_stopAni:null, _stopAni: null,
monitor(audioId, arr){ monitor(audioId, arr) {
if(this._stopAni){ if (this._stopAni) {
return; return;
} }
...@@ -585,7 +594,7 @@ cc.Class({ ...@@ -585,7 +594,7 @@ cc.Class({
let len = arr.length; let len = arr.length;
for(let i = len - 1; i >=0; -- i){ for (let i = len - 1; i >= 0; --i) {
let time = arr[i].time; let time = arr[i].time;
...@@ -593,13 +602,13 @@ cc.Class({ ...@@ -593,13 +602,13 @@ cc.Class({
currentTime = Math.round(currentTime * 1000) / 1000; currentTime = Math.round(currentTime * 1000) / 1000;
if(time < currentTime ){ if (time < currentTime) {
//如果是最后一个匹配,则播放内容动画 //如果是最后一个匹配,则播放内容动画
if(len == 1){ if (len == 1) {
this.contentAni(); this.contentAni();
} }
else{ else {
this.textAni(); this.textAni();
} }
...@@ -611,7 +620,7 @@ cc.Class({ ...@@ -611,7 +620,7 @@ cc.Class({
} }
requestAnimationFrame(()=>{ requestAnimationFrame(() => {
this.monitor(audioId, arr); this.monitor(audioId, arr);
}) })
...@@ -620,10 +629,10 @@ cc.Class({ ...@@ -620,10 +629,10 @@ cc.Class({
/** /**
* 文本动画 * 文本动画
*/ */
_playText:null, _playText: null,
textAni(){ textAni() {
if(this._playText){ if (this._playText) {
return; return;
} }
...@@ -631,16 +640,6 @@ cc.Class({ ...@@ -631,16 +640,6 @@ cc.Class({
this._cantouch = false; this._cantouch = false;
const twinkle =(node) => {
cc.tween(node)
.to(0.3,{scale: node.initScale * 1.3})
.to(0.3,{scale: node.initScale})
.call(() => {
this._playText = false;
})
.start();
};
let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text"); let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text");
let wordNodeArr = textNode.wordNodeArr; let wordNodeArr = textNode.wordNodeArr;
...@@ -649,29 +648,48 @@ cc.Class({ ...@@ -649,29 +648,48 @@ cc.Class({
let wordNode = wordNodeArr[i]; let wordNode = wordNodeArr[i];
//如果是首字母,则执行动画 //如果是首字母,则执行动画
if(wordNode.isInitial){ if (wordNode.isInitial) {
twinkle(wordNode); this.textTwinkle(wordNode);
} }
} }
}, },
/**
* 文本内容动画
* @param {*} node
* @param {*} callback
*/
textTwinkle(node, callback = null) {
cc.tween(node)
.to(0.3, { scale: node.initScale * 1.3 })
.to(0.3, { scale: node.initScale })
.call(() => {
this._playText = false;
if (callback) {
callback();
}
})
.start();
},
/** /**
* 内容动画 * 内容动画
*/ */
contentAni(){ contentAni() {
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand"); let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.opacity = 0; handNode.opacity = 0;
const twinkle =(node) => { const twinkle = (node) => {
cc.tween(node) cc.tween(node)
.to(0.5,{scale: node.initScale * 1.1}) .to(0.5, { scale: node.initScale * 1.1 })
.to(0.5,{scale: node.initScale}) .to(0.5, { scale: node.initScale })
.to(0.5,{scale: node.initScale * 1.1}) .to(0.5, { scale: node.initScale * 1.1 })
.to(0.5,{scale: node.initScale}) .to(0.5, { scale: node.initScale })
.call(()=>{ .call(() => {
this._cantouch = true; this._cantouch = true;
this._curIndex++; this._curIndex++;
...@@ -763,11 +781,11 @@ cc.Class({ ...@@ -763,11 +781,11 @@ cc.Class({
openRecognitionCamera((data) => { openRecognitionCamera((data) => {
console.log('openRecognitionCamera data: ', data) console.log('openRecognitionCamera data: ', data)
if ( typeof data == 'string' ) { if (typeof data == 'string') {
data = JSON.parse(data); data = JSON.parse(data);
} }
const {result} = data; const { result } = data;
this.photoEnd(result); this.photoEnd(result);
this.maskNode.active = false; this.maskNode.active = false;
...@@ -810,16 +828,16 @@ cc.Class({ ...@@ -810,16 +828,16 @@ cc.Class({
text = text.trim(); text = text.trim();
for(let j=0; j<block.length; j++) { for (let j = 0; j < block.length; j++) {
const line = block[j].line; const line = block[j].line;
if (!line) { if (!line) {
continue; continue;
} }
for (let i=0; i<line.length; i++) { for (let i = 0; i < line.length; i++) {
const {word} = line[i]; const { word } = line[i];
let sentence = '' let sentence = ''
word.forEach(item => { word.forEach(item => {
sentence += item.content + ' '; sentence += item.content + ' ';
...@@ -839,20 +857,20 @@ cc.Class({ ...@@ -839,20 +857,20 @@ cc.Class({
return false; return false;
}, },
getPhotoLabelData(text, block, topY=null, bottomY=null) { getPhotoLabelData(text, block, topY = null, bottomY = null) {
text = text.trim(); text = text.trim();
for(let j=0; j<block.length; j++) { for (let j = 0; j < block.length; j++) {
const line = block[j].line; const line = block[j].line;
if (!line) { if (!line) {
continue; continue;
} }
for (let i=0; i<line.length; i++) { for (let i = 0; i < line.length; i++) {
const {word} = line[i]; const { word } = line[i];
let sentence = '' let sentence = ''
word.forEach(item => { word.forEach(item => {
sentence += item.content + ' '; sentence += item.content + ' ';
...@@ -860,7 +878,7 @@ cc.Class({ ...@@ -860,7 +878,7 @@ cc.Class({
sentence.trim(); sentence.trim();
if (sentence.indexOf(text) != -1 ) { if (sentence.indexOf(text) != -1) {
if (topY && bottomY) { if (topY && bottomY) {
const sentenceY = line[i].location.top_left.y const sentenceY = line[i].location.top_left.y
...@@ -950,7 +968,7 @@ cc.Class({ ...@@ -950,7 +968,7 @@ cc.Class({
getPhotoData(cb) { getPhotoData(cb) {
const tmpData = {"text":"","audio":"","result":{"code":"0","data":{"block":[{"type":"text","line":[{"confidence":1,"location":{"top_left":{"x":112,"y":63},"right_bottom":{"x":497,"y":114}},"word":[{"content":"Unit"},{"content":"1"},{"content":"Aa"},{"content":"Bb"},{"content":"Cc"}]},{"confidence":1,"location":{"top_left":{"x":160,"y":121},"right_bottom":{"x":401,"y":162}},"word":[{"content":"A"},{"content":"Listen"},{"content":"and"},{"content":"repeat.03"}]},{"confidence":1,"location":{"top_left":{"x":607,"y":141},"right_bottom":{"x":657,"y":184}},"word":[{"content":"V"}]},{"confidence":1,"location":{"top_left":{"x":335,"y":246},"right_bottom":{"x":417,"y":277}},"word":[{"content":"I"},{"content":"like"}]},{"confidence":1,"location":{"top_left":{"x":448,"y":208},"right_bottom":{"x":640,"y":306}},"word":[{"content":"Aa"}]},{"confidence":1,"location":{"top_left":{"x":351,"y":275},"right_bottom":{"x":401,"y":304}},"word":[{"content":"..."}]},{"confidence":1,"location":{"top_left":{"x":303,"y":307},"right_bottom":{"x":352,"y":327}},"word":[{"content":"angry"},{"content":"to"}]},{"confidence":1,"location":{"top_left":{"x":223,"y":318},"right_bottom":{"x":449,"y":364}},"word":[{"content":"Listen.polnt.andrepeat.ou"}]}]}]},"desc":"success","sid":"wcr005666b3@dx2d0714d48cc56f2b00"},"error":""} const tmpData = { "text": "", "audio": "", "result": { "code": "0", "data": { "block": [{ "type": "text", "line": [{ "confidence": 1, "location": { "top_left": { "x": 112, "y": 63 }, "right_bottom": { "x": 497, "y": 114 } }, "word": [{ "content": "Unit" }, { "content": "1" }, { "content": "Aa" }, { "content": "Bb" }, { "content": "Cc" }] }, { "confidence": 1, "location": { "top_left": { "x": 160, "y": 121 }, "right_bottom": { "x": 401, "y": 162 } }, "word": [{ "content": "A" }, { "content": "Listen" }, { "content": "and" }, { "content": "repeat.03" }] }, { "confidence": 1, "location": { "top_left": { "x": 607, "y": 141 }, "right_bottom": { "x": 657, "y": 184 } }, "word": [{ "content": "V" }] }, { "confidence": 1, "location": { "top_left": { "x": 335, "y": 246 }, "right_bottom": { "x": 417, "y": 277 } }, "word": [{ "content": "I" }, { "content": "like" }] }, { "confidence": 1, "location": { "top_left": { "x": 448, "y": 208 }, "right_bottom": { "x": 640, "y": 306 } }, "word": [{ "content": "Aa" }] }, { "confidence": 1, "location": { "top_left": { "x": 351, "y": 275 }, "right_bottom": { "x": 401, "y": 304 } }, "word": [{ "content": "..." }] }, { "confidence": 1, "location": { "top_left": { "x": 303, "y": 307 }, "right_bottom": { "x": 352, "y": 327 } }, "word": [{ "content": "angry" }, { "content": "to" }] }, { "confidence": 1, "location": { "top_left": { "x": 223, "y": 318 }, "right_bottom": { "x": 449, "y": 364 } }, "word": [{ "content": "Listen.polnt.andrepeat.ou" }] }] }] }, "desc": "success", "sid": "wcr005666b3@dx2d0714d48cc56f2b00" }, "error": "" }
cb(tmpData); cb(tmpData);
}, },
...@@ -986,7 +1004,7 @@ cc.Class({ ...@@ -986,7 +1004,7 @@ cc.Class({
}, },
_audioId: null, _audioId: null,
playAudioByUrl(audio_url, cb = null, loadcb=null, loop = false) { playAudioByUrl(audio_url, cb = null, loadcb = null, loop = false) {
if (this._audioId) { if (this._audioId) {
cc.audioEngine.pause(this._audioId); cc.audioEngine.pause(this._audioId);
...@@ -1006,7 +1024,7 @@ cc.Class({ ...@@ -1006,7 +1024,7 @@ cc.Class({
}); });
} }
if(loadcb){ if (loadcb) {
loadcb(audioId); loadcb(audioId);
} }
......
...@@ -2,10 +2,12 @@ export const defaultData = { ...@@ -2,10 +2,12 @@ export const defaultData = {
"exercises":{ "exercises":{
"wordArr":[ "wordArr":[
{ {
"val":"A" "val":"A",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/8b5ecca5d4509e1b8a7e81e69d8db615.mp3"
}, },
{ {
"val":"a" "val":"a",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/607af37644501e678de6cbafee555948.mp3"
} }
], ],
"picUrl":"http://staging-teach.cdn.ireadabc.com/101cdabba6404b73292d3b676f4683b1.png", "picUrl":"http://staging-teach.cdn.ireadabc.com/101cdabba6404b73292d3b676f4683b1.png",
......
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