jQuery animate() 使用 keydown 进行平滑-6ren

jQuery animate() 使用 keydown 进行平滑

转载作者：行者123 更新时间：2023-12-01 04:47:17

26

4

我正在尝试做两件事，但找不到方法:

更重要的是，当按键向上时，在完全停止之前，使船舶在keydown的方向上有更多的动画，并且如果我按另一个方向，船舶将等待动画在改变方向之前完成。

2.使船舶运动更加真实，不像文本编辑器。

$(document).ready(function() {
  //Variables
  var screenWidth = $(window).width(); //Screen width
  var screenHeight = $(window).height(); //Screen height
  var shipWidth = $("#ship").width(); //Ship width
  var y = 0; //Background y position
  var currentShipPos; //ship current position

  setShipPosition(screenWidth / 2 - shipWidth / 2, screenHeight / 1.5 - shipWidth / 2);
  startBackgroundMovement();


  //Start move the screen
  function startBackgroundMovement() {
    setInterval(function() {
      y += 1;
      $('body').css('background-position-y', y + 'px');
    }, 10);
  }


  //Spaceship starting position
  function setShipPosition(posX, posY) {
    $("#ship").css("left", posX);
    $("#ship").css("top", posY);
    currentShipPos = posX;
    //alert(currentShipPos);
  }

  //Move spaceship
  $(document).keydown(function(e) {
    if (!$('#ship').is(':animated')) {
      switch (e.which) {
        case 37: //left
          currentShipPos -= 10;
          $('#ship').animate({
            left: currentShipPos + "px"
          }, 0, 'swing');

          //left edge of screen
          if (currentShipPos < 0) {
            currentShipPos = 0;
          }
          break;
        case 39: //right
          currentShipPos += 10;
          $('#ship').animate({
            left: currentShipPos + "px"
          }, 0, 'swing');
          //right edge of screen
          if (currentShipPos > screenWidth - shipWidth) {
            currentShipPos = screenWidth - shipWidth;
          }
          break;
        default:
          return;
      }
      e.preventDefault(); //not sure if needed
    }

  });


});

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-image: url('http://www.playmycode.com/dynamic/project_images/495/3495/20888.1363023335.png');
  background-repeat: repeat;
  overflow: hidden;
  background-position: 0 0;
}
#ship {
  position: absolute;
  right: 0;
}

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

<body>
  <img id="ship" src="http://www.clipartbest.com/cliparts/dTr/M8g/dTrM8gnT9.png" width="40px" />
</body>

jsfiddle.net/icy1337/gw761f5w/

最佳答案

我重构了一点，去掉了$.animate()，使用这个循环来制作船舶动画:

(function shipLoop() {
    if (ship.goingLeft) {
        ship.lspeed = Math.min(ship.lspeed *1.1 || 1, ship.maxSpeed);
    } else {
        ship.lspeed = Math.max(ship.lspeed - 0.5, 0);
    }
    if (ship.goingRight) {
        ship.rspeed = Math.min(ship.rspeed *1.1 || 1, ship.maxSpeed);
    } else {
        ship.rspeed = Math.max(ship.rspeed - 0.5, 0);
    }
    ship.position = ship.position + (ship.rspeed - ship.lspeed);
    $ship.css('left', ship.position);
    requestAnimationFrame(shipLoop);
}());

按键处理程序设置这些属性，但实际上从未立即更改绘制位置，现在您还需要按键事件:

$(document).keydown(function(e){
    switch(e.which){
        case 37://left
            ship.goingLeft= true;                    
            break;
        case 39://right
            ship.goingRight= true;  
        default: return;    
    e.preventDefault();//not sure if needed
    }
}).keyup(function(e){
    switch(e.which){
        case 37://left
            ship.goingLeft= false;                    
            break;
        case 39://right
            ship.goingRight= false;  
        default: return;    
    e.preventDefault();//not sure if needed
    }
});

看看http://jsfiddle.net/gw761f5w/7/

关于jQuery animate() 使用 keydown 进行平滑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27545369/

26

4

0

文章推荐： Java小程序双缓冲闪烁

文章推荐： android - 连接到互联网后如何自动刷新网页 View

regex - 使用 linux 终端在 .txt 中查找 animal-060、animal-061、animal-062 ...、animal-069
我想使用 linux 终端在 .txt 文档中找到字符串 animal-0**。 ** 是从 60 到 69 的数字。我想我必须在命令中使用 grep 和正则表达式:grep -E 'animal-0
c# - 为什么 Animals[] animals = new Cat[5] 编译，但 List animals = new List() 不编译？
在他的C# 深入一书中，Jon Skeet 试图回答以下问题: Why can't I convert List to List? 为了解释它，他从一个代码片段开始，其中包括以下两行: Animal[
java - public void addAll(List animals) 和 public void addAll(List animals) 有什么区别？
我对此有点困惑，所以希望能提供一些说明。 public void addAll(List animals) 对比 public void addAll(List animals) 最佳答案区别在于
animation - 使用Core Animation，是否可以为多个CALayer组合动画？
我遇到的情况是，我有许多CALayer以“基于回合”的方式进行动画处理。我为每个CALayer上的位置设置了动画，但是它们具有完全相同的持续时间。一旦所有这些CALayer动画完成，就会启动一个新的“
animation - Unity Animator 默认图层状态在第一帧卡住
我为正在拔出的刀和空闲状态设置了动画，但是无论我做什么，它们都不会在游戏中设置动画。相反，它卡住在第一帧上。这是动画窗口运行时的样子: 动画: 在检查器中: 最佳答案我遇到了类似的问题，它归结于动画
animation - jQueryMobile : page animations
我的单个 HTML 文件中嵌入了 2 个页面。所以它所做的是最初它显示 PAGE1，然后如果我从右向左或从左向右滑动 PAGE2 应该显示。我的问题是如何根据我的滑动更改页面动画？比如当我从右向左滑动
react-native - 使用 Animated.Flatlist 和 Animated.ScrollView 为 Animated.View 设置动画不流畅
我想做一个动画标题。我创建了一个 FlatList 的动画组件，用过 onScroll函数来更新动画值。使用绝对位置放置一个 View (Animated.View) 作为动画 FlatList
iphone - 打开窗帘: Animation with Core Animation
我想制作一个打开的窗帘的动画。我有两张图像:一张用于窗帘的左侧，一张用于窗帘的右侧(以红色表示)。我想用核心动画顺利地将它们滑走。我应该寻找什么类型的动画？如何实现逼真的滑动风格？问候，斯特凡 a
animation - 在 Unity Animator 中缓慢旋转
我有一个简单的旋转动画，可以让一个对象绕其轴旋转。目前它旋转得太快了，我想减慢速度，我试过增加样本？？但我对动画了解不多，所以我可能过得很好。如何放慢动画速度？它只有两个键。最佳答案首先，通过双击
animation - Angularjs ng-animate 移动示例？
我似乎无法在上类时获得 angularjs ng-animate，而且在野外似乎也没有任何示例。以演示 fiddle 为例: http://jsfiddle.net/yfajy/ 向 CSS 添加如下
jquery-animate - jQuery animate() 显示动画进度的百分比
使用以下代码段:http://jsfiddle.net/sylouuu/V7a3Y/2/ 我想在动画的#log 中显示从 0% 到 100% 的进度百分比，100% 很容易通过回调... 有可能这样做
animation - 使用 SVG animate 为折线的外观设置动画
我正在 HTML 中使用 SVG 来使用折线工具定义特定的形状。我希望通过按一下按钮并在几秒钟内将特定形状的外观动画化为不同的形状。我一直在考虑使用动画工具来更改折线点属性，但到目前为止一直无法找到
jQuery animate().delay().animate() 我这样做对吗？
您好，在 Firefox(相当糟糕)和 Chrome 之间获得可变性能和效果(还可以)有时这不会执行第一个动画，有时会卡住。我的结构正确吗？ $notification.animate({
iphone - 设置编辑 :animated: is missing animation?
我在 iOS 编程时遇到了一个问题:当我尝试为我的 tableView 制作自定义编辑按钮时，我无法将其设置为动画。下面是我如何初始化 tableview: - (void)viewWillAppea
animation - swift : animator() causes EXC_BAD_ACCESS
自 beta 5 以来，我注意到在 OS X 10.10 下隐式动画有一些奇怪的行为。调用动画代理有时会导致应用程序崩溃。我设置了一个非常简单的自定义 View 。这是完整的代码: import Co
animation - Angular2 Animations::Easings 没有按预期工作
我正在开发一个可折叠组件，您可以单击它来向上/向下滚动以显示/隐藏详细信息。组件如下: // component.ts import {Component, Directive, Input} fro
web-animations - 使用Web Animations API扩展div高度0 --> 'auto'
我正在努力了解 web animations standard和他们的 polyfill ，正如我所见，它在 Angular 动画库中运行良好(您将动画结束值设置为“*”，这将变为 div 大小的 1
animation - Xamarin 安卓 : Animated Splash Screen
我想创建一个动画闪屏，但出现此错误: Android.Content.Res.Resources+NotFoundException: File res/drawable/splash_screen.
core-animation - 使用 Core Animation 减慢和加速动画
我正在尝试对我的应用程序应用慢动作效果，就像按 Shift 时如何减慢 Mac OS 的大多数图形效果一样。我的应用程序使用 CoreAnimation，所以我认为它应该没什么大不了的:set sp
animation - Android :Translation and Rotation Animation simultaneously
我想以编程方式同时不在XML文件中显示两个动画，它应该 ROTATE和TRANSLATE 我怎样才能做到这一点？请以某种方式建议我?????? 这是ma代码:> ImageView snowImg1

首页

博学

6Ren·AI

商城

jQuery animate() 使用 keydown 进行平滑