为何 Canvas 内元素动画总是在颤抖？

DTeam 发布于2019-08-22 16:36 / 1626人阅读

摘要：来源背景过年的项目中遇到一个问题让我百思不得其解，明明我的帧率保持在帧，为何我的动画却一直抖动我的场景是一个匀速直线运动的小姐姐。在中，不建议使用浮点数进行定位。

来源： https://fanmingfei.com/posts/...

背景

过年的项目中遇到一个问题让我百思不得其解，明明我的帧率保持在60帧，为何我的动画却一直抖动？

我的场景是一个匀速直线运动的小姐姐。

先上一个 Demo

在这个 Demo 中，小姐姐是按照 x 轴 10px/s，y 轴 30 px/s 进行移动的，不过她的移动是明显伴随着抖动的。

这到底是怎么了呢？

解决

如果小姐姐的y轴速度是 10px/s，我们的帧率是 60f/s，计算一下：

10 / 60 = 1/6 (px/f)

实际上，的实际速度是每 6 帧才会移动 1px，这当然会有抖动，小姐姐走一步停一会，总感觉怪怪的~

我索性把小姐姐的移动速度调快，调成 100px/s，发现，还是会抖动，以为高高兴兴能解决了这个问题，发现还是没那么简单。

既然我们能算，那我们就算一算

100 / 60 = 10/6 (px/f) = 1.666666....(px/f)

写了个for循环，看看一秒中每一帧小姐姐都在什么位置

for(let i = 0; i < 60; i ++) {
  console.log(i*10/6)
}

输出结果取小数点后两位是这样的：

0.00 1.67 3.33 5.00 6.67 8.33 10.00 11.67 13.33 15.00 16.67 18.33 20.00 21.67 23.33 25.00 26.67 28.33 30.00 31.67
33.33 35.00 36.67 38.33 40.00 41.67 43.33 45.00 46.67 48.33 50.00 51.67 53.33 55.00 56.67 58.33 60.00 61.67 63.33
65.00 66.67 68.33 70.00 71.67 73.33 75.00 76.67 78.33 80.00 81.67 83.33 85.00 86.67 88.33 90.00 91.67 93.33 95.00 96.67 98.33

那么作为浮点数，Canvas 将如何定位呢？

我们来写一个 Demo

使用 Chrome 打开，作为一个像素眼，我发现，小姐姐定位在 50.6px 的时候，其实就已经被渲染到 51px 的位置。

所以在 Chrome 中，drawImage 中设置的位置最终会被四舍五入，这可能和 CSS Sub-pixel 有关这里先不探究。

所以真正的位置其实是

 0 2 3 5 7 8 10 12 13 15 17 18 20 22 23 25 27 28 30 32
 33 35 37 38 40 42 43 45 47 48 50 52 53 55 57 58 60 62 63 65
 67 68 70 72 73 75 77 78 80 82 83 85 87 88 90 92 93 95 97 98

从数值来看，每帧移动的距离可能是 1px 也可能是 2px，小姐姐可能是在边跳芭蕾边走路喽~

既然这样，60 帧的帧率下，设置 60px/s 就可以解决问题了，尝试了一下，真的可以！

总结

前端动画/游戏开发 requestAnimationFrame 之锁帧这篇文章介绍过，在项目中我们可能对动画进行锁帧，帧率可能是 60 或者 30，如果我们想保证渲染不抖动，在匀速直线运动中，我们尽量保证我们设置的速度要是帧率的倍数，或者保证平均每帧移动的像素点是一样的。

在 drawImage 中，不建议使用浮点数进行定位。

GPU服务器服务器托管元素动画内元素 html块内元素间距 js删除节点内元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94494.html

大话 JavaScript 动画

摘要：直到年，世界上第一部动画片滑稽脸的幽默相问世。上一次视神经传递的图像将会在大脑中存留，直到下一次神经信号到达。移动设备还是相当惨烈，并没有开始支持。市面上有很多动画库，大家可以开箱即用。有一些是针对操作的，也有一些是针对对象。背景 138.2亿年前，世界上没有时间和空间，或许世界都不存在，在一个似有似无的点上，汇集了所有的物质，它孕育着无限的能量与可能性。宇宙大爆炸巨大的内力已无...

syoya 2019-08-23 12:14 评论0 收藏0
04.Android之动画问题

摘要：动画占用大量内存，如何优化使用动画的注意事项有哪些问题这个问题主要出现在帧动画中，当图片数量较多且图片较大时就极易出现，这个在实际开发中要尤其注意，尽量避免使用帧动画。目录介绍 4.0.0.1 Android中有哪几种类型的动画，属性动画和补间动画有何区别？补间动画和属性动画常用的有哪些？ 4.0.0.2 View动画为何不能真正改变View的位置？而属性动画为何可以？属性动画是如...

Muninn 2019-08-16 14:20 评论0 收藏0
用Canvas实现文本编辑器（支持艺术字渲染与动画）

摘要：项目中文字由进行渲染。待触发时，取消中文输入标记，将文字渲染到上。而其中一些有趣的细节实现如文本渲染，对中文笔画分割实现有趣的动画等并没有描写。导言目前富文本编辑器的实现主要有两种技术方案：一个是利用contenteditable属性直接对html元素进行编辑，如draft.js；另一种是代理textarea + 自定义div + 模拟光标实现。对于类似word的经典富文本编辑器，...

OldPanda 2019-08-20 15:21 评论0 收藏0
学习HTML5 Canvas这一篇文章就够了

摘要：本文作者利用一些简单的对进行了系统的总结，受益匪浅，毫不夸张的说，学习这一篇文章就够了一简介是新增的，一个可以使用脚本通常为在其中绘制图像的元素。本文作者利用一些简单的 demo 对 Canvas 进行了系统的总结，受益匪浅，毫不夸张的说，学习 Canvas 这一篇文章就够了！一、canvas简介是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘...

Eidesen 2019-08-26 12:12 评论0 收藏0