如何

序列动画


如何对动画进行排序

组合多个剪辑以形成卡通片的一种直接方法是为每个动画片段提供开始时间。

设计

概观

相机显示了一扇带门的建筑物。相机移近门并停止。门打开,相机进入房间。当摄像机进入房间时,房间里会有灯光亮起。门关闭,相机扫过房间。

由于目的是展示如何制作影片剪辑,因此房间和门将简单地用没有纹理的网格制作。

表演者

相机 - 通用
门 - 右侧铰接,向内打开
聚光灯 - 带球体以显示位置

顺序时间表

Time Table

对于每个表演者,您可以为每个定时事件创建一个带有关键点的动画。

动画

对于相机
移动相机会更改相机的位置(向量3)。扫描相机是绕y轴旋转(浮动)。

由于动画只能更改一个属性,因此相机需要两个动画。

移动摄像机的关键点将是时间0,摄像机将从建筑物开始向上和向下移动,直到它在门外3秒钟。
当门打开时,摄像机将保持其位置2秒,然后在5秒钟时,摄像机将以远离门的角度向前移动到室内,在8秒时停止。

相机将不会旋转9秒钟,然后相机将持续14秒钟旋转180度以对着门。

摄像机的关键值将是它在第0,3,5和8帧的位置以及在0,9和14秒的旋转。

//for camera move forward
var movein = new BABYLON.Animation("movein", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

var movein_keys = []; 

movein_keys.push({
    frame: 0,
    value: new BABYLON.Vector3(0, 5, -30)
});

movein_keys.push({
     frame: 3 * frameRate,
     value: new BABYLON.Vector3(0, 2, -10)
});

movein_keys.push({
    frame: 5 * frameRate,
    value: new BABYLON.Vector3(0, 2, -10)
});

movein_keys.push({
    frame: 8 * frameRate,
    value: new BABYLON.Vector3(-2, 2, 3)
});

 movein.setKeys(movein_keys);

//for camera to sweep round
var rotate = new BABYLON.Animation("rotate", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

var rotate_keys = []; 

rotate_keys.push({
   frame: 0,
   value: 0
});

rotate_keys.push({
   frame: 9 * frameRate,
   value: 0
});

rotate_keys.push({
   frame: 14 * frameRate,
   value: Math. PI
});

rotate.setKeys(rotate_keys);

对于门
门将围绕y轴围绕铰链扫过浮动点旋转。打开和关闭旋转每个需要2秒。

关键点将是0,3,5和13和15秒的时间。

扫描的关键值是它在帧处围绕y轴的旋转。

//for door to open and close
var sweep = new BABYLON.Animation("sweep", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

var sweep_keys = []; 

sweep_keys.push({
   frame: 0,
   value: 0
});

sweep_keys.push({
   frame: 3 * frameRate,
   value: 0
});

sweep_keys.push({
   frame: 5 * frameRate,
   value: Math.PI/3
});

sweep_keys.push({
   frame: 13 * frameRate,
   value: Math.PI/3
});

sweep_keys.push({
   frame: 15 * frameRate,
   value: 0
});

sweep.setKeys(sweep_keys);

对于灯光 强度会有所不同(浮动)。这些将是一系列聚光灯。

灯的关键点保持关闭7秒,在10秒时达到全强度,直到14秒后关闭。

//for light to brighten and dim
var lightDimmer = new BABYLON.Animation("dimmer", "intensity", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

var light_keys = []; 

light_keys.push({
    frame: 0,
    value: 0
});

light_keys.push({
   frame: 7 * frameRate,
   value: 0
});

light_keys.push({
    frame: 10 * frameRate,
    value: 1
});

light_keys.push({
    frame: 14 * frameRate,
    value: 1
});

light_keys.push({
   frame: 15 * frameRate,
   value: 0
});

lightDimmer.setKeys(light_keys);

动画片

现在只需同时运行所有剪辑

scene.beginDirectAnimation(camera, [movein, rotate], 0, 25 * frameRate, false);
scene.beginDirectAnimation(hinge, [sweep], 0, 25 * frameRate, false);
scene.beginDirectAnimation(spotLights[0], [lightDimmer], 0, 25 * frameRate, false);
scene.beginDirectAnimation(spotLights[1], [lightDimmer.clone()], 0, 25 * frameRate, false);

完成序列

进一步阅读

基本

基本
动画分组动画简介

高级

结合动画