骨骼动画实现秘密!闲鱼 Flutter 互动引擎告诉你

本文介绍Candy引擎中骨骼动画的实现原理与过程,包括骨架渲染、动画实现及性能表现,展示了在闲鱼币业务中的应用案例。

简介: 代表骨骼动画是一种通过控制骨骼参数来实现多帧动画的方式,区别于 GIF 的不连贯和序列帧的体积大,骨骼动画有较好的灵活性和流畅性。目前骨骼动画已经被大规模地在游戏和动画中所使用,大有一种取代帧动画的趋势,Candy 互动引擎对骨骼动画的支持自然是必不可少的一环。

1.jpg

作者|马骁(尘萧)
出品|阿里巴巴新零售淘系技术部

前言

代表骨骼动画是一种通过控制骨骼参数来实现多帧动画的方式,区别于 GIF 的不连贯和序列帧的体积大,骨骼动画有较好的灵活性和流畅性。目前骨骼动画已经被大规模地在游戏和动画中所使用,大有一种取代帧动画的趋势,Candy 互动引擎对骨骼动画的支持自然是必不可少的一环。

从工具入手

动画是互动中很重要的一环,通过恰到好处的动画形式往往可以给用户更加新鲜的体验。由于动画制作是一项需要和 UED 高度合作的工作,面对 UED 无尽的参数变更,选择一个好用的工具就变得至关重要,毕竟谁也不希望自己在开开心心的敲代码的时候 UED 过来找你调动画参数。参考行业目前的工具链体系,并从中选择出一套适合我们的工具是比较好的选择。

屏幕快照 2020-03-13 下午5.58.49.png

先看曾被 Flutter 官方推荐过的骨骼动画制作工具 Flare,其优势在于对于 Flutter 的支持较为完善。但是问题在于这套工具对于设计师来说比较陌生,而且.flr格式是一个全新的格式不够通用,所以最终我们放弃了这个方案。

为了配合集团现有的互动工具链,我们把目光放到了前端领域,白鹭引擎(Egret)是一个在前端领域小有名气的游戏引擎,其

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值