js的帧动画
Posted 叩首问路 码梦人生
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js的帧动画相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <style> .box{ margin: auto; width: 65px; height: 65px; background-color: chartreuse; background: url(‘./img/movelogo.jpg‘) no-repeat; background-position: 0px; position: relative; } .sbox{ width: 65px; height: 65px; position: absolute; top: 0px; left: 0px; background: url(‘./img/movee1.png‘) no-repeat; z-index: 999; } </style> </head> <body> <div> <div class="box"> <div class="sbox"></div> </div> </div> </body> <script> // $(".box").mouseover( // function(){ // console.log(22) // var count=0; // setInterval(function(){ // count++; // if(count>26){ // count=0; // }else{ // $(".box").css(‘background-position‘, -65*count + ‘px 0px‘); // } // },6000) // }) var timer; var timers; var count=0; var counts=0; timer=setInterval(move,600) timers=setInterval(movee,600) var move=function(){ count+=65; if(count>1625){ count=0; } else{ $(".box").css(‘background-position‘, -count + ‘px 0px‘); } } var movee=function(){ counts+=65; if(counts>2665){ counts=0; } else{ $(".sbox").css(‘background-position‘, -counts + ‘px 0px‘); } } // 移上 $(".box").on("mouseover",function(){ timer=setInterval(move,600) timers=setInterval(movee,600) }) // 移出 $(".box").on("mouseout",function(){ count=0; counts=0; clearInterval(timer); clearInterval(timers); }) </script> </html>
当需要两个帧数动画同时开始,使用了定位在同一div显示,一个图层为透明图层文件可谓png格式,另一图层为jpg或者其他格式,每次移上之后需要个count重新赋值,开启新的定时器。
参考代码以上!!!!
以上是关于js的帧动画的主要内容,如果未能解决你的问题,请参考以下文章
如何使用Cocos2D-js 3.3调用Cocos Studio 2.2导出的帧动画
cocos creator基础-(十六)自定义的帧动画播放组件(需要优化)