企鹅电竞动效揭秘

egame-animation

企鹅电竞作为一款游戏直播应用,送礼、运营活动一直占据着主要的收入来源,而动效则是其中必不可少的元素,目前企鹅电竞涵盖了pc、H5、App等多个业务场景,下面我们聊聊在这些场景下都有哪些动效以及实现方式?

送礼动效

普通礼物

电竞app的礼物主要包涵普通礼物和豪华礼物,普通礼物是和横幅一起出现,这里我们做了横幅动效,首先是横幅入场和出场、其次是礼物会有散落的效果,送的礼物价值越高,效果越好,可以看下demo效果

 

横幅动效主要是利用css3,礼物散落效果则是采用canvas粒子动画来实现,前端和终端都是各自实现,共用一套动效参数。 demo地址

豪华礼物

土豪们的专属礼物则要更加酷炫,web端和移动端均采用透明视频方案来实现,感兴趣的童鞋可以去围观《精准光影动效解决之道-透明视频》

 

此外,电竞app内大多是weex页面,weex完全可以共享终端的能力,内部实现了一个组件,调用这个组件就能轻松展现完美的动画。

<material        
    ref="material"
    class="material"   
    :mid="11939"  //拉取视频素材ID
    loop="true"
    autoplay="true"
    spostop="true"
    @stop="onStop"
    @error="onError"
>
</material>

 

运营动效

 

运营活动往往开发周期都较短,如果动效较复杂,实现成本较高的话,可以考虑采用lottie-web快速实现,其中的核心就是bodymovin插件,支持渲染为svg、canvas,多终端通用,效果一致。

守护勋章效果

 

这种勋章动画在电竞移动端和pc端都存在,app内采用webp,因为webp体积小,性能好,而pc端则使用apng格式,原因是兼容性相对更好些。

尺寸 效果 性能 兼容性
webp
apng
gif

最后

其实项目中的动效远不止这些,这里只列举了一些典型的例子,面对这些动效,实现方式有很多,透明视频、lottie、gif、apng、webp、逐帧动画等等,甚至可以组合使用,另外建议前期参与动效设计阶段,这样会更有想象空间。好了,动效就聊到这,欢迎来企鹅电竞给主播们打call~。

发表评论