理解动画中的线性插值

在传统(手绘)一个高级动画或者动画艺术家都喜欢绘制关键帧来定义一个动画。

现场传递给助理,一般是实习生或者初级艺术家在此基础上做一些其他性的工作,具体的说,他们就是在关键帧动画之间添加一些中间片段让动画看起来更流畅,更自然。

他们可以不考虑或者不讨论动画的中间帧。但绘制动画的中间帧是很有必要的,或者说这方面的工作是繁重的。但这是二十世纪之间的艺术家们做的事情,在今天这些事情都是让计算机来处理这些繁重的任务。

还记得在小学的时候,老师告诉你电脑是笨蛋吗?电脑需要被告知一系列的确切步骤,他们才知道需要做什么。今天我们来看看这一序列的步骤或算法,帮助计算机绘制动画关键帧之间必要的中间画。

我将使用HTML5的Canvas和JavaScript来说明这个算法。即使你都不知道他们,按着下面的步骤来阅读也能理解这篇文章。

目标

我们的目标很简单,就是整一个动画的球,这个球从A(startX, startY)移动到B(endX, endY)

如果这个场景传递给一个传统的工作室,那么高级艺术家将会像下面那样绘制关键的动画帧:

然后初级艺术家们将会在图纸中绘制动画关键帧之间的动画帧:

再次提醒大家,没有动画工作室,我们也没有初级的艺术家。我们只有一个目标和一台电脑,我们现在能做的就是写一些正确的代码,用代码来替代初级艺术家们在图纸中绘制工作。

实现方法

我们在技术上需要在HTML中写一行代码:

<canvas id=”canvas”></canvas>

接下来写一些JavaScript代码,下面的JavaScript代码让我们拿到HTML中的<canvas>元素,并且得到一个canvas2d绘图环境,然后让Canvas画布的大小和视频的大小一致:

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

下面的函数绘制一个绿色的实圆,这个圆的半径为radius,并且其圆心的位置在坐标中的xy处:

function drawBall(x, y, radius) {
    context.beginPath();
    context.fillStyle = '#66da79';
    context.arc(x, y, radius, 0, Math.PI * 2, false);
    context.fill();
}

上面的代码只是画了一个圆的形状,但没有任何动画,只有下面的代码会让你变得更为有趣:

// A点位置
let startX = 50, startY = 50;
// B点位置
let endX = 420, endY = 380;

let x = startX, y = startY;

update();

function update() {
    context.clearRect(0, 0, width, height);
    drawBall(x, y, 30);
    reques
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/understanding-linear-interpolation-in-ui-animations.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部