反应精灵动画

Question

我想用 sprite 创建一个小动画，并想找到最合适的 tool/library。基本上我想知道什么是 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

React-spriteset： https://github.com/frostney/react-spritesheet

反应精灵动画

React sprite animation

sprite

reactjs