H5场景小动画实现之PixiJs实战
最新回答
山前冥想
2024-03-27 15:16:44
实际实现效果：【注：请在H5微信打开看效果】
event.midea.com/act/mys...
我们给每个元素单独设置一些属性来满足我们的动效。主要实现思路如下：接下来，我们将按照这个思路来阐述我们的实现过程。
我们给每个元素单独设置一些属性来满足我们的动效。主要实现思路如下：接下来，我们将按照这个思路来阐述我们的实现过程。
本次场景都是一整屏，所以先声明宽高：创建舞台（stage）和渲染器 (renderer)。舞台（本例中objPixiContainer ）：所有要渲染的对象都必须连接到舞台中才能被显示出来，舞台处于整个树形展示结构的最底层，可以理解为背景。渲染器（本例中pixiRender ）：选用canvas或webGL进行渲染的一个区域。其中，autoDetectRenderer方法根据浏览器的支持情况，选择用WebGL还是Canvas去绘制画面，默认是WebGL。但是因为在我司设计师的手机（ip 6sp）上多次打开后出现画面黑屏闪动的副作用，因此选用强制使用CanvasRenderer来进行渲染。
运行，canvas已经渲染到了全屏幕上：画布黑乎乎的，于是我们摆点元素上去：创建精灵（sprite）。特殊的图片对象被洞老叫做精灵图。你可以控制它们的位置，尺寸以及其他许多有用的可以制作交互式动画图形的属性。Pixi有一个 Sprite 类，它是创建游戏精灵的通用方式。
实现效果为：坑：场景内的滚动条位置，最好用相对位移来算，不然满屏全是绝对位移，改起来非常头疼。到这里，基本整个画卷可以基本动起来了，就剩一下小元素了。比如突然移动到某个点，突然蹿出来的狼影。这里，我们用到了TweenJS。
动画效果实现思路：实现效果为：4. 声音管理：对声音的预加载，我们使用了audio标签的preload来实现纳拦升：但是我们很快发现，在微信浏览器中，ios11等系统的限制使得音频衡简没办法自动播放，因此，我们使用一下方法来处理：这个原理其实是利用了微信WeixinJSBridgeReady的接口，这个接口是对手机的音频自动播放限制进行处理过了的。经过这样特殊处理后，在微信浏览器中就可以自动播放音频了。
相关参考：createjs.cc/src/docs/tw... pixijs.download/release... juejin.im/entry/58f864d... github.com/pbakaus/scro... jianshu.com/p/3836aa0fd... 探讨判断横竖屏的最佳实现 逃不掉的四字魔咒
热门标签
