Commit ba8c6d0e authored by Chen Jiping's avatar Chen Jiping

feat:动画逻辑调整

parent b561951b
......@@ -65,6 +65,7 @@
<tr>
<th>序号</th>
<th>字母</th>
<th>音频</th>
<th>操作</th>
</tr>
</thead>
......@@ -72,6 +73,11 @@
<tr *ngFor="let row of wordTable.data;let j = index">
<td>{{ j+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>
<button nz-button nzType="dashed" id="del-btn" (click)="delWord(item.exercises, j)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除
......@@ -82,9 +88,6 @@
</nz-table>
</nz-form-control>
</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>
\ No newline at end of file
......@@ -109,11 +109,16 @@ cc.Class({
this._audioResList.push({ url: this.data.exercises.audioUrl });
}
if(this.data){
this._audioResList.push({ url: this.data.guideAudioUrl1 });
this._audioResList.push({ url: this.data.guideAudioUrl2 });
this._audioResList.push({ url: this.data.guideAudioUrl3 });
let wordArr = this.data.exercises.wordArr;
for (let i = 0; i < wordArr.length; ++i) {
if (wordArr[i].audioUrl) {
this._audioResList.push({ url: wordArr[i].audioUrl });
}
}
},
addPreloadAnima() {
......@@ -206,13 +211,13 @@ cc.Class({
}
//如果有引导音频,则播放完引导音频再开始
if(this.data.guideAudioUrl1){
if (this.data.guideAudioUrl1) {
//播放引导音频1
this.playAudioByUrl(this.data.guideAudioUrl1, () => {
begin();
});
}
else{
else {
begin();
}
......@@ -230,7 +235,7 @@ cc.Class({
maskNode.anchorY = 0.5;
const mask = maskNode.addComponent(cc.Graphics);
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);
maskNode.addComponent(cc.BlockInputEvents);
......@@ -284,13 +289,13 @@ cc.Class({
//首字母
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;
wordNodeArr.push(label);
//其余字母
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);
}
......@@ -309,7 +314,7 @@ cc.Class({
},
getWord(wordVal, size, isInitial) {
getWord(word, wordVal, size, isInitial) {
size /= 2;
let color = new cc.color();
......@@ -343,7 +348,7 @@ cc.Class({
//如果是首字母,则添加点击事件
if (isInitial) {
this.playTextAutio(() =>{
this.playTextAutio(labelNode, word.audioUrl, () => {
this._cantouch = true;
})
......@@ -351,11 +356,11 @@ cc.Class({
else {
//显示完,则播放音频
if (this._shown) {
this.playTextAutio(() => {
this.playTextAutio(labelNode, word.audioUrl, () => {
this._cantouch = true;
});
}
else{
else {
this._cantouch = true;
}
}
......@@ -368,7 +373,7 @@ cc.Class({
return labelNode;
},
playTipAni(name, times = 1, cb=null) {
playTipAni(name, times = 1, cb = null) {
const tip = cc.find('Canvas/tipFrame/tip');
tip.parent.zIndex = 10;
......@@ -428,12 +433,13 @@ cc.Class({
},
/**
* 播放文本音频
* @param {*}
* @param {*} audioUrl
* @param {*} callback
*/
playTextAutio(callback = null) {
playTextAutio(labelNode, audioUrl, callback = null) {
this.playAudioByUrl(this.data.exercises.audioUrl, () => {
this.playAudioByUrl(audioUrl, () => {
//停止监听动画
this._stopAni = true;
......@@ -441,7 +447,7 @@ cc.Class({
if (callback) {
callback();
}
},(audioId) => {
}, (audioId) => {
//显示完成,不再播放动画
if (this._shown) {
......@@ -455,13 +461,16 @@ cc.Class({
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.opacity = 0;
let lyrics = this.data.exercises.lrcData.lyrics;
this.textTwinkle(labelNode, () => {
this._cantouch = true;
//临时音频打点数组
let arr = JSON.parse(JSON.stringify(lyrics));
console.log(arr);
this._curIndex++;
this.moveHand(this._curIndex, () => {
this._cantouch = true;
this.monitor(audioId, arr);
this.showEnd();
})
});
})
},
......@@ -508,7 +517,7 @@ cc.Class({
startX += space;
}
if(tW > textNode.width){
if (tW > textNode.width) {
const sx = textNode.width / tW;
textNode.scale = Math.round(sx * 1000) / 1000;
......@@ -544,9 +553,9 @@ cc.Class({
_stop: null,
_tween: null,
handAni(){
handAni() {
if(this._tween){
if (this._tween) {
this._tween.stop();
}
......@@ -556,11 +565,11 @@ cc.Class({
handNode.y = handNode.initY;
const move = () => {
this._tween = cc.tween(handNode)
.to(0.5,{y: handNode.initY + 50})
.to(0.5,{y: handNode.initY})
.call(() =>{
.to(0.5, { y: handNode.initY + 50 })
.to(0.5, { y: handNode.initY })
.call(() => {
if(!this._stop){
if (!this._stop) {
move()
}
})
......@@ -572,10 +581,10 @@ cc.Class({
move();
},
_stopAni:null,
monitor(audioId, arr){
_stopAni: null,
monitor(audioId, arr) {
if(this._stopAni){
if (this._stopAni) {
return;
}
......@@ -585,7 +594,7 @@ cc.Class({
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;
......@@ -593,13 +602,13 @@ cc.Class({
currentTime = Math.round(currentTime * 1000) / 1000;
if(time < currentTime ){
if (time < currentTime) {
//如果是最后一个匹配,则播放内容动画
if(len == 1){
if (len == 1) {
this.contentAni();
}
else{
else {
this.textAni();
}
......@@ -611,7 +620,7 @@ cc.Class({
}
requestAnimationFrame(()=>{
requestAnimationFrame(() => {
this.monitor(audioId, arr);
})
......@@ -620,10 +629,10 @@ cc.Class({
/**
* 文本动画
*/
_playText:null,
textAni(){
_playText: null,
textAni() {
if(this._playText){
if (this._playText) {
return;
}
......@@ -631,16 +640,6 @@ cc.Class({
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 wordNodeArr = textNode.wordNodeArr;
......@@ -649,29 +648,48 @@ cc.Class({
let wordNode = wordNodeArr[i];
//如果是首字母,则执行动画
if(wordNode.isInitial){
twinkle(wordNode);
if (wordNode.isInitial) {
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");
handNode.opacity = 0;
const twinkle =(node) => {
const twinkle = (node) => {
cc.tween(node)
.to(0.5,{scale: node.initScale * 1.1})
.to(0.5,{scale: node.initScale})
.to(0.5,{scale: node.initScale * 1.1})
.to(0.5,{scale: node.initScale})
.call(()=>{
.to(0.5, { scale: node.initScale * 1.1 })
.to(0.5, { scale: node.initScale })
.to(0.5, { scale: node.initScale * 1.1 })
.to(0.5, { scale: node.initScale })
.call(() => {
this._cantouch = true;
this._curIndex++;
......@@ -763,11 +781,11 @@ cc.Class({
openRecognitionCamera((data) => {
console.log('openRecognitionCamera data: ', data)
if ( typeof data == 'string' ) {
if (typeof data == 'string') {
data = JSON.parse(data);
}
const {result} = data;
const { result } = data;
this.photoEnd(result);
this.maskNode.active = false;
......@@ -810,16 +828,16 @@ cc.Class({
text = text.trim();
for(let j=0; j<block.length; j++) {
for (let j = 0; j < block.length; j++) {
const line = block[j].line;
if (!line) {
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 = ''
word.forEach(item => {
sentence += item.content + ' ';
......@@ -839,20 +857,20 @@ cc.Class({
return false;
},
getPhotoLabelData(text, block, topY=null, bottomY=null) {
getPhotoLabelData(text, block, topY = null, bottomY = null) {
text = text.trim();
for(let j=0; j<block.length; j++) {
for (let j = 0; j < block.length; j++) {
const line = block[j].line;
if (!line) {
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 = ''
word.forEach(item => {
sentence += item.content + ' ';
......@@ -860,7 +878,7 @@ cc.Class({
sentence.trim();
if (sentence.indexOf(text) != -1 ) {
if (sentence.indexOf(text) != -1) {
if (topY && bottomY) {
const sentenceY = line[i].location.top_left.y
......@@ -950,7 +968,7 @@ cc.Class({
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);
},
......@@ -986,7 +1004,7 @@ cc.Class({
},
_audioId: null,
playAudioByUrl(audio_url, cb = null, loadcb=null, loop = false) {
playAudioByUrl(audio_url, cb = null, loadcb = null, loop = false) {
if (this._audioId) {
cc.audioEngine.pause(this._audioId);
......@@ -1006,7 +1024,7 @@ cc.Class({
});
}
if(loadcb){
if (loadcb) {
loadcb(audioId);
}
......
......@@ -2,10 +2,12 @@ export const defaultData = {
"exercises":{
"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",
......
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