不知道你有没有见过这种typescript
或者api
以上两案例来自于
网易哒哒团队开发的爆款H5
框架
这种条漫形式的H5是否是带给你们眼前一亮的感受,这篇文章主要带你们揭秘如何制做这种动态条漫工具
你们能够扫码体验条漫:oop
在进入内容介绍前,先来介绍一下框架选型,为何选择了Egret引擎来作动态条漫开发工具
why Egret动画
从上面的一张主流游戏框架引擎对照表,能够很明显的找到Egret相对于其余游戏动画引擎的优势:ui
工具流this
在Egret中动画主要分为三类:spa
在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;
}
}
});
}
复制代码
若是以为本文还不错,不要吝啬您的赞哦~