不知道你有沒有見過這種typescript
或者api
以上兩案例來自於
網易噠噠團隊開發的爆款H5
markdown
這種條漫形式的H5是否是帶給你們眼前一亮的感受,這篇文章主要帶你們揭祕如何製做這種動態條漫框架
你們能夠掃碼體驗條漫:工具
在進入內容介紹前,先來介紹一下框架選型,爲何選擇了Egret引擎來作動態條漫oop
why Egret開發工具
從上面的一張主流遊戲框架引擎對照表,能夠很明顯的找到Egret相對於其餘遊戲動畫引擎的優勢:動畫
工具流ui
在Egret中動畫主要分爲三類:this
在Egret周邊工具中經過Egret DragonBones生成動畫
製做逐幀動畫
步驟:
DragonBones
工具,點擊建立項目製做補間動畫
步驟:
DragonBones
工具,點擊建立項目一圖勝千文
動畫原理
看完上面的動畫分析,下面咱們注重要解決的即是:
對應Api
核心步驟:
dragonBones
實例對象。將龍骨場景對象添加至畫布蒙層的高度
=總的幀數
* 滾動一幀的距離
* 時間縮放
+ 視窗高度
eui.scroller
對象,將其設置爲視窗大小,設置滾動容器
對象爲eui.scroller
的視域組件組件eui.scroller
監聽滾動高度,計算當前滾動條佔總可滾動高度的百分比
=已滾動高度
/(蒙層高度
-視窗高度
)dragonBones
場景一共擁有多少幀,經過總幀數
*當前百分比
,獲得用戶滑動到當前所在幀數具體實現代碼:
private timeScale: number = 2; // 時間縮放倍數,爲2時代表幀數切換放慢兩倍 private frameFactor: number = 26; // 滾動一幀須要耗費的距離 private totalFrames: number = 1672; // 總得幀數 private totalPrgress: number = this.timeScale * this.frameFactor * this.totalFrames; // 總的滾動長度 private dragonBones: Common.DragonParse; // 獲取動畫 private music: Common.Music; private audioKeys: audioKey[] = [{ start: 98, end: 138, key: 'audio_sewing_mp3', // 縫紉機 isPlayed: false, shouldStop: true, isLoop: false, volume: 1 }]; constructor () { // 龍骨腳手架中已添加COMMON公共方法,用來解析龍骨資源 this.dragonBones = Common.DragonParse.getDragonParseInstance(); this.egretFactory = this.dragonBones.getEgretFactory(); // 獲取龍骨資源 this.armatureDisplay = this.egretFactory.buildArmatureDisplay('listen_mother'); this.addView(); } private addView () :void { // 獲取視窗寬、高 const { stageWidth, stageHeight } = this.stage; // 建立滾動容器和填充塊 const group = new eui.Group(); const placeHolder = new eui.Group(); placeHolder.width = stageWidth; placeHolder.height = this.totalPrgress + stageHeight; group.addChild(placeHolder); //建立一個Scroller this.scroller = new eui.Scroller(); this.scroller.bounces = false; this.scroller.width = stageWidth; this.scroller.height = stageHeight; // 將group做爲滾動的視域組件 this.scroller.viewport = group; this.addChild(this.scroller); // 監聽滾動變化 this.scroller.addEventListener(egret.Event.CHANGE, this.onScroll, this); } private onScroll () :void { // 獲取滾動距離,並計算滾動百分比 const scrollV: number = this.scroller.viewport.scrollV; const progress: number = scrollV / this.totalPrgress; let curRateValue = ~~(this.totalFrames * progress); this.setSwipeAndButton(curRateValue); this.prevFrames = curRateValue; // 將設置龍骨動畫播放到指定幀數 this.setProgress(progress); // 播放指定音效 this.setMusic(progress) } private setProgress (progress: number) :void { this.armatureDisplay.animation.gotoAndStopByProgress(this.animationName, progress) } private setMusic(curRateValue: number): void { this.audioKeys.forEach((item) => { if (curRateValue >= item.start && curRateValue <= item.end) { if (!item.isPlayed && !this.musicIsMuted) { this.music = Common.Music.getMusic(item.key); this.music.play(0, item.isLoop ? 0 : 1); this.music.setVolumn(item.volume); item.isPlayed = true; } } else { if (item.isPlayed) { item.shouldStop && this.music.stop(); item.isPlayed = false; } } }); } 複製代碼
若是以爲本文還不錯,不要吝嗇您的贊哦~