Pixi.JS 动画优化

背景

本次活动为展示类型的活动页,共包括开始、结束以及 8 个场景。每个场景以动画展示为主,每个场景有一个转场动画用于衔接下一个场景,另包含一个弹窗展示。与抖音地图项目相比,本次场景动画更为丰富复杂,但流程控制简单很多,无需回退重播需求,切场景之间有转场分割、不要求有所场景都存在同一个舞台上。但是由于场景多,动画复杂,那么解决性能问题成了重点。

banner

Read More »

视差长图 H5 实践

需求场景

主人公行走路过几个城市,沿途展示城市风貌与特色建筑,随着其前进周边的场景物体开始出现动画,若主人公后退则周围场景进行倒序消失的动画,具体表现与正序或倒序播放一段影片类似。除了出现动画外,场景物体由于层级景深不同,运动速度不同,即产生视差效果。

Read More »