如何使用 javascript 创建 png 按钮动画？

Question

我是葡萄牙的一名平面设计师，过去每天都和代码打交道，比如 css、html 和一点点 javascript 和 php。我目前正在开发一个交互式徽标按钮，但它必须是 PNG 才能看起来像我想要的那样。这是 html 上的 javascript 代码（图片托管在我的网站上）：

我想创建一个在 last/first 帧上开始和停止的鼠标点击，而不是像这样的无限循环，并在点击到 open/close 后反转动画。基本上就是挂锁的上锁和解锁。

这个动画的重点是在徽标下打开一个菜单导航栏。你能帮助我吗？

我的代码：

var cSpeed = 5;
var cWidth = 200;
var cHeight = 145;
var cTotalFrames = 7;
var cFrameWidth = 200;
var cImageSrc = 'https://www.studiogo.net/sprites.png';

var cImageTimeout = false;
var cIndex = 0;
var cXpos = 0;
var SECONDS_BETWEEN_FRAMES = 0;

function startAnimation() {

  document.getElementById('loaderImage').style.backgroundImage = 'url(' + cImageSrc + ')';
  document.getElementById('loaderImage').style.width = cWidth + 'px';
  document.getElementById('loaderImage').style.height = cHeight + 'px';

  //FPS = Math.round(100/(maxSpeed+2-speed));
  FPS = Math.round(100 / cSpeed);
  SECONDS_BETWEEN_FRAMES = 1 / FPS;

  setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES / 1000);

}

function continueAnimation() {

  cXpos += cFrameWidth;
  //increase the index so we know which frame of our animation we are currently on
  cIndex += 1;

  //if our cIndex is higher than our total number of frames, we're at the end and should restart
  if (cIndex >= cTotalFrames) {
    cXpos = 0;
    cIndex = 0;
  }

  document.getElementById('loaderImage').style.backgroundPosition = (-cXpos) + 'px 0';

  setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES * 1000);
}

function imageLoader(s, fun) //Pre-loads the sprites image
  {
    clearTimeout(cImageTimeout);
    cImageTimeout = 0;
    genImage = new Image();
    genImage.onload = function() {
      cImageTimeout = setTimeout(fun, 0)
    };
    genImage.onerror = new Function('alert(\'Could not load the image\')');
    genImage.src = s;
  }

//The following code starts the animation
new imageLoader(cImageSrc, 'startAnimation()');

<div id="loaderImage"></div>

Answer 1

拜托，看看这是不是你想要的。

$(document).ready(function () {
  $(".lock").click(function () {
    var $self = $(this);

    if ($self.hasClass("closed")) {
      $self.removeClass("close");

      setTimeout(function () {
        $self.addClass("open").removeClass("closed");
      }, 100);
    } else {
      $self.removeClass("open");

      setTimeout(function () {
        $self.addClass("close").addClass("closed");
      }, 100);
    }
  });
});

div.lock {
  background-image: url('https://www.studiogo.net/sprites.png');
  width: 200px;
  height: 145px;
  background-position: 0 center;
  background-repeat: no-repeat;
}

div.closed {
  background-position: -1200px center;
}

div.close {
  animation: close-animation 300ms steps(6, start); // 1200px / 200px = 6
}

div.open {
  animation: close-animation 300ms steps(6, end); // 1200px / 200px = 6
  animation-fill-mode: backwards;
  animation-direction: reverse;
}

@keyframes close-animation {
  from {
    background-position: 0 center;
  }
  
  to {
    background-position: -1200px center;
  }
}

<div class="lock closed">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何使用 javascript 创建 png 按钮动画？

How do I create png button animation with javascript?

html

javascript

animation

png

button