Commit 8092cd0a authored by Chen Jiping's avatar Chen Jiping

fix:修复动画展示,采用龙骨动画

parent 64764173
......@@ -14,7 +14,7 @@ import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr} from './Unit';
import TWEEN from '@tweenjs/tween.js';
import {getMinScale} from "../../play/Unit";
import {getMinScale, ShapeRect} from "../../play/Unit";
import {tar} from "compressing";
......@@ -396,14 +396,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else {
this.refreshBackground(() => {
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
if (!this.hotZoneItemArr) {
this.hotZoneItemArr = [];
} else {
......@@ -411,6 +403,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
refreshBg();
});
}
......@@ -447,8 +441,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
//data.rect.x += curBgRect.x;
//data.rect.y += curBgRect.y;
// img['picItem'] = this.getPicItem(img, data);
// img['audio_url'] = arr[i].audio_url;
......@@ -517,9 +511,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = [];
this.bg = null;
......@@ -528,6 +520,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
initCtx() {
let canvasWidth = this.wrap.nativeElement.clientWidth;
let canvasHeight = this.wrap.nativeElement.clientHeight;
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
console.log(canvasWidth, canvasHeight);
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy);
this.mapScale = s;
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
......@@ -890,15 +894,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
fontColor: this.hotZoneFontObj.color,
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
mapScale: this.mapScale
mapScale: this.mapScale,
picX:hotZoneArr[i].pic ?hotZoneArr[i].pic.x : 0,
picY: hotZoneArr[i].pic ?hotZoneArr[i].pic.y : 0
};
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem['rect'].x = Math.round((hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].y = Math.round((hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100;
hotZoneItem['rect'].x = Math.round((hotZoneItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].y = Math.round((hotZoneItem['rect'].y) * 100) / 100;
hotZoneItem['rect'].width = Math.round((hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round((hotZoneItem['rect'].height) * 100) / 100;
hotZoneItemArr.push(hotZoneItem);
}
......
......@@ -59,27 +59,15 @@
<app-custom-hot-zone [bgItem]="item.bg" [hotZoneItemArr]="data.hotZoneItemArr"
(save)="saveData($event, i)"></app-custom-hot-zone>
<nz-form-item>
<nz-form-label [nzSpan]="6">序列帧动画</nz-form-label>
<nz-form-label [nzSpan]="6">动画</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addFrame(data, 'frames')">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
<button nz-button nzType="dashed" (click)="setAnimaBtnClick(data)" nzSize="large" style="margin-top: 10px" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="2" [nzSpan]="18">
<div nz-col [nzSpan]="6" *ngFor="let frame of data.frames;let m = index">
<app-upload-image-with-preview style="width: 100%" [picUrl]="frame.picUrl"
(imageUploaded)="onImageUploadSuccess($event,frame, 'picUrl')">
</app-upload-image-with-preview>
<button style="margin: 10px;" nz-button nzType="danger"
(click)="delFrame(data, 'frames', m)">
<span>删除</span>
</button>
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">备选答案</nz-form-label>
<nz-form-control [nzSpan]="6">
......@@ -135,4 +123,50 @@
</div>
</div>
</div>
<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
</div>
</nz-modal>
</div>
\ No newline at end of file
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { Answer, Frame, getDefaultExercises, getDefaultItem } from '../bean/ObjBean';
import {NzMessageService} from 'ng-zorro-antd';
@Component({
selector: 'app-form',
......@@ -14,10 +14,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveKey = "FT-01";
// 储存对象
item;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
isShowPicPanel = false;
curGroup = null;
skeJsonData = {};
texJsonData = {};
texPngData = {};
animaPanelVisible = false;
isSkeJsonLoading = false;
isTexJsonLoading = false;
isTexPngLoading = false;
uploadUrl;
uploadData;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef,private nzMessageService: NzMessageService) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
}
ngOnInit() {
......@@ -135,29 +152,112 @@ onAudioUploadSuccess(e, item, key) {
}
}
addFrame(exercises, key){
let frame = new Frame();
exercises[key] = [...exercises[key], frame];
saveData(e, i) {
console.log('savedata e:', e);
this.item.bg = e.bgItem;
this.item.exercisesArr[i].hotZoneItemArr = e.hotZoneItemArr;
this.save();
}
handleOk() {
this.isShowPicPanel = false;
}
delFrame(exercises, key, index) {
if (index !== -1) {
exercises[key].splice(index, 1);
exercises[key] = [...exercises[key]];
this.save();
}
handleCancel() {
this.isShowPicPanel = false;
}
saveData(e, i) {
console.log('savedata e:', e);
setAnimaBtnClick(group) {
this.item.bg = e.bgItem;
this.item.exercisesArr[i].hotZoneItemArr = e.hotZoneItemArr;
console.log(' in setAnimaBtnClick');
this.curGroup = group;
const {skeJsonData, texJsonData, texPngData} = group;
this.skeJsonData = skeJsonData || {};
this.texJsonData = texJsonData || {};
this.texPngData = texPngData || {};
this.animaPanelVisible = true;
this.refresh();
}
animaPanelCancel() {
this.animaPanelVisible = false;
}
animaPanelOk() {
this.animaPanelVisible = false;
this.setItemDragonBoneData(this.curGroup);
this.save();
}
setItemDragonBoneData(item) {
item['skeJsonData'] = this.skeJsonData;
item['texJsonData'] = this.texJsonData;
item['texPngData'] = this.texPngData;
}
skeJsonHandleChange(e) {
switch (e.type) {
case 'start':
this.isSkeJsonLoading = true;
break;
case 'success':
this.skeJsonData['url'] = e.file.response.url;
this.skeJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isSkeJsonLoading = false;
break;
case 'progress':
break;
}
}
texJsonHandleChange(e) {
switch (e.type) {
case 'start':
this.isTexJsonLoading = true;
break;
case 'success':
this.texJsonData['url'] = e.file.response.url;
this.texJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexJsonLoading = false;
break;
case 'progress':
break;
}
}
texPngHandleChange(e) {
switch (e.type) {
case 'start':
this.isTexPngLoading = true;
break;
case 'success':
this.texPngData['url'] = e.file.response.url;
this.texPngData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexPngLoading = false;
break;
case 'progress':
break;
}
}
}
\ No newline at end of file
......@@ -80,7 +80,7 @@ cc.Class({
getDefaultData() {
const dataJson = '{"exercisesArr":[{"answers":[{"isRight":"1","audioUrl":"http://staging-teach.cdn.ireadabc.com/4b763321dd84accbf0060038f2e95d6a.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/10dab2d49188db958a6a6e6b3ab7b5f5.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6a2f948c3febbb7881e6b6a7417811.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/a886b150e8792d433ced3672f4df7dfb.jpg"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/824c94f5e363c351e24dde9325731ab7.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/95638e0ab356b51f960e800e3fa5aacb.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d330a49df81ae964a705048f8ea0e0d.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3023da8f58edfa36a0a9c34e68902ef7.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/00254362880b14c443e533331db4e2bf.png","audio_url":"http://staging-teach.cdn.ireadabc.com/284f8356d7537612833d1d9bf5d76aa8.mp3","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.9,"imgScale":0.4584450402144772,"mapScale":0.9,"rect":{"x":746.76,"y":71.43,"width":258.57,"height":258.57}}]},{"answers":[{"isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/66fe3a8fe9cd81ebb0a20b4fb134443f.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6dfd436c533f44e8e9fdd594458576.png"},{"isRight":"1","audioUrl":"http://staging-teach.cdn.ireadabc.com/5d8c6991fabc4bf37a0055bb37eac8b3.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/b2b296923e5fd09e77cd29fd3883f78e.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/3fed3a7bacc07dfb84de7196a50d39ab.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/9f9361601b4f2dbd60f037c6996a5af6.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/2f65d31e390318626fce1180bb09b2ea.png"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/8c1833c5a38efea3394ad78a44cd8801.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/59a3efbfa3df99100e8810cbcddef107.png","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.9,"imgScale":0.9447513812154696,"mapScale":0.9,"rect":{"x":762.25,"y":244.51,"width":258.57,"height":258.57}}]}],"bg":{"rect":{"x":0,"y":3.6000000000000227,"width":1152,"height":526.8},"picUrl":"http://staging-teach.cdn.ireadabc.com/0b6497174aed7ae05127d1eb8c29d94a.jpg"},"title":{"val":"Find Body Part","audioUrl":"http://staging-teach.cdn.ireadabc.com/8f5559c935b390efdea299ad568d3bd9.mp3"}}';
const dataJson = '{"exercisesArr":[{"answers":[{"isRight":"1","audioUrl":"http://staging-teach.cdn.ireadabc.com/4b763321dd84accbf0060038f2e95d6a.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/10dab2d49188db958a6a6e6b3ab7b5f5.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6a2f948c3febbb7881e6b6a7417811.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/a886b150e8792d433ced3672f4df7dfb.jpg"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/824c94f5e363c351e24dde9325731ab7.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/95638e0ab356b51f960e800e3fa5aacb.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d330a49df81ae964a705048f8ea0e0d.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3023da8f58edfa36a0a9c34e68902ef7.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/00254362880b14c443e533331db4e2bf.png","audio_url":"http://staging-teach.cdn.ireadabc.com/284f8356d7537612833d1d9bf5d76aa8.mp3","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.7416666666666667,"imgScale":0.377792672028597,"mapScale":0.7416666666666667,"picX":762.0749999999999,"picY":174.825,"rect":{"x":632.79,"y":45.54,"width":258.57,"height":258.57}}],"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/d74f4a1fff340bf4cf02101d5bfda7e8.json","name":"女孩_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/66d2f8e8c531a4a8583e5faf2cf35e41.json","name":"女孩_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/546d11d5c1abbe2a0e442fe4816718b7.png","name":"女孩_tex.png"}},{"answers":[{"isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/66fe3a8fe9cd81ebb0a20b4fb134443f.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6dfd436c533f44e8e9fdd594458576.png"},{"isRight":"1","audioUrl":"http://staging-teach.cdn.ireadabc.com/5d8c6991fabc4bf37a0055bb37eac8b3.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/b2b296923e5fd09e77cd29fd3883f78e.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/3fed3a7bacc07dfb84de7196a50d39ab.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/9f9361601b4f2dbd60f037c6996a5af6.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/2f65d31e390318626fce1180bb09b2ea.png"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/8c1833c5a38efea3394ad78a44cd8801.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/59a3efbfa3df99100e8810cbcddef107.png","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.7416666666666667,"imgScale":0.7785451197053408,"mapScale":0.7416666666666667,"picX":798.6899999999999,"picY":181.03,"rect":{"x":692.15,"y":74.49,"width":213.08,"height":213.08}}],"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/6db25cc732cb592dd26295aaefdd016a.json","name":"FT01测试_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/9223e48368163e5d2bd556aa869b4610.json","name":"FT01测试_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/f7314ee89b8f27dc6b7cfcd6831ed728.png","name":"FT01测试_tex.png"}}],"bg":{"rect":{"x":101.33333333333331,"y":0,"width":949.3333333333334,"height":534},"picUrl":"http://staging-teach.cdn.ireadabc.com/0b6497174aed7ae05127d1eb8c29d94a.jpg"},"title":{"val":"Find Body Part","audioUrl":"http://staging-teach.cdn.ireadabc.com/8f5559c935b390efdea299ad568d3bd9.mp3"}}';
const data = JSON.parse(dataJson);
return data;
},
......@@ -113,15 +113,6 @@ cc.Class({
}
}
//循环处理序列帧
let frames = exercises.frames;
for (let j = 0; j < frames.length; ++j) {
let frame = frames[j];
if (frame.picUrl) {
this._imageResList.push({ url: frame.picUrl });
}
}
let hotZoneItemArr = exercises.hotZoneItemArr;
for (let j = 0; j < hotZoneItemArr.length; ++j) {
......@@ -273,7 +264,7 @@ cc.Class({
bgNode.opacity = 255;
//如果客户自定义背景图片,则进行替换
if (this.data.bg.picUrl) {
const spr = bgNode.getComponent(cc.Sprite)
cc.find('Canvas/decorate').active = false;
......@@ -485,104 +476,54 @@ cc.Class({
const centerPart = cc.find('Canvas/stage/centerPart');
centerPart.scale = this._mapScaleMin;
if (this._curExercise.frames) {
this.setOneAnima(this._curExercise);
if (centerPart.picArr) {
for (let i = 0; i < centerPart.picArr.length; ++i) {
centerPart.picArr[i].removeFromParent();
}
}
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.picArr.push(spr.node);
//默认显示第一帧动画
if (i == 0) {
spr.node.active = true;
}
else {
spr.node.active = false;
}
let picMaxW = centerPart.width;
let picMaxH = centerPart.height;
setSprNodeMaxLen(spr.node, picMaxW, picMaxH);
});
if (centerPart.bubbleArr) {
centerPart.bubbleArr.forEach((bubble, i) => {
bubble.removeFromParent();
});
}
if (centerPart.bubbleArr) {
centerPart.bubbleArr.forEach((bubble, i) => {
bubble.removeFromParent();
});
}
centerPart.bubbleArr = [];
centerPart.bubbleArr = [];
for (let i = 0; i < this._curExercise.hotZoneItemArr.length; ++i) {
for (let i = 0; i < this._curExercise.hotZoneItemArr.length; ++i) {
let hotZoneItem = this._curExercise.hotZoneItemArr[i];
let hotZoneItem = this._curExercise.hotZoneItemArr[i];
this.getSprNodeByUrl(hotZoneItem.pic_url, (bubbleSpr) => {
this.getSprNodeByUrl(hotZoneItem.pic_url, (bubbleSpr) => {
if (centerPart.bubbleArr[i]) {
centerPart.bubbleArr[i].removeFromParent();
}
if (centerPart.bubbleArr[i]) {
centerPart.bubbleArr[i].removeFromParent();
}
let bubble_bg = cc.find('Canvas/stage/centerPart/bubble_bg');
let bubble_bg = cc.find('Canvas/stage/centerPart/bubble_bg');
bubbleSpr.node.parent = bubble_bg;
console.log(hotZoneItem.rect.x, hotZoneItem.rect.y);
bubbleSpr.node.parent = bubble_bg;
console.log(hotZoneItem.rect.x, hotZoneItem.rect.y, bubble_bg.width, bubble_bg.height);
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);
}
else {
x = x - bubble_bg.width / 2;
}
let x = hotZoneItem.picX / hotZoneItem.mapScale * this._mapScaleMin;
x = x - bubble_bg.width / 2;
let y = hotZoneItem.picY / hotZoneItem.mapScale * this._mapScaleMin;
y = bubble_bg.height/2 - y;
if (y < bubble_bg.height / 2) {
y = bubble_bg.height / 2 - y;
}
else {
y = - (y - bubble_bg.height / 2);
}
bubbleSpr.node.x = x;
bubbleSpr.node.y = y;
bubbleSpr.node.scale = 0;
centerPart.bubbleArr[i] = bubbleSpr.node;
bubbleSpr.node.x = x;
bubbleSpr.node.y = y;
bubbleSpr.node.scale = 0;
centerPart.bubbleArr[i] = bubbleSpr.node;
bubbleSpr.node.addComponent(cc.Button)
bubbleSpr.node.on('click', () => {
bubbleSpr.node.addComponent(cc.Button)
bubbleSpr.node.on('click', () => {
playAudioByUrl(hotZoneItem.audio_url, () => {
playAudioByUrl(hotZoneItem.audio_url, () => {
});
});
});
cc.tween(bubbleSpr.node)
.to(0.7, { scale: 1 }, { easing: 'cubicIn' }).call(() => {
cc.tween(bubbleSpr.node)
.to(0.7, { scale: 1 }, { easing: 'cubicIn' }).call(() => {
}).start();
});
}
}).start();
});
}
},
......@@ -673,6 +614,8 @@ cc.Class({
this.addCircleSound();
this._curExercise.isAnswered = false;
this._cantouch = true;
},
......@@ -803,10 +746,11 @@ cc.Class({
this._answer_node.scale = this._mapScaleMin;
this._cantouch = true;
const centerPart = cc.find('Canvas/stage/centerPart');
this._curExercise.isAnswered = true;
//播放动画
this.animation(centerPart, centerPart.picArr, 0, 80);
this.showDragonAnima();
})
.start();
},
......@@ -840,65 +784,89 @@ cc.Class({
circle.blackMask.active = true;
},
curDragonDisplay: null,
setOneAnima(data) {
const picNode = cc.find('Canvas/stage/centerPart');
/**
* 播放序列针动画
* @param parItem
* @param arr 图片数组
* @param nextIndex 下一图片顺序
* @param intervalTime 间隔时间
*/
animation(parItem, arr, nextIndex , intervalTime ){
if(!parItem){
return;
}
if(!arr || arr.length == 0){
return;
}
if (picNode.animaNode) {
picNode.animaNode.removeFromParent();
}
const animaNode = new cc.Node();
animaNode.parent = picNode;
animaNode.x =0;
animaNode.y = 0;
picNode.animaNode = animaNode;
let tNextIndex = nextIndex;
//如果相等,则表示一轮播放结束,将播放顺序重置为0
if(nextIndex == arr.length){
tNextIndex = 0;
}
const dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);
//暂停动画
if(parItem.animationStop){
this.curDragonDisplay = dragonDisplay;
//隐藏上一张图
if(nextIndex > 0){
arr[nextIndex - 1].active = false;
}
else if(nextIndex == 0){
arr[nextIndex].active = false;
}
const image = data.texPngData.url//"http://staging-teach.cdn.ireadabc.com/5a0c5af3e952acd0ac83a6e5c6f03ff1.png";
const ske = data.skeJsonData.url//"http://staging-teach.cdn.ireadabc.com/bd825dcceea298d1146be8067ae3d17f.json";
const atlas = data.texJsonData.url//"http://staging-teach.cdn.ireadabc.com/246f8991b729fa3e5a7f4802de828efa.json";
cc.loader.load(image, (error, texture) => {
return;
}
cc.loader.load({url: atlas, type: 'txt'}, (error, atlasJson) => {
//console.log('nextIndex', tNextIndex);
cc.loader.load({url: ske, type: 'txt'}, (error, dragonBonesJson) => {
//隐藏上一张图
if(nextIndex > 0){
arr[nextIndex - 1].active = false;
}
const atlas = new dragonBones.DragonBonesAtlasAsset();
atlas.atlasJson = atlasJson;
atlas.texture = texture;
arr[tNextIndex].active = true;
const asset = new dragonBones.DragonBonesAsset();
asset.dragonBonesJson = dragonBonesJson;
setTimeout(() => {
dragonDisplay.dragonAtlasAsset = atlas;
dragonDisplay.dragonAsset = asset;
let nextIndex = tNextIndex + 1;
let json = JSON.parse(asset.dragonBonesJson);
let armatures = json["armature"];
// console.log('armatures: ', armatures);
let armatureNames = [];
for (let i = 0; i < armatures.length; i++) {
armatureNames.push(armatures[i].name);
}
// console.log('armatureNames: ', armatureNames);
if (armatureNames.length > 0) {
let defaultArmatureName = armatureNames[0];
dragonDisplay.armatureName = defaultArmatureName;
// let animationNames = dragonDisplay.getAnimationNames(defaultArmatureName);
let defaultArmature = armatures[0];
let animations = defaultArmature.animation;
let animationNames = [];
for (let i = 0; i < animations.length; i++) {
animationNames.push(animations[i].name);
}
this.animation(parItem, arr, nextIndex, intervalTime);
dragonDisplay.animaNames = animationNames;
console.log('animaNode: ', animaNode);
animaNode.addComponent(cc.Button)
animaNode.on('click', () => {
if(this._curExercise.isAnswered){
console.log('anima node clicked ~~~');
this.showDragonAnima();
}
})
}
}, intervalTime);
},
});
});
});
},
showDragonAnima() {
if (this.curDragonDisplay && this.curDragonDisplay.animaNames.length > 0) {
this.curDragonDisplay.playAnimation(this.curDragonDisplay.animaNames[0], 1);
}
},
......
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