我是javascript画布的新手，我正在尝试解决一些问题。我能够很好地创造这个数字，但它的实际运动对我来说很棘手。我能够在这里寻求关于如何挥手的帮助，但现在我想知道如何做更多。例如，是否有可能让人物挥手，向右走，然后上下跳？
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d"); // get Canvas Context object
let timestamp = Date.now();
let wave = false;
draw();
function draw() {
if(Date.now() < (timestamp+500)) return requestAnimationFrame(draw);
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle
context.beginPath();
context.lineWidth = 6;
context.stroke();
//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();
//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
if(wave) {
context.moveTo(200, 100);
context.lineTo(250, 130);
wave = false;
}
else {
context.moveTo(200, 100);
context.lineTo(250, 70);
wave = true;
}
context.stroke();
//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
timestamp = Date.now();
requestAnimationFrame(draw);
}<canvas id="canvas" width="400px" height="400px" >
Your browser does not support HTML5 Canvas element
</canvas>
答案 0 :(得分：1)
最简单的动画是通过一种称为关键帧的方法。
动画的每一步都称为一帧。对于电脑游戏，通常每秒60 -30帧（fps）
对于每个帧，您需要在新位置绘制角色。以60fps持续5秒即300帧。
您可以创建绘制300个帧中每个帧的函数，其中您已经计算出每个部分的x，y位置，但这是很多工作。
关键帧是一种减少工作量的方法，只需在动画中创建一些特定的关键点，让计算机锻炼其间的所有其他帧。
首先让我们设置动画循环。这个函数每帧调用一次，我们使用它来获取动画时间，清除画布并绘制动画。
requestAnimationFrame(mainLoop); // request the first frame
var startTime; // we need to have start time to match all the animations to.
var gTime; // We use this as a global time. All animation functions will reference this time
function mainLoop(time){ // time is passed automatically by requestAnimationFrame
if(startTime === undefined){ // this is the first frame so set as the start time
startTime = time;
}
gTime = time - startTime;
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
/* the render code will go here */
requestAnimationFrame(mainLoop); // request the next frame
}
在最基本的情况下，我们可以通过x，y位置为对象设置动画。
我们创建一个在一个位置绘制对象的函数。
function drawHead(x,y){
context.beginPath();
context.arc(x, y, 30, 0, Math.PI * 2, true);
context.fill();
}
在动画循环中，您现在可以绘制头部
drawHead(200,50);
但这不是动画，
下一步是创建关键帧并在它们之间进行插值。
假设我们有两个点x1,y1和x2,y2，我们希望在一段时间之间移动，比如说time = 2秒。
要在gTime = 1秒（中途）找到位置，我们得到两点之间的差异。
var dx = x2 - x1;
var dy = y2 - y1;
现在我们将时间作为总时间的一小部分
var fTime = gTime / time; // 1 / 2 = 0.5
将时间作为分数和两个位置之间的差异，我们可以乘以位置差
dx *= fTime;
dy *= fTime;
将其添加到起始位置
var x = x1 + dx;
var y = y1 + dy;
我们在1秒的时间内拥有物体的位置。
我们可以压缩代码
var fTime = gTime / time;
var x = (x2 - x1) * fTime + x1;
var y = (y2 - y1) * fTime + y1;
对于动画，您将有许多想要设置动画的内容，因此您可以创建一个通用函数，该函数将在给定开始时间和当前时间的任意两个数字之间进行补间。
// where v1, is start value, t1 is start time,
// v2, is end value, t2 is end time,
// and gTime is the global time
function tweenValue(v1, t1, v2, t2, gTime){
// to get the fraction of time
// first how far from the start time (gTime - t1)
// divided by the time between t1,t1
// gives (gTime - t1) / (t2 - t1); get the fraction of time between t1, t2
// which we plug directly into the formular
return (v2 - v1) * ((gTime - t1) / (t2 - t1)) + x1;
}
在动画中，您可能拥有100多个关键帧。您需要具有一个功能，可以根据当前时间找到正确的关键帧。这是一门科学，因为有各种各样的方法可以优化搜索。现在我们将使用最基本的搜索。
我们按如下方式定义一组关键帧，其中x，y位置和位于这些位置的时间。
headKeys = [
{x : 200, y : 50, time : 0}, // x,y,time (time is in seconds
{x : 300, y : 50, time : 1},
{x : 200, y : 50, time : 2}, // last frame will loop back
]
现在我们想要找到当前时间需要哪两个关键帧。当前时间可能在关键帧时间之外。为此，我们将循环任何键，因此如果时间超出关键帧时间，我们会调整键内部的时间。
function findKeys(keys, gTime){
// first get total time of keys
var start = keys[0].time;
var end = keys[keys.length - 1].time;
var totalTime = end - start;
var time = gTime - start; // get time relative to the start time
// loop the time in to the time between the start and end time (we need to make sure negative time works as well
time = ((time % totalTime) + totalTime) % totalTime;
// now time is at some value between and including start and less than end
// Now find the keys
var index = 0; // index of the keys
while(index < keys.length){ // could use while(true) but JS will not optimize un-terminated loops so we avoid that
if(keys[index].time <= time && keys[index+1].time > time){ // are these the two keys??
return index; // return the index of the first key
}
index ++;
}
return -1; // This will never happen unless you have some bad values in the keys array
}
所以，让我们付诸行动
const ctx = canvas.getContext("2d");
requestAnimationFrame(mainLoop);
var startTime;
var gTime;
//===============================================================================
// Animation code
function findKeys(keys, gTime){
var start = keys[0].time;
var end = keys[keys.length - 1].time;
var totalTime = end - start;
var time = gTime - start;
time = ((time % totalTime) + totalTime) % totalTime;
var index = 0;
while(index < keys.length){
if(keys[index].time <= time && keys[index+1].time > time){
return index;
}
index ++;
}
return -1;
}
function tweenValue(v1, t1, v2, t2, gTime){
return (v2 - v1) * ((gTime - t1) / (t2 - t1)) + x1;
}
function tweenCoords(key1, key2, gTime, result = {}){
var totalTime = key2.time - key1.time;
result.time = ((((gTime - key1.time) / totalTime) % 1) + 1) % 1;
result.x = (key2.x - key1.x) * result.time + key1.x;
result.y = (key2.y - key1.y) * result.time + key1.y;
return result;
}
//===============================================================================
// Character functions and animation data
const headKeys = [ // time in seconds, position in pixels
{x : 200, y : 50, time : 0},
{x : 300, y : 50, time : 1},
{x : 200, y : 50, time : 2},
];
const keyResult = {x : 0, y : 0, time : 0}; // this holds tween results and saves us creating objects each loop
function drawHead(x,y){
ctx.beginPath();
ctx.arc(x, y, 30, 0, Math.PI * 2, true);
ctx.fill();
}
function drawCharacter(gTime){
// draw the head
var keyIndex = findKeys(headKeys, gTime);
var headPos = tweenCoords(headKeys[keyIndex], headKeys[keyIndex +1], gTime, keyResult);
drawHead(headPos.x, headPos.y);
}
function mainLoop(time){
if(startTime === undefined){
startTime = time;
}
gTime = (time - startTime) / 1000; // convert time to seconds
ctx.clearRect(0,0,canvas.width,canvas.height);
drawCharacter(gTime)
requestAnimationFrame(mainLoop); // request the next frame
}
<canvas id="canvas" width="500" height="300"></canvas>
到目前为止，我只展示了如何为位置制作动画，但在很多情况下，位置看起来不会很好。例如挥动手臂的角色，如果你上下移动手臂，手臂的长度会变短，变短，然后变长。
因此，您可以在角度之间进行补间，而不是在两个位置之间进行补间。对于角色来说，这就是我们通常所做的所有关键帧的方式，如角色。
我们在身体上选择一个点，并根据关键帧以正确的角度从中抽出。
对于你的角色，我们将从臀部开始。
沿角度绘制线条
function drawLine(x,y,angle,length){
ctx.beginPath();
ctx.lineTo(x,y);
ctx.lineTo(x + Math.cos(angle) * length, y + Math.sin(angle) * length);
ctx.stroke();
}
问题变得有点困难，因为您还想要旋转连接到线端的所有内容。有很多方法可以做到这一点，现在它将保持非常简单。我们计算终点并将其用作下一个关节的起点。我们还将角度添加到下一行，因此下一行的总角度是加上前一行。
我们称之为装备动画对象的描述。它描述了所有部分以及如何绘制它们。
以下是角色的简单装备
const man = {
parts: {
body: {
len: 60,
ang: -Math.PI / 2,
parts: {
arm1: {
len: 60,
ang: Math.PI * (9 / 8), // 1/8th is 22.5 deg
},
arm2: {
len: 60,
ang: Math.PI * (7 / 8), // 1/8th is 22.5 deg
},
neck: {
len: 20,
ang: 0,
parts: {
head: {
size: 10,
}
}
}
}
},
leg1: {
len: 60,
ang: Math.PI * (5 / 8), // 1/8th is 22.5 deg
},
leg2: {
len: 60,
ang: Math.PI * (3 / 8), // 1/8th is 22.5 deg
}
}
}
它是一个树结构，其中的部分作为子节点连接。因此，要找到您关注的头部man.parts.body.parts.neck.parts.head角度是相对于前一个节点的。
要绘制上述装备，我们使用递归函数。
const man = {
parts: {
body: {
len: 60,
ang: -Math.PI / 2,
parts: {
arm1: {
len: 60,
ang: Math.PI * (9 / 8), // 1/8th is 22.5 deg
},
arm2: {
len: 60,
ang: Math.PI * (7 / 8), // 1/8th is 22.5 deg
},
neck: {
len: 20,
ang: 0,
parts: {
head: {
size: 10,
}
}
}
}
},
leg1: {
len: 60,
ang: Math.PI * (5 / 8), // 1/8th is 22.5 deg
},
leg2: {
len: 60,
ang: Math.PI * (3 / 8), // 1/8th is 22.5 deg
}
}
}
const ctx = canvas.getContext("2d");
const workPos = {
x: 0,
y: 0
}; // to hold working posints and save having to create them every frame
// this function get the end pos of a line at angle and len starting at x,y
function angLine(x, y, ang, len, pos = {}) {
pos.x = x + Math.cos(ang) * len;
pos.y = y + Math.sin(ang) * len;
return pos;
}
// draws a line
function drawLine(x, y, x1, y1) {
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x1, y1);
ctx.stroke();
}
// draws a circle
function drawCircle(x, y, size) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
// Recursively draws a rig.
function drawRig(x, y, ang, rig) {
var x1, y1, ang1;
if (rig.ang !== undefined) { // is this an angled line?
var end = angLine(x, y, ang + rig.ang, rig.len, workPos);
drawLine(x, y, end.x, end.y);
x1 = end.x;
y1 = end.y;
ang1 = ang + rig.ang;
} else if (rig.size) { // is this the head
drawCircle(x, y, rig.size);
x1 = x;
y1 = y;
ang1 = ang;
} else {
// if rig has a position move to that position to draw parts
x1 = ang.x !== undefined ? ang.x + x : x;
y1 = ang.y !== undefined ? ang.y + y : y;
ang1 = ang;
}
// are there any parts attached
if (rig.parts) {
// For each part attached to this node
for (const part of Object.values(rig.parts)) {
drawRig(x1, y1, ang1, part);
}
}
}
drawRig(250, 100, 0, man);<canvas id="canvas" width="500" height="300"></canvas>
这个装备是手工创建的，通常钻机是通过动画软件创建的。我使用自定义内部软件来创建装备和动画，但是你可以使用很多。 Google会帮您找到它们。
我的答案已经没空了，所以要保持代码。
我已经为装备添加了关键帧。如果找到，drawRig函数将使用关键帧，否则只使用正常位置ang和len
动画都分布在不同的长度上，因此组合动画看起来比实际更复杂。
有关详细信息，请参阅代码。
const ctx = canvas.getContext("2d");
const workPos = {x: 0, y: 0}; // to hold working posints and save having to create them every frame
requestAnimationFrame(mainLoop);
var startTime;
var gTime;
//===============================================================================
// Animation code
function findKeys(keys, gTime){
var start = keys[0].time;
var end = keys[keys.length - 1].time;
var totalTime = end - start;
var time = gTime - start;
time = ((time % totalTime) + totalTime) % totalTime;
var index = 0;
while(index < keys.length){
if(keys[index].time <= time && keys[index+1].time > time){
return index;
}
index ++;
}
return -1;
}
function tweenKeys(key1, key2, gTime, result = {}){
var totalTime = key2.time - key1.time;
result.time = ((((gTime - key1.time) / totalTime) % 1) + 1) % 1;
if (key1.x !== undefined) { result.x = (key2.x - key1.x) * result.time + key1.x }
if (key1.y !== undefined) { result.y = (key2.y - key1.y) * result.time + key1.y }
if (key1.ang !== undefined) { result.ang = (key2.ang - key1.ang) * result.time + key1.ang }
if (key1.len !== undefined) { result.len = (key2.len - key1.len) * result.time + key1.len }
if (key1.size !== undefined) { result.size = (key2.size - key1.size) * result.time + key1.size }
return result;
}
const keyResult = {x : 0, y : 0, ang : 0, len : 0, size : 0,time : 0}; // this holds tween results and saves us creating objects each loop
// this function get the end pos of a line at angle and len starting at x,y
function angLine(x, y, ang, len, pos = {}) {
pos.x = x + Math.cos(ang) * len;
pos.y = y + Math.sin(ang) * len;
return pos;
}
// draws a line
function drawLine(x, y, x1, y1) {
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x1, y1);
ctx.stroke();
}
// draws a circle
function drawCircle(x, y, size) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
// Recursively draws a rig.
function drawRig(x, y, ang, time, rig) {
var x1, y1, ang1, end, index;
if (rig.ang !== undefined) { // is this an angled line?
if(rig.keys){ // are there key frames???
index = findKeys(rig.keys, time);
tweenKeys(rig.keys[index], rig.keys[index+1], time, keyResult);
end = angLine(x, y, ang + keyResult.ang, keyResult.len, workPos);
rig.ang = keyResult.ang;
}else{
end = angLine(x, y, ang + rig.ang, rig.len, workPos);
}
drawLine(x, y, end.x, end.y);
x1 = end.x;
y1 = end.y;
ang1 = ang + rig.ang;
} else if (rig.size) { // is this the head
if(rig.keys){ // are there key frames???
index = findKeys(rig.keys, time);
tweenKeys(rig.keys[index], rig.keys[index+1], time, keyResult);
drawCircle(x, y, keyResult.size);
}else{
drawCircle(x, y, rig.size);
}
x1 = x;
y1 = y;
ang1 = ang;
} else {
// if rig has a position move to that position to draw parts
x1 = ang.x !== undefined ? ang.x + x : x;
y1 = ang.y !== undefined ? ang.y + y : y;
ang1 = ang;
}
// are there any parts attached
if (rig.parts) {
// For each part attached to this node
for (const part of Object.values(rig.parts)) {
drawRig(x1, y1, ang1, time,part);
}
}
}
// The stick man rig with keyframes
const man = {
parts: {
body: {
len: 60,
ang: -Math.PI / 2,
keys : [
{len : 60, ang : -Math.PI * (5 / 8), time : 0},
{len : 60, ang : -Math.PI * (3 / 8), time : 1.5},
{len : 60, ang : -Math.PI * (5 / 8), time : 3},
],
parts: {
arm1: {
len: 60,
ang: Math.PI * (9 / 8), // 1/8th is 22.5 deg
keys : [
{len : 60, ang : Math.PI * (10 / 8), time : 0},
{len : 60, ang : Math.PI * (8 / 8), time : 2},
{len : 60, ang : Math.PI * (10 / 8), time : 4},
],
},
foreArm2: {
len: 30,
ang: Math.PI * (7 / 8), // 1/8th is 22.5 deg
keys : [
{len : 30, ang : Math.PI * (7 / 8), time : 0},
{len : 30, ang : Math.PI * (4 / 8), time : 1},
{len : 30, ang : Math.PI * (7 / 8), time : 2},
],
parts : {
arm : {
len: 30,
ang: Math.PI * (7 / 8), // 1/8th is 22.5 deg
keys : [
{len : 30, ang : Math.PI * (1 / 8), time : 0},
{len : 30, ang : -Math.PI * (2 / 8), time : 0.5},
{len : 30, ang : Math.PI * (1 / 8), time : 1},
],
}
}
},
neck: {
len: 20,
ang: 0,
parts: {
head: {
size: 10,
}
}
}
}
},
leg1: {
len: 60,
ang: Math.PI * (5 / 8), // 1/8th is 22.5 deg
},
leg2: {
len: 60,
ang: Math.PI * (3 / 8), // 1/8th is 22.5 deg
keys : [
{len : 60, ang : Math.PI * (3 / 8), time : 0},
{len : 60, ang : Math.PI * (3 / 8), time : 4},
{len : 60, ang : Math.PI * (1 / 8), time : 4.5},
{len : 60, ang : Math.PI * (3 / 8), time : 5},
{len : 60, ang : Math.PI * (3 / 8), time : 8},
],
}
}
}
function mainLoop(time){
if(startTime === undefined){
startTime = time;
}
gTime = (time - startTime) / 1000; // convert time to seconds
ctx.clearRect(0,0,canvas.width,canvas.height);
drawRig(250, 100, 0, gTime, man);
requestAnimationFrame(mainLoop); // request the next frame
}<canvas id="canvas" width="500" height="300"></canvas>
要创建复杂的动画，我们可以使用关键帧来键入关键帧集。例如，您可能有一个使用一组关键帧的步行动画，但是不是为所有步行创建所有关键帧，而是仅为一个周期创建关键点，然后使用关键帧来定义多少次重复步行动画。
上面的补间都是线性的。在大多数情况下，这看起来并不自然。要解决此问题，请使用简易功能。它们被放置在补间函数中。
以下是easeInOut曲线，开始慢速加速，然后慢下来。您可以将它添加到补间函数（取自上面的代码段），如下所示。
const eCurve = (v, p = 2) => v < 0 ? 0 : v > 1 ? 1 : Math.pow(v, p) / (Math.pow(v, p) + Math.pow(1 - v, p));}
function tweenKeys(key1, key2, gTime, result = {}){
var totalTime = key2.time - key1.time;
result.time = ((((gTime - key1.time) / totalTime) % 1) + 1) % 1;
result.time = eCurve(result.time); // add the ease in out
... rest of function as normal