动画技术-关键帧(keyFrame)

关键帧是一种常用的动画技术,其基本原理是将动画序列中比较关键的帧提取出来,而其他帧根据时间用这些关键帧插值计算得到。

一个简单的关键帧结构:

typedef struct sKeyframe {

DWORD Time ;

D3DMATRIX matTransformation ;

}sKeyframe

这是一个非常简化的结构,只包含时间和矩阵。但从这个结构可以看出keyFrame技术最根本的含义。假设我们要创建一个正方形旋转并移动的动画。

如图,这个正方形在3个位置间旋转着移动。我们需要定义4个关键帧,每个关键帧都通过矩阵设定正方形相对于初始位置的偏转和偏移。

sKeyframe Keyframes[4] = {

{ 0, 1.00000f, 0.00000f, 0.00000f, 0.00000f,

0.00000f, 1.00000f, 0.00000f, 0.00000f,

0.00000f, 0.00000f, 1.00000f, 0.00000f,

0.00000f, 0.00000f, 0.00000f, 1.00000f; },

{ 400, 0.000796f, 1.00000f, 0.00000f, 0.00000f,

-1.00000f, 0.000796f, 0.00000f, 0.00000f,

0.00000f, 0.00000f, 1.00000f, 0.00000f,

50.00000f, 0.00000f, 0.00000f, 1.00000f; },

{ 800, -0.99999f, 0.001593f, 0.00000f, 0.00000f,

-0.001593f, -0.99999f, 0.00000f, 0.00000f,

0.00000f, 0.00000f, 1.00000f, 0.00000f,

25.00000f, 25.00000f, 0.00000f, 1.00000f; },

{ 1200, 1.00000f, 0.00000f, 0.00000f, 0.00000f,

0.00000f, 1.00000f, 0.00000f, 0.00000f,

0.00000f, 0.00000f, 1.00000f, 0.00000f,

0.00000f, 0.00000f, 0.00000f, 1.00000f; }

};

keyFrame4虽然与keyFrame1动画完全一样,但时间不同,所以要定义keyFrame4。

更新动画时首先要根据动画已经播放的时间计算出当前帧处于哪两个关键帧之间。

DWORD Keyframe = 0; // Start at 1st keyframe

for(DWORD i=0;i<4;i++) {

// If time is greater or equal to a

// key-frame's time then update the

// keyframe to use

if(Time >= Keyframes[i].Time)

Keyframe = i;

}

如果当前时间>=某个关键帧设定的时间,那么该关键帧就是当前帧的前一个关键帧。而下一帧就是后一个关键帧。如果前一个关键帧已经是最后一个关键帧,那么后一个关键帧也使用该帧。

DWORD keyframe2 = (Keyframe==LAST_KEYFRAME_ID)?Keyframe:Keyframe+1 ;

计算出两个关键帧后,根据当前时间和两个关键帧的时间进行插值计算,得到当前帧。

DWORD TimeDiff = Keyframes[Keyframe2].Time -

Keyframes[Keyframe].Time;

// Make sure there's a time difference to

// avoid divide-by-zero errors later on.

if(!TimeDiff)

TimeDiff=1;

float Scalar = (Time - Keyframes[Keyframe].Time)/TimeDiff;

// Calculate the difference in transformations

D3DXMATRIX matInt = /

D3DXMATRIX(Keyframes[Keyframe2].matTransformation) - /

D3DXMATRIX(Keyframes[Keyframe].matTransformation);

matInt *= Scalar; // Scale the difference

// Add scaled transformation matrix back to 1st keyframe matrix

matInt += D3DXMATRIX(Keyframes[Keyframe].matTransformation);

matInt就是计算出的当前帧的转换矩阵,用这个矩阵可以得到当前帧动画的位置。

这个例子是一个最简单的关键帧动画,因为这个动画的Frame只包含一个正方型而以,也就是 说该动画每一帧的Mesh是一样的。在稍微复杂些的情况中,比如一个人走动的动画。可以选取几个动作作为关键帧,如果使用简单的动画,每个关键帧要记录一 套mesh信息;如果使用骨骼动画,每个关键帧要记录骨骼的变换。这些情况中,需要插值计算的内容就复杂多了。不过根据时间,插值计算出当前帧仍是基础。

关键帧技术除了用于播放动画,还可以用于物体的运动。特别是固定路线的物体运动。

虽然我们谈到关键帧技术都是在3D动画中,不过2D游戏中也可以很好的使用。其实这个简单的例子就可以看成是一个2D动画关键帧的例子,只不过我们要使用2D转换矩阵。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas 的 keyframe 参数用于在动画中创建关键帧关键帧动画中的重要时间点,通过在关键帧上设置动画属性的值,可以控制动画在不同时间点上的状态和效果。 keyframe 是通过 @keyframes 规则定义的。@keyframes 规则是一个 CSS at-rule,它表示一个动画序列,可以在其中定义多个关键帧。每个关键帧指定了动画播放到该关键帧时的样式。 在定义一个关键帧时,可以使用百分比或者关键字来表示动画的时间点。例如,可以使用 "0%" 表示动画的起始点,"100%" 表示动画的结束点。在每个关键帧上,可以设置多个属性以控制动画效果。这些属性可以包括位置、大小、颜色、透明度等等。 Canvas 的 keyframe 参数用于在 JavaScript 中控制关键帧的使用。通过 keyframe 参数,我们可以在 Canvas 上创建一个帧动画,通过设置每一帧中的属性来实现动画效果。例如,在一个关键帧中,可以设置 Canvas 中的绘图属性(如颜色、大小、形状),然后在不同关键帧上更改这些属性,从而在Canvas上绘制出一个动画效果。 要创建一个 Canvas 的 keyframe 参数,可以使用 JavaScript 中的 requestAnimationFrame() 方法来实现每一帧的绘制和更新。在每一帧中,可以通过设置 Canvas 上的属性和绘制方法来实现不同关键帧的效果。 总的来说,Canvas 的 keyframe 参数可以帮助我们在动画中创建关键帧,通过设置每个关键帧上的属性来控制动画效果。通过JavaScript 中的 requestAnimationFrame() 方法,我们可以实现一个帧动画,每一帧的绘制和更新都可以通过 keyframe 参数来控制。这样,我们可以在 Canvas 上实现各种丰富多样的动画效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值