【第5章动画】5.8 视差动画

ncj393437906

已于 2025-07-08 13:24:12 修改

阅读量176

点赞数 1

CC 4.0 BY-SA版权

分类专栏：《HTML5 Canvas核心技术图形、动画与游戏开发》文章标签： canvas

于 2025-07-08 13:23:59 首次发布

本文链接：https://blog.csdn.net/ncj393437906/article/details/149196267

《HTML5 Canvas核心技术图形、动画与游戏开发》专栏收录该内容

41 篇文章

订阅专栏

文章目录

从不同的位置，以不同的视线来观察同一个物体时，就会产生视差。这也是远处物体看上去好像比近处物体移动速度更慢的原因。

在这里插入图片描述

上面的动画中，从远到近，有天空、小树、大树、草地，物体的移动速度依次变快。动画制作者让各个动画图层以不同的速度滚动，这样就实现了视差效果。

小结：了解视差动画是什么，下面的代码示例不用深究，实际项目中遇到再去考虑

let skyOffset = 0,
	grassOffset = 0,
	treeOffset = 0,
	nearTreeOffset = 0,
	TREE_VELOCITY = 20,
	FAST_TREE_VELOCITY = 40,
	SKY_VELOCITY = 8,
	GRASS_VELOCITY = 75

function draw() {
	context.save()

	skyOffset = skyOffset < canvas.width ? skyOffset + SKY_VELOCITY / fps : 0

	grassOffset = grassOffset < canvas.width ? grassOffset + GRASS_VELOCITY / fps : 0

	treeOffset = treeOffset < canvas.width ? treeOffset + TREE_VELOCITY / fps : 0

	nearTreeOffset = nearTreeOffset < canvas.width ? nearTreeOffset + FAST_TREE_VELOCITY / fps : 0

	context.save()
	context.translate(-skyOffset, 0)
	context.drawImage(sky, 0, 0)
	context.drawImage(sky, sky.width - 2, 0)
	context.restore()

	context.save()
	context.translate(-treeOffset, 0)
	context.drawImage(tree, 100, 240)
	context.drawImage(tree, 1100, 240)
	context.drawImage(tree, 400, 240)
	context.drawImage(tree, 1400, 240)
	context.drawImage(tree, 700, 240)
	context.drawImage(tree, 1700, 240)
	context.restore()

	context.save()
	context.translate(-nearTreeOffset, 0)
	context.drawImage(nearTree, 250, 220)
	context.drawImage(nearTree, 1250, 220)
	context.drawImage(nearTree, 800, 220)
	context.drawImage(nearTree, 1800, 220)
	context.restore()

	context.save()
	context.translate(-grassOffset, 0)

	context.drawImage(grass, 0, canvas.height - grass.height)
	context.drawImage(grass, grass.width - 5, canvas.height - grass.height)
	context.drawImage(grass2, 0, canvas.height - grass2.height)
	context.drawImage(grass2, grass2.width, canvas.height - grass2.height)
	context.restore()
}