Google Analytics 是一款优秀的免费流量统计服务,集成也简单方便,直接引入一段脚本即可,也就这么稀里糊涂的用了好多年。因为自己在写一款自用的 WordPress 主题(也就是本博客使用的这款),一直在纠结页面访问速度这事儿,于是无关痛痒的事情也会变得有紧要起来,至于为啥且听我慢慢道来:
移动端视频最佳实践
之前的运营活动项目一直使用 Canvas 还原动画,费时费力不说,想要达到完美复刻设计稿动画简直难于上青天。一番折腾下来,设计师跟开发都感慨:“我太南了”!懒是人类进步之光,对于很多纯展示类型的运营活动页面用最少的开发资源达到最佳的动画效果,有没有银弹呢?有,那就是视频!
Pixi.JS 动画优化
背景
本次活动为展示类型的活动页,共包括开始、结束以及 8 个场景。每个场景以动画展示为主,每个场景有一个转场动画用于衔接下一个场景,另包含一个弹窗展示。与抖音地图项目相比,本次场景动画更为丰富复杂,但流程控制简单很多,无需回退重播需求,切场景之间有转场分割、不要求有所场景都存在同一个舞台上。但是由于场景多,动画复杂,那么解决性能问题成了重点。
视差长图 H5 实践
需求场景
主人公行走路过几个城市,沿途展示城市风貌与特色建筑,随着其前进周边的场景物体开始出现动画,若主人公后退则周围场景进行倒序消失的动画,具体表现与正序或倒序播放一段影片类似。除了出现动画外,场景物体由于层级景深不同,运动速度不同,即产生视差效果。
移动端视频播放踩坑
H5 中很多场景交互较少强调动画展示的场景都可以借助视频实现,而且能够实现 100% 视觉还原😝,对于设计师来说最终呈现效果可控,对开发来说极大地降低了工作量,运营因为工期减少也会开心,简直是一石三鸟的事情!不过移动端 video 还是有很多坑的,以下是我做的一点调研。