我如何用javascript创建png按钮动画

How do I create png button animation with javascript?

本文关键字：png 按钮 动画 创建 javascript 何用      更新时间：2023-09-26

我是葡萄牙的一名平面设计师，过去每天都与代码打交道，比如css, html和一点javascript和php。我目前正在开发一个互动的标志按钮，但它必须是PNG看我想要的方式。这是html上的javascript代码(图像托管在我的网站上):

我想在最后/第一帧创建一个鼠标点击开始和停止，而不是像这样的无限循环，并在点击打开/关闭后反转动画。基本上就是挂锁的开锁。

这个动画的目的是打开徽标下的菜单导航栏。你能帮我吗?

我代码:

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>

请看看这是不是你想要的。

$(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>

相关文章：