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

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

parent 3942b415
No preview for this file type
......@@ -35,7 +35,8 @@
<ng-template #truthyTemplate >
<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>
</ng-template>
......
......@@ -26,7 +26,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
uploadData;
@Input()
needRemove = false;
needRemove = true;
@Input()
audioItem: any = null;
......@@ -157,6 +157,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
onBtnDeleteAudio() {
this.audioUrl = null;
this.audioUploaded.emit({});
this.audioRemoved.emit();
}
......
......@@ -8,6 +8,16 @@
</nz-select>
</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>
......@@ -69,11 +79,11 @@
</div>
<div style="padding: 10px">
<!-- <div style="padding: 10px">
<button style="width: 230px; height: 240px; padding: 5px;" nz-button nzType="dashed" (click)="addPic()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加底部item
</button>
</div>
</div> -->
</div>
......
......@@ -32,6 +32,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
},
{
name: '图片',
audio: true,
pic: true
},
{
......@@ -45,6 +46,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
{
name: '模式切换按钮',
rect: true,
},
{
name: '动画',
rect: true,
anima: true,
audio: true,
}
]
......
......@@ -7,8 +7,8 @@
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 156,
"height": 132,
"width": 80,
"height": 80,
"platformSettings": {},
"subMetas": {
"btn1": {
......
......@@ -7,8 +7,8 @@
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 213,
"height": 180,
"width": 80,
"height": 80,
"platformSettings": {},
"subMetas": {
"pause": {
......
......@@ -301,8 +301,8 @@ cc.Class({
item.addComponent(cc.Button);
item.on('click', () => {
if (item.audioClip) {
cc.audioEngine.stopAll();
cc.audioEngine.play(item.audioClip, false, 0.5);
cc.audioEngine.stopAllEffects();
cc.audioEngine.playEffect(item.audioClip, false, 0.8);
}
});
},
......
......@@ -90,14 +90,14 @@ cc.Class({
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"}
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);
}
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) {
// 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;
},
......@@ -116,10 +116,18 @@ cc.Class({
},
addPreloadImage() {
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() {
......@@ -136,19 +144,22 @@ cc.Class({
if (this.data.accompany_audio_url) {
this._audioResList.push({url: this.data.accompany_audio_url});
}
this._audioResList.push({url: this.data.bg_audio_url});
},
addPreloadAnima() {
if (!this.data.hotZoneItemArr) {
return;
}
this.data.hotZoneItemArr.forEach((item) => {
if (item.gIdx == '0' && item.skeJsonData && item.texJsonData && item.texPngData) {
this._animaResList.push({url: item.skeJsonData.url});
this._animaResList.push({url: item.texJsonData.url});
this._animaResList.push({url: item.texPngData.url});
if (item.skeJsonData) {
this._animaResList.push({ url: item.skeJsonData.url || '' });
this._animaResList.push({ url: item.texJsonData.url || ''});
this._animaResList.push({ url: item.texPngData.url || ''});
}
})
},
......@@ -162,6 +173,14 @@ cc.Class({
this.initBg();
this.initHotZone();
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,
......@@ -298,7 +317,7 @@ cc.Class({
bgBottom.y = -frameSize.height / 2 * this._cocosScale - 15 * bgBottom.scaleY;
// this.data.bgItem.isShowDebugLine = true;
this.data.hotZoneItemArr.forEach((item) => {
if (item.gIdx == '0') {
if (item.gIdx == '0' || item.gIdx == '5') {
this.setOneAnima(item);
} else if (item.gIdx == '1') {
this.setOnePic(item);
......@@ -459,9 +478,9 @@ cc.Class({
console.log('clicked');
if (animaNode.audioClip) {
cc.audioEngine.stopAll();
cc.audioEngine.stopAllEffects();
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) {
......@@ -499,18 +518,29 @@ cc.Class({
picNode.anchorX = picNode.anchorY = 0;
// if (this.data.bgItem.isShowDebugLine) {
// const ctx = picNode.addComponent(cc.Graphics);
// 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()
// }
if (data.audio_url) {
this.addPicAudio(picNode);
}
});
},
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) {},
......
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