需求场景
主人公行走路过几个城市,沿途展示城市风貌与特色建筑,随着其前进周边的场景物体开始出现动画,若主人公后退则周围场景进行倒序消失的动画,具体表现与正序或倒序播放一段影片类似。除了出现动画外,场景物体由于层级景深不同,运动速度不同,即产生视差效果。
主人公行走路过几个城市,沿途展示城市风貌与特色建筑,随着其前进周边的场景物体开始出现动画,若主人公后退则周围场景进行倒序消失的动画,具体表现与正序或倒序播放一段影片类似。除了出现动画外,场景物体由于层级景深不同,运动速度不同,即产生视差效果。
前端优化是个很广泛的命题,铺开去得出本书了(事实上我也没那本事),实际上市面上也有很多相关的书籍。动画与交互上的性能问题最容易被察觉,特别是在机能较低的移动端。由于自己有过一段移动开发的经历,较为关注这块且作为一个爱拾人牙慧的切图狗,现将一些他人成熟的优化方法总结如下:
当然,所有的优化都是有场景,请根据实际的场景去选择最优的方案使用。
某日移动端有一需求:要求一 App Logo 有一层外阴影闪动效果,实现起来倒也不复杂。简单粗暴直接在 keyframes
中定义 box-shadow
动画即可交差,最终代码如下: