JavaScript反弹动画效果是怎么实现的？-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

JavaScript反弹动画效果是怎么实现的？

零下一度

Jul 16, 2017 pm 03:25 PM

javascript js bagaimana

JavaScript反弹动画效果是怎么实现的？下面我通过代码来向大家详细介绍一下。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{
      width:200px;
      height:200px;
      position: absolute;
      top:0;
      left:200px;
      background:lightblue;
    }
    .btn{
      position:absolute;
      top:200px;
      left:100px;
      height:50px;
    }
    .btn input{
      display:inline-block;
      margin-left:50px;
      outline: none;
      width:100px;
      height:50px;
      border:1px solid green;
      cursor:pointer;
    }
  </style>
</head>
<body>
  <p id=&#39;box&#39;></p>
  <p class=&#39;btn&#39;>
    <input type="button" value=&#39;向左&#39; id=&#39;btnLeft&#39;>
    <input type="button" value=&#39;向右&#39; id=&#39;btnRight&#39;>
  </p>
  <script>
    var oBox = document.getElementById("box");
    var minLeft = 0;
    var maxLeft = utils.win(&#39;clientWidth&#39;)-oBox.offsetWidth;
    var step = 5;
    var timer = null;
    function move(target){
      //target:告诉我要运动的目标位置
      window.clearTimeout(timer);
      var curLeft = utils.css(oBox,"left");
      if(curLeft<target){//向右走
        if(curLeft+step>target){//边界
          utils.css(oBox,"left",target);
          return;
        }
        curLeft+=step;
        utils.css(oBox,"left",curLeft)
      }else if(curLeft>target){//向左走
        if(curLeft-step<target){//边界
          utils.css(oBox,"left",target);
          return;
        }
        curLeft-=step;
        utils.css(oBox,"left",curLeft)
      }else{//不需要运动
        return;
      }
      // timer = window.setTimeout(move,10)//这里有一个问题，点击按钮第一次target的值是有的，但是第二次通过setTimeout执行的时候没有给target进行传值。是undefined
      timer = window.setTimeout(function(){
        move(target);
      },10)//这样使用匿名函数包裹一下，就解决了上面的问题，但是这样写性能不好，因为每一次到达时间的时候，都需要执行一次匿名函数（形成一个私有的作用域）,在匿名函数中再执行move，但是move中需要用到的数据值在第一次执行的move方法中，需要把匿名函数形成的这个私有的作用域作为跳板找到之前的，这样就导致了匿名函数形成的这个私有的作用域不能销毁
    }
    document.getElementById(&#39;btnLeft&#39;).onclick = function(){
      move(minLeft)
    }
    document.getElementById(&#39;btnRight&#39;).onclick = function(){
      move(maxLeft)
    }
  </script>
</body>
</html>

Salin selepas log masuk

为了解决上面性能不好的问题，下面是一个优化后的代码:里面在使用一个函数包裹，这样就只有move函数创建的一个私有作用域没有销毁，等到_move执行完毕，move就自然会进行销毁。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{
      width:200px;
      height:200px;
      position: absolute;
      top:0;
      left:200px;
      background:lightblue;
    }
    .btn{
      position:absolute;
      top:200px;
      left:100px;
      height:50px;
    }
    .btn input{
      display:inline-block;
      margin-left:50px;
      outline: none;
      width:100px;
      height:50px;
      border:1px solid green;
      cursor:pointer;
    }
  </style>
</head>
<body>
  <p id=&#39;box&#39;></p>
  <p class=&#39;btn&#39;>
    <input type="button" value=&#39;向左&#39; id=&#39;btnLeft&#39;>
    <input type="button" value=&#39;向右&#39; id=&#39;btnRight&#39;>
  </p>
  <script>
    var oBox = document.getElementById("box");
    var minLeft = 0;
    var maxLeft = utils.win(&#39;clientWidth&#39;)-oBox.offsetWidth;
    var step = 5;
    var timer = null;
    function move(target){
      //target:告诉我要运动的目标位置
      _move();
      function _move(){
        window.clearTimeout(timer);
        var curLeft = utils.css(oBox,"left");
        if(curLeft<target){//向右走
          if(curLeft+step>target){//边界
            utils.css(oBox,"left",target);
            return;
          }
          curLeft+=step;
          utils.css(oBox,"left",curLeft)
        }else if(curLeft>target){//向左走
          if(curLeft-step<target){//边界
            utils.css(oBox,"left",target);
            return;
          }
          curLeft-=step;
          utils.css(oBox,"left",curLeft)
        }else{//不需要运动
          return;
        }
        timer = window.setTimeout(_move,10);
      }
    }
    document.getElementById(&#39;btnLeft&#39;).onclick = function(){
      move(minLeft)
    }
    document.getElementById(&#39;btnRight&#39;).onclick = function(){
      move(maxLeft)
    }
  </script>
</body>
</html>

Salin selepas log masuk

注意:为了让当前的元素在同一时间只运行一个动画（下一个动画开始的时候首先把上一个动画的定时器清除掉）：保证当前元素所有动画接收定时器返回值的那个变量需要共享，有两种方式：1、全局接收（例如上面的代码 var timer = null）2、给元素增加自定义属性（如下图所示）

总结:通过以上可以得出动画优化的四条规则：

　　1、边界判断加步长

　　2、清除没有用的定时器

　　3、在外层函数需要传参的时候，可以在里面在嵌套一层函数，避免作用域的累积。

　　4、把定时器的返回值存储在元素的自定义属性上，防止全局变量冲突和同一时间多个动画执行

Atas ialah kandungan terperinci JavaScript反弹动画效果是怎么实现的？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7681

Tutorial CakePHP

1393

Tutorial C#

1209

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Tunjukkan Lagi

Related knowledge

Bagaimana untuk menyediakan fungsi but papan kekunci pada papan induk GIGABYTE (dayakan mod but papan kekunci pada papan induk GIGABYTE) Dec 31, 2023 pm 05:15 PM

Bagaimana untuk menyediakan permulaan papan kekunci pada papan induk Gigabyte Pertama, jika ia perlu menyokong permulaan papan kekunci, ia mestilah papan kekunci PS2! ! Langkah-langkah tetapan adalah seperti berikut: Langkah 1: Tekan Del atau F2 untuk memasuki BIOS selepas but, dan masukkan mod Lanjutan (Lanjutan) BIOS Papan induk biasa masukkan mod EZ (Mudah) papan induk secara lalai untuk menekan F7 untuk beralih ke mod Lanjutan papan induk siri ROG masukkan BIOS secara lalai (kami menggunakan Bahasa Cina Mudah untuk menunjukkan) Langkah 2: Pilih untuk - [Lanjutan] - [Pengurusan Kuasa Lanjutan (APM)] Langkah 3: Cari pilihan [Bangun dengan papan kekunci PS2] Langkah 4: Pilihan lalai ini Dilumpuhkan Selepas menarik ke bawah, anda boleh melihat tiga pilihan tetapan yang berbeza, termasuk menekan [bar ruang] untuk menghidupkan komputer dan menekan butang kumpulan.

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Bagaimana untuk membolehkan sambungan terus kad grafik bebas pada Shenzhou Xuanlong m7e8s3? Jan 04, 2024 am 09:24 AM

Bagaimana untuk mendayakan sambungan terus kad grafik bebas Shenzhou Xuanlong m7 Untuk mendayakan fungsi sambungan langsung kad grafik bebas Shenzhou Xuanlong m7, anda boleh mengikuti langkah berikut: 1. Pertama, pastikan anda mempunyai. memasang pemacu kad grafik bebas. Anda boleh pergi ke laman web rasmi Shenzhou atau tapak web rasmi pengeluar kad grafik bebas untuk memuat turun dan memasang pemacu terkini yang sesuai untuk model kad grafik anda. 2. Pada desktop komputer, klik kanan ruang kosong dan pilih "Panel Kawalan NVIDIA" dalam menu pop timbul (jika ia adalah kad grafik AMD, pilih "Tetapan AMDRadeon"). 3. Dalam panel kawalan, cari "Tetapan 3D" atau pilihan yang dinamakan serupa dan klik untuk masuk. 4. Dalam "Tetapan 3D" anda perlu mencari "Tetapan Global" atau pilihan yang dinamakan serupa. Di sini anda boleh menentukan penggunaan yang unik

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

Dengan perkembangan pesat kewangan Internet, pelaburan saham telah menjadi pilihan semakin ramai orang. Dalam perdagangan saham, carta lilin adalah kaedah analisis teknikal yang biasa digunakan Ia boleh menunjukkan trend perubahan harga saham dan membantu pelabur membuat keputusan yang lebih tepat. Artikel ini akan memperkenalkan kemahiran pembangunan PHP dan JS, membawa pembaca memahami cara melukis carta lilin saham dan menyediakan contoh kod khusus. 1. Memahami Carta Lilin Saham Sebelum memperkenalkan cara melukis carta lilin saham, kita perlu memahami dahulu apa itu carta lilin. Carta candlestick telah dibangunkan oleh orang Jepun

Hubungan antara js dan vue Mar 11, 2024 pm 05:21 PM

Hubungan antara js dan vue: 1. JS sebagai asas pembangunan Web; 2. Kebangkitan Vue.js sebagai rangka kerja hadapan 3. Hubungan pelengkap antara JS dan Vue; Vue.

Bagaimana untuk mengenal pasti kotak kasut tulen dan palsu bagi kasut Nike (kuasai satu helah untuk mengenal pasti dengan mudah) Sep 02, 2024 pm 04:11 PM

Sebagai jenama sukan yang terkenal di dunia, kasut Nike telah menarik perhatian ramai. Bagaimanapun, terdapat juga sejumlah besar produk tiruan di pasaran, termasuk kotak kasut Nike palsu. Membezakan kotak kasut tulen daripada yang palsu adalah penting untuk melindungi hak dan kepentingan pengguna. Artikel ini akan memberi anda beberapa kaedah yang mudah dan berkesan untuk membantu anda membezakan antara kotak kasut asli dan palsu. 1: Tajuk pembungkusan luar Dengan memerhatikan pembungkusan luar kotak kasut Nike, anda boleh menemui banyak perbezaan yang ketara. Kotak kasut Nike tulen biasanya mempunyai bahan kertas berkualiti tinggi yang licin untuk disentuh dan tidak mempunyai bau pedas yang jelas. Fon dan logo pada kotak kasut tulen biasanya jelas dan terperinci, dan tiada kabur atau ketidakkonsistenan warna. 2: LOGO tajuk hot stamping LOGO pada kotak kasut Nike biasanya hot stamping Bahagian hot stamping pada kotak kasut tulen akan ditunjukkan

Apakah resolusi Savior y7000p semasa bermain CF (Cara melaraskan skrin penuh semasa bermain CF pada Savior Y7000) Jan 07, 2024 am 10:13 AM

Apakah resolusi Savior Y7000P semasa bermain CF? Resolusi Savior Y7000P semasa bermain CF ialah 1920*1080. Disebabkan komputer ini dilengkapi dengan kad grafik GTX1650 dan pemproses i5-9300H, prestasinya agak baik dan mencukupi untuk memenuhi keperluan permainan seperti CF. Pada masa yang sama, 1920*1080 ialah resolusi semasa monitor e-sukan arus perdana, dan kualiti imej serta kejelasan adalah mencukupi. Di samping itu, jika terdapat pemain yang mempunyai keperluan yang lebih tinggi, anda boleh menurunkan tetapan kualiti imej permainan dengan sewajarnya untuk mendapatkan pengalaman permainan yang lebih lancar. Untuk menikmati pengalaman visual yang lebih jelas, anda boleh melaraskan peleraian Savior y7000p kepada 2560*1400. Dengan cara ini, anda akan dapat menikmati paparan imej yang lebih berkualiti. Dilengkapi dengan model Saviour Y7000P2022

See all articles