Commit 8a178a65 authored by Li MingZhe's avatar Li MingZhe

feat: 增加图片动画类型 背景乐

parent 3942b415
No preview for this file type
...@@ -35,7 +35,8 @@ ...@@ -35,7 +35,8 @@
<ng-template #truthyTemplate > <ng-template #truthyTemplate >
<div class="btn-delete" (click)="onBtnDeleteAudio()"> <div class="btn-delete" (click)="onBtnDeleteAudio()">
<fa-icon icon="close"></fa-icon> <!-- <fa-icon icon="close"></fa-icon> -->
<i nz-icon nzType="close" nzTheme="outline"></i>
</div> </div>
</ng-template> </ng-template>
......
...@@ -26,7 +26,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -26,7 +26,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
uploadData; uploadData;
@Input() @Input()
needRemove = false; needRemove = true;
@Input() @Input()
audioItem: any = null; audioItem: any = null;
...@@ -157,6 +157,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -157,6 +157,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
onBtnDeleteAudio() { onBtnDeleteAudio() {
this.audioUrl = null; this.audioUrl = null;
this.audioUploaded.emit({});
this.audioRemoved.emit(); this.audioRemoved.emit();
} }
......
...@@ -8,6 +8,16 @@ ...@@ -8,6 +8,16 @@
</nz-select> </nz-select>
</div> </div>
<div style="display: flex; align-items: center; margin-top: 20px;">
<h4 style="margin-left: 15px;"> 背景乐添加: </h4>
<app-audio-recorder
style="margin-left: 20px"
[audioUrl]="item.bg_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'bg_audio_url', item)">
</app-audio-recorder>
</div>
<nz-divider nzText="配置歌词"></nz-divider> <nz-divider nzText="配置歌词"></nz-divider>
...@@ -69,11 +79,11 @@ ...@@ -69,11 +79,11 @@
</div> </div>
<div style="padding: 10px"> <!-- <div style="padding: 10px">
<button style="width: 230px; height: 240px; padding: 5px;" nz-button nzType="dashed" (click)="addPic()"> <button style="width: 230px; height: 240px; padding: 5px;" nz-button nzType="dashed" (click)="addPic()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加底部item <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加底部item
</button> </button>
</div> </div> -->
</div> </div>
......
...@@ -32,6 +32,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -32,6 +32,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, },
{ {
name: '图片', name: '图片',
audio: true,
pic: true pic: true
}, },
{ {
...@@ -45,6 +46,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -45,6 +46,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
{ {
name: '模式切换按钮', name: '模式切换按钮',
rect: true, rect: true,
},
{
name: '动画',
rect: true,
anima: true,
audio: true,
} }
] ]
......
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 156, "width": 80,
"height": 132, "height": 80,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"btn1": { "btn1": {
......
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 213, "width": 80,
"height": 180, "height": 80,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"pause": { "pause": {
......
...@@ -301,8 +301,8 @@ cc.Class({ ...@@ -301,8 +301,8 @@ cc.Class({
item.addComponent(cc.Button); item.addComponent(cc.Button);
item.on('click', () => { item.on('click', () => {
if (item.audioClip) { if (item.audioClip) {
cc.audioEngine.stopAll(); cc.audioEngine.stopAllEffects();
cc.audioEngine.play(item.audioClip, false, 0.5); cc.audioEngine.playEffect(item.audioClip, false, 0.8);
} }
}); });
}, },
......
...@@ -90,14 +90,14 @@ cc.Class({ ...@@ -90,14 +90,14 @@ cc.Class({
getDefaultData() { getDefaultData() {
const data = {"lrcData":{"audio_url":"http://staging-teach.cdn.ireadabc.com/1d1184717ebff259c72fedcb6b249431.mp3","fontSize":24,"lineHeight":32,"lyrics":[{"time":11.09,"data":"一闪一闪亮晶晶","newLine":true},{"time":14.9,"data":"满天都是小星星","newLine":true},{"time":19.31,"data":"挂在天上放光明","newLine":true},{"time":23.62,"data":"好像许多小眼睛","newLine":true},{"time":27.93,"data":"一闪一闪亮晶晶","newLine":true},{"time":32.32,"data":"满天都是小星星","newLine":true},{"time":41.1,"data":"一闪一闪亮晶晶","newLine":true},{"time":45.45,"data":"满天都是小星星","newLine":true},{"time":49.74,"data":"挂在天上放光明","newLine":true},{"time":54.16,"data":"好像许多小眼睛","newLine":true},{"time":58.39,"data":"一闪一闪亮晶晶","newLine":true},{"time":62.9,"data":"满天都是小星星","newLine":true},{"time":76.36,"data":"一闪一闪亮晶晶","newLine":true},{"time":80.28,"data":"满天都是小星星","newLine":true},{"time":84.65,"data":"挂在天上放光明","newLine":true},{"time":88.92,"data":"好像许多小眼睛","newLine":true},{"time":93.41,"data":"一闪一闪亮晶晶","newLine":true},{"time":97.72,"data":"满天都是小星星","newLine":true}]},"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/47a5c15dbb2ef6270471ee1b091b6ef1.png","rect":{"x":113,"y":0,"width":726,"height":363}},"hotZoneItemArr":[{"id":"1597901672159","index":0,"itemType":"rect","fontScale":0.74375,"imgScale":1,"mapScale":0.74375,"gIdx":"2","rect":{"x":463.43,"y":97.81,"width":209.22,"height":209.22}},{"id":"1597901680891","index":1,"itemType":"rect","fontScale":0.74375,"imgScale":1,"mapScale":0.74375,"gIdx":"3","rect":{"x":366.66,"y":218.64,"width":93.11,"height":93.11}},{"id":"1597901691971","index":2,"itemType":"rect","fontScale":0.74375,"imgScale":1,"mapScale":0.74375,"gIdx":"4","rect":{"x":251.07,"y":99.38,"width":209.22,"height":59.63}},{"id":"1597903929187","index":3,"pic_url":"http://staging-teach.cdn.ireadabc.com/b888f0457755edbbb49b6cd1670a03d8.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/4a7d062bb8d30ff643d8bddc07e7fe0b.mp3","itemType":"rect","fontScale":0.74375,"imgScale":0.08724302799823634,"mapScale":0.74375,"gIdx":"0","rect":{"x":99.5,"y":183,"width":79,"height":79}}],"accompany_audio_url":"http://staging-teach.cdn.ireadabc.com/4a59032f9b5f726cb2cde2178a7f51fc.mp3"} const data = {"bgColorId":0,"bgColor":"#f9bd03","lrcData":{"audio_url":"http://staging-teach.cdn.ireadabc.com/9259e1b99cc17f61210e7edc17f1d697.mp3","fontSize":24,"lineHeight":32,"lyrics":[{"time":0.112745,"data":"","newLine":false},{"time":0.685942,"data":"","newLine":false},{"time":0.31448,"data":"","newLine":false},{"time":0.386885,"data":"","newLine":false}]},"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/539e2f58cb1817f852d9c09ec1ac7c8b.png","rect":{"x":265.18,"y":0,"width":776.65,"height":500}},"hotZoneItemArr":[{"id":"1611200754821","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/05a37c3f8249811eda089c44f5d2acc6.png","audio_url":"http://staging-teach.cdn.ireadabc.com/66878465ec50d162bd60fcdaa641933b.mp3","itemType":"pic","fontScale":1.02109375,"imgScale":0.46864686468646866,"mapScale":1.02109375,"gIdx":"1","rect":{"x":24.14,"y":341,"width":234.32,"height":142}},{"id":"1611200760188","index":1,"pic_url":"http://staging-teach.cdn.ireadabc.com/c8abf7383d65bcbdba8f390785cece60.png","text":"aa111","audio_url":"http://staging-teach.cdn.ireadabc.com/83513f8d6083ebe072e3f9e47a21558a.mp3","itemType":"rect","fontScale":1.02109375,"imgScale":0.7029268568840579,"mapScale":1.02109375,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/51e9d8e4e2e963a7658d07eba6c282f8.json","name":"Ubbie_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/4232e00c9b1d272e650e51dbb785e498.json","name":"Ubbie_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/2e56dbe3134380952a725eacceb86359.png","name":"Ubbie_tex.png"},"gIdx":"0","rect":{"x":259.31,"y":85,"width":200,"height":200}},{"id":"1611200801763","index":2,"audio_url":"http://staging-teach.cdn.ireadabc.com/1961d807c944e6551af02c7b57e117f3.mp3","itemType":"rect","fontScale":1.02109375,"imgScale":1,"mapScale":1.02109375,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/51e9d8e4e2e963a7658d07eba6c282f8.json","name":"Ubbie_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/4232e00c9b1d272e650e51dbb785e498.json","name":"Ubbie_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/2e56dbe3134380952a725eacceb86359.png","name":"Ubbie_tex.png"},"gIdx":"5","rect":{"x":550.31,"y":275,"width":200,"height":200}}],"picArr":[],"bg_audio_url":"http://staging-teach.cdn.ireadabc.com/3fa65d5f667a2ef9059d3dfc5df74a4d.mp3"}
if (data.picArr) { // if (data.picArr) {
data.picArr = data.picArr.concat(data.picArr); // data.picArr = data.picArr.concat(data.picArr);
data.picArr = data.picArr.concat(data.picArr); // data.picArr = data.picArr.concat(data.picArr);
data.picArr = data.picArr.concat(data.picArr); // data.picArr = data.picArr.concat(data.picArr);
data.picArr = data.picArr.concat(data.picArr); // data.picArr = data.picArr.concat(data.picArr);
data.picArr = data.picArr.concat(data.picArr); // data.picArr = data.picArr.concat(data.picArr);
} // }
return data; return data;
}, },
...@@ -116,10 +116,18 @@ cc.Class({ ...@@ -116,10 +116,18 @@ cc.Class({
}, },
addPreloadImage() { addPreloadImage() {
if (this.data.bgItem) { if (this.data.bgItem) {
this._imageResList.push({url: this.data.bgItem.url}); this._imageResList.push({ url: this.data.bgItem.url });
} }
if (!this.data.hotZoneItemArr) {
return;
}
this.data.hotZoneItemArr.forEach((item) => {
if (item.pic_url) {
this._imageResList.push({ url: item.pic_url });
}
})
}, },
addPreloadAudio() { addPreloadAudio() {
...@@ -136,19 +144,22 @@ cc.Class({ ...@@ -136,19 +144,22 @@ cc.Class({
if (this.data.accompany_audio_url) { if (this.data.accompany_audio_url) {
this._audioResList.push({url: this.data.accompany_audio_url}); this._audioResList.push({url: this.data.accompany_audio_url});
} }
this._audioResList.push({url: this.data.bg_audio_url});
}, },
addPreloadAnima() { addPreloadAnima() {
if (!this.data.hotZoneItemArr) { if (!this.data.hotZoneItemArr) {
return; return;
} }
this.data.hotZoneItemArr.forEach((item) => { this.data.hotZoneItemArr.forEach((item) => {
if (item.gIdx == '0' && item.skeJsonData && item.texJsonData && item.texPngData) { if (item.skeJsonData) {
this._animaResList.push({url: item.skeJsonData.url}); this._animaResList.push({ url: item.skeJsonData.url || '' });
this._animaResList.push({url: item.texJsonData.url}); this._animaResList.push({ url: item.texJsonData.url || ''});
this._animaResList.push({url: item.texPngData.url}); this._animaResList.push({ url: item.texPngData.url || ''});
} }
}) })
}, },
...@@ -162,6 +173,14 @@ cc.Class({ ...@@ -162,6 +173,14 @@ cc.Class({
this.initBg(); this.initBg();
this.initHotZone(); this.initHotZone();
this.initBottomPart(); this.initBottomPart();
this.initMusic();
},
initMusic() {
cc.assetManager.loadRemote(this.data.bg_audio_url, (err, clip) => {
cc.audioEngine.setMusicVolume(0.3);
const audioID = cc.audioEngine.playMusic(clip, true);
});
}, },
_cocosScale: null, _cocosScale: null,
...@@ -298,7 +317,7 @@ cc.Class({ ...@@ -298,7 +317,7 @@ cc.Class({
bgBottom.y = -frameSize.height / 2 * this._cocosScale - 15 * bgBottom.scaleY; bgBottom.y = -frameSize.height / 2 * this._cocosScale - 15 * bgBottom.scaleY;
// this.data.bgItem.isShowDebugLine = true; // this.data.bgItem.isShowDebugLine = true;
this.data.hotZoneItemArr.forEach((item) => { this.data.hotZoneItemArr.forEach((item) => {
if (item.gIdx == '0') { if (item.gIdx == '0' || item.gIdx == '5') {
this.setOneAnima(item); this.setOneAnima(item);
} else if (item.gIdx == '1') { } else if (item.gIdx == '1') {
this.setOnePic(item); this.setOnePic(item);
...@@ -459,9 +478,9 @@ cc.Class({ ...@@ -459,9 +478,9 @@ cc.Class({
console.log('clicked'); console.log('clicked');
if (animaNode.audioClip) { if (animaNode.audioClip) {
cc.audioEngine.stopAll(); cc.audioEngine.stopAllEffects();
cc.director.emit('STOP_ALL_AUDIO') cc.director.emit('STOP_ALL_AUDIO')
cc.audioEngine.play(animaNode.audioClip, false, 0.8); cc.audioEngine.playEffect(animaNode.audioClip, false, 0.8);
} }
if (animationNames.length > 0) { if (animationNames.length > 0) {
...@@ -499,18 +518,29 @@ cc.Class({ ...@@ -499,18 +518,29 @@ cc.Class({
picNode.anchorX = picNode.anchorY = 0; picNode.anchorX = picNode.anchorY = 0;
// if (this.data.bgItem.isShowDebugLine) { if (data.audio_url) {
// const ctx = picNode.addComponent(cc.Graphics); this.addPicAudio(picNode);
// ctx.lineWidth = 4; }
// ctx.strokeColor = cc.Color.BLACK;
// ctx.fillColor = cc.Color.WHITE.setA(100);
// ctx.rect(0, 0, picNode.width, picNode.height);
// ctx.stroke();
// ctx.fill()
// }
}); });
},
addPicAudio(picNode) {
const data = picNode.data;
cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
picNode.audioClip = audioClip;
});
picNode.addComponent(cc.Button);
picNode.on('click', () => {
if (picNode.audioClip) {
cc.audioEngine.stopAllEffects();
cc.audioEngine.playEffect(picNode.audioClip, false, 0.8);
} }
});
},
// update (dt) {}, // update (dt) {},
......
No preview for this file type
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