Question

我想创建一个带有精灵的小动画，并希望为此找到最合适的工具/库。基本上我想知道什么是keyframes相当于非原生的反应。

我尝试过制作GIF，但透明度上有很多文物。我可以使用像phaser / pixi.js这样的东西，但对于一些只是简单动画的东西来说似乎有些过分。

Answer 1

有一些简单的方法：

Css动画（或使用js的等效动画）：

    {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat;
      background-position: 0 0;
      cursor: pointer;
      animation: fave-heart 1s steps(28);
    }
    .heart:hover {
      background-position: -2800px 0;
      transition: background 1s steps(28);
    }
    @keyframes fave-heart {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -2800px 0;
      }
    }

http://codepen.io/mindstorm/pen/aZZvKq

阵营-spriteseet： https://github.com/frostney/react-spritesheet

反应精灵动画

1 个答案: