时间戳

首页 > 解决方案 > 如何使用 Texture Packer sprite sheet / CSS sprites 在 React 中制作动画？

css - 如何使用 Texture Packer sprite sheet / CSS sprites 在 React 中制作动画？

问题描述

客户端给了我一个由 TexturePacker + css 文件生成的精灵表，用于为反应站点创建动画：

CSS 文件如下所示：

.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(Sprite1.png);}


.Position1_0000 {width:10px; height:10px; background-position: -0px -0px} 
.Position1_0001 {width:25px; height:120px; background-position: -10px -0px}

精灵表是 2 个 PNG 文件，精灵都是不同的大小。我的目标是将此动画添加到现有的反应站点。我找不到任何适用于不同大小精灵的现有库。

我的问题：

  1. 是否有创建动画的最佳实践方法？有什么框架吗？
  2. 我使用 setTimeout 还是 requestAnimationFrame？我需要使用画布吗？
  3. 我如何解释动画没有到位但在前几帧飞入的事实？

标签： cssreactjscss-animationscss-sprites

解决方案

推荐阅读