spine动画融合与动画叠加

一.动画融合setMix

1.概述:两个动作之间的平滑过渡

参数duration为需要多少时间从fromAnimation过渡到toAnimation,过渡时间为动画重叠时间。

下图为动作切换时的情况(setAnimation),左红线为切换动作时刻,两个红线之间为动作切换时间,这之间动画播放为A与B的混合,A和B所占的权重是不断变化的,从A占的权重从100到0,B占的权重从0到100。右红线之后为动作B完全播放。

图1

下图是A动作后有B动作的情况(addAnimation)

图2

下图为错误的示例

图3

上图是错误,融合不是从A的切换时帧情况过渡到B的的第一帧,而是重叠过渡的。再说一遍,在动画的过渡过程中,A和B所占的权重是不断变化的,从A占的权重从100到0,B占的权重从0到100.下面的代码会证明这件事情

2.代码

(1)源码:

可以看到,如果有动作融合,会先spAnimation_apply(preAni)再spAnimation_mix(curAni, alpha)

那么怎么证明经过这两个变换,动画的权重是由apha值分配的呢?以下面的TransLate平移变换为例

(2)推导,证明动画的权重由apha决定:

平移变换的源码如下:

定义几个变量:

d1:preAni(之前动作)使原始骨骼x位置的改变值

d2:curAni(目前动作)使原始骨骼x位置的改变值

originX: Tpose中骨骼的x位置(原始位置)

红框中的代码,把+=换成=,代码变为

等式右面的bone->x为spAnimation_apply(preAni)后的值,即d1 + originX;

又知d2 = [prevFrameX + (self->frames[frameIndex + TRANSLATE_FRAME_X] – prevFrameX)*] * percent;

bone->data->x 为 originX

所以:

bone->x = (originX +d2 -(d1 + originX))*alpha + (d1 + originX)

= (d2-d1)*alpha + (d1 + originX)

= originX + alpha * d2 + (1 - alpha)*d1

bone->x= originX + alpha * d2 + (1 - alpha)*d1

3.demo

官方的动画walk动作

官方动画的jump动作

不融合,动作切换时有明显的生硬效果

融合0.2s,walk快播放完了才跳起

融合时间0.7s,walk刚开始,便切换成jump动作

二.动画叠加(trackIndex)

1.概述:

多层动画叠加,上层动作会覆盖(同一骨骼有动画,若上层骨骼没有动画,下层动画还是正常播放)下层动作

trackIndex为动画的层数。

2.代码:

还是上图的代码,可以看到for循环中遍历了所有的tracks,后面的tracks会覆盖前面的动画。

3.demo:

官方的打手枪动画

walk动作index为0,jump动作index为1,jump动作会覆盖walk动作。

walk动作index为1,jump动作index为0,walk动作会覆盖jump动作。

walk和shoot的叠加,就是变走路边打手枪的效果

备注:spine代码截取的是spine官方代码Version 2.3

spine动画融合与动画叠加的更多相关文章

  1. Spine学习五- spine动画融合

    在许多地方,都需要用到动画融合,unity的新版动画系统已经能够很方便的进行动画融合,那么使用spine的动画状态机的情况下,如何来进行动画融合呢? 官方有两种方案,一种是使用混合动作实现,另一种是使 ...

  2. AnimatorController动画融合树

    通过Unity动画状态机,能帮我们轻松处理转换各个动画片断,达到想要的效果,但是如果仅仅是一个个动画的硬生生的切换,那么看起来就非常突然,而不真实了,在质量要求比较高的游戏中,特别是动作游戏,我们就不 ...

  3. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  4. Unity---动画系统学习(6)---Avatar Mask动画融合、Layers动画分层、IK反向动力学

    1. 介绍 Avatar Mask(动画融合) 前面我们一直介绍的都是动画混合,一般用于解决边跑边转弯的问题.而动画融合一般用于解决例如边跑边挥手的问题. 简单说就是让跑步去控制腿的骨骼,挥手控制手的 ...

  5. 7种炫酷HTML5 SVG液态水滴融合分解动画特效

    这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效.这些SVG动画特效使一些HTML元素.如菜单.分页button.APP.选择框等元素的过渡动画像几粒水滴一样融合分解.效果很的酷 ...

  6. View动画和属性动画

    在应用中, 动画效果提升用户体验, 主要分为View动画和属性动画. View动画变换场景图片效果, 效果包括平移(translate), 缩放(scale), 旋转(rotate), 透明(alph ...

  7. Unity3D Mecanim 动画系统骨骼动画问题解决方法

    http://7dot9.com/2014/08/16/unity3d-mecanim%E5%8A%A8%E7%94%BB%E7%B3%BB%E7%BB%9F%E9%AA%A8%E9%AA%BC%E5 ...

  8. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  9. Android动画:模拟开关按钮点击打开动画(属性动画之平移动画)

    在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持3种动画: 逐帧动画(Frame Ani ...

随机推荐

  1. Spring注解问题,[action中注入service失败

    pring-mvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  2. 浅谈python 手机crash和app crash循环执行问题

    ----------------引子---------------- app自动化测试人员经常遇见的问题,第一:手机抛的异常导致脚本循环停止!!!!!!!!第二:app抛的异常导致脚本循环停止!!!! ...

  3. jmeter的http cookies管理器使用

    关于Cookie不过多介绍,测试UI的小伙伴们应该对此有深深的爱和恨~ 本文介绍如何:1.获取Cookie.2.保存Cookie 3.引用Cookie 最终达到Cookie类似无法失效的目的~ Coo ...

  4. Python(五)编程小实例

    Python(五)编程小实例 抓取网页信息,并生成txt文件内容! Python抓取网页技能--Python抓取网页就是我们常看见的网络爬虫,我们今天所要用到的就是我们Python中自带的模块,用这些 ...

  5. oracle监听(lsnrctl)详解解读

    (总结)Oracle监听服务lsnrctl参数及查询状态详解   lsnrctl命令常用参数详解: lsnrctlstart启动指定的监听器 stop关闭指定的监听器 status显示监听器的状态.s ...

  6. 浅谈!SQL语句中LEFT JOIN ON WHERE和LEFT JOIN ON AND的区别

    今天的工作学习之路是一个数据库的小知识,当时没有区分出所以然,特此记录分享一下子. 众所周知,数据库的表都是单独存在的,但是当我们进行联合查询(多表查询)时,我们获得数据库返回的值时就好像在一张表里一 ...

  7. PN结加正向偏置电压 其空间电荷区为何变窄

    理论基础:导体是内部具有较多可以自由移动的电荷的物体. 绝缘体是内部没有或者有很少可以自由移动的电荷的物体. +代表空穴带正电 -代表电子带负电 两竖线之间表示无自由移动电子或空穴部分,相当于绝缘体 ...

  8. Jmeter-元件的作用域和执行顺序

    Jmeter有8类可执行的元件,包括:逻辑控制器.配置元件.定时器.前置处理器.取样器.后置处理器.断言和监听器. 测试计划和线程组不属于元件. 1)取样器(Sampler):不与其他元件发生交互作用 ...

  9. node.js平台下,利用cookie实现记住密码登陆(Express+Ejs+Mysql)

    本博文需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.就是博文: 1.下载Mysql数据库,安装并配置 创建用户表供登录使用: 2.node.js平台 ...

  10. 基于均值漂移的三维网格分割算法(Mean Shift)

    mean shift算法是一种强大的无参数离散数据点的聚类方法,其在图像平滑.图像分割以及目标跟踪等方面都有着广泛的应用.[Yamauchi et al. 2005]基于mean shift算法提出了 ...