Мультипликация по ключевым кадрам

Мультипликация по ключевым кадрам (англ. key frame; в итальянском — fotogramma chiave) — это техника, в которой ключевой кадр определяет начальное, промежуточное и финальное состояние анимации. После задания ключевых кадров (key frames) возможно создание промежуточных кадров, что называется интерполяцией или интеркассацией (англ. inbetweening, интеркалирование).

В традиционной мультипликации ключевые кадры обычно рисуются ведущими аниматорами, в то время как промежуточные кадры исполняются ассистентами-аниматорами (интеркалаторами). В компьютерной анимации аниматор также определяет только ключевые кадры, а операция интерполяции выполняется автоматически программным обеспечением. Этот подход, называемый keyframing (кейфрейминг, анимация по ключевым кадрам), применяется к изменениям движения, формы (зачастую с использованием так называемых «shape hints», или «подсказок формы»^[1]) и цвета.

Ключевые кадры активно используются в производстве цифрового видео как в 3D, так и в 2D, на компьютерах и мобильных устройствах^[2].

Ключевые кадры в Blender

Ключевые кадры в Adobe Premiere Pro

Сравнение аналоговых и цифровых ключевых кадров. Последние могут быть созданы вручную либо автоматически с помощью ПО, результат визуально может быть идентичен.

В каждом ключевом кадре форма меняется по виду или положению

В веб-разработке существует множество техник создания анимаций с использованием ключевых кадров:

CSS3

Пример^[3]:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: filmato 5s infinite;
}

@keyframes filmato {
  from {top: 0px;}
  to {top: 200px;}
}

Canvas HTML5

Пример^[4]:

window.requestAnimFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
};

WebGL

Пример^[5]:

var keys = [0, 0.25, 1];
var values = [new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(0, 2, 5)];

SVG

Пример с CSS3^[6]:

.left-leg {
  animation: danza 2s infinite alternate;
}
@keyframes danza {
  100% {
    transform: rotate(3deg);
  }
}

Пример с SMIL^[6]:

<svg viewBox="0 0 127.9 178.4">
  <path d="M37.6,138.8c0 ... ">
    <animate attributeName="fill" dur="5000ms" to="#f06d06" fill="freeze" />  
  </path>
</svg>

Adobe Flash

С 31 декабря 2020 года устаревший^[7]

Ключевые кадры в Adobe Flash с уровнями на временной шкале

GIF

Ключевые кадры изображения в формате GIF

X3D

Пример^[8]:

<x3d width='500px' height='400px'>
    <scene>
        <transform DEF="ball"> 
            <shape>
		        <appearance>
                    <material diffuseColor='1 0 0'> </material>
                </appearance>
                <sphere></sphere>
	            </shape>
        </transform>
    </scene> 
</x3d>

O3D

Пример^[9]:

 if s % config['n_keyframes_per_n_frame'] == 0 \
                    and t % config['n_keyframes_per_n_frame'] == 0:
                print(
                    "Fragment %03d / %03d :: RGBD matching between frame : %d and %d"
                    % (fragment_id, n_fragments - 1, s, t))
                [success, trans,
                 info] = register_one_rgbd_pair(s, t, color_files, depth_files,
                                                intrinsic, with_opencv, config)

OpenGL

Пример^[10]:

struct MyVertex_VNTVN
{
    float x, y, z;       
    float nx, ny, nz;  
    float s0, t0;        
    float x1, y1, z1;    
    float nx1, ny1, nz1; 
}