spine动画融合与动画叠加
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动画融合与动画叠加的更多相关文章
- Spine学习五- spine动画融合
在许多地方,都需要用到动画融合,unity的新版动画系统已经能够很方便的进行动画融合,那么使用spine的动画状态机的情况下,如何来进行动画融合呢? 官方有两种方案,一种是使用混合动作实现,另一种是使 ...
- AnimatorController动画融合树
通过Unity动画状态机,能帮我们轻松处理转换各个动画片断,达到想要的效果,但是如果仅仅是一个个动画的硬生生的切换,那么看起来就非常突然,而不真实了,在质量要求比较高的游戏中,特别是动作游戏,我们就不 ...
- jQuery animate方法开发极客标签Logo动画融合效果
在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...
- Unity---动画系统学习(6)---Avatar Mask动画融合、Layers动画分层、IK反向动力学
1. 介绍 Avatar Mask(动画融合) 前面我们一直介绍的都是动画混合,一般用于解决边跑边转弯的问题.而动画融合一般用于解决例如边跑边挥手的问题. 简单说就是让跑步去控制腿的骨骼,挥手控制手的 ...
- 7种炫酷HTML5 SVG液态水滴融合分解动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效.这些SVG动画特效使一些HTML元素.如菜单.分页button.APP.选择框等元素的过渡动画像几粒水滴一样融合分解.效果很的酷 ...
- View动画和属性动画
在应用中, 动画效果提升用户体验, 主要分为View动画和属性动画. View动画变换场景图片效果, 效果包括平移(translate), 缩放(scale), 旋转(rotate), 透明(alph ...
- 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 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- Android动画:模拟开关按钮点击打开动画(属性动画之平移动画)
在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持3种动画: 逐帧动画(Frame Ani ...
随机推荐
- 基于cxf开发restful风格的Web Service
一.写在前面 webservice一些简单的其他用法和概念,就不在这里赘述了,相信大家都可以在网上查到,我也是一个新手,写这篇文章的目的一方面是想记录自己成长的历程,另一方面是因为学习这个的时候花了点 ...
- Spring Data JPA,一种动态条件查询的写法
我们在使用SpringData JPA框架时,进行条件查询,如果是固定条件的查询,我们可以使用符合框架规则的自定义方法以及@Query注解实现. 如果是查询条件是动态的,框架也提供了查询接口. Jpa ...
- SQL AlawaysOn 之二:添加组织和域用户
1.在管理工具打开Active Directory 用户和计算机 2.在域控制器名称下面右键 选择 新建--组织单位, 3.输入组织名定,点确定 4.在组织右键--新建--用户 5.输入用户信息,点 ...
- cuda编程学习2——add
cudaMalloc()分配的指针有使用限制,设备指针的使用限制总结如下: 1.可以将其传递给在设备上执行的函数 2.可以在设备代码中使用其进行内存的读写操作 3.可以将其传递给在主机上执行的函数 4 ...
- autoLayer:一基本布局
我不会写博客,写的不好请物见怪,这个autoLayer我就直接上图了: 本人环境:IDE(Xcode6)SDK(IOS8) 准备工作:找一个横图psd(由于我不会切图,我只会简单的描述一下图片处理), ...
- Excel制作多选下拉框代码以及图示
1.首先 点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...
- Unity 3D Framework Designing(5)——ViewModel之间如何共享数据
对于客户端应用程序而言,单页应用程序(Single Page Application)是最常见的表现形式.有经验的开发人员往往会把一个View分解多个SubView.那么,如何在多个SubView之间 ...
- PRINCE2的价值是什么?
很多学员在进行培训的过程中或者培训后,都会对于PRINCE2带来的价值有各种各样的看法.但是从更加官方一点的角度来说,PRINCE2会有一部分比较通用 的观点. PRINCE2 可以应用到任何类型的项 ...
- 【转】HTML5 本地存储五种方案
1.LocalStorage LocalStorage就是Key-Value的简单键值对存储结构,Web Storage除了localStorage的持久性存储外,还 有针对本次回话的sessionS ...
- 南京.NET线下活动后续—一对一技术交流
4月1日星期六,发生了几件大事: 1.网民与老板花式斗图,庆祝愚人节. 2.国务院设立雄安新区,定为千年大计 3.纳龙科技的程序猿赴镇江斯诺物联科技进行一对一技术交流. 此次一对一交流活动是3月11日 ...