当前位置:千赢国际官网 > 千赢网页手机版登入 > 方法的使用,方法使用详解

方法的使用,方法使用详解

文章作者:千赢网页手机版登入 上传时间:2019-07-18

今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户。

 此方法执行搜索正则表达式,String对象之间的匹配。
语法

 该方法找到一个正则表达式的字符串之间的匹配,并取代了匹配的子带的新的子串。

JS如何制造出动画效果?

string.search(regexp);

替换字符串可以包含以下特殊替换模式:

  结合浏览器提供的 setInterval 或 setTimeout API,高频改变DOM元素的一些属性,即可创造一个肉眼可见的动画效果。一个看起来非常流畅的JS动画除了需要良好的变换算法外,与其执行宿主也是非不开的。程序写得再好,如果浏览器过于老旧,电脑CPU性能低下,也会出现卡顿,甚至卡死。

下面是参数的详细信息:

图片 1

  执行一个动画函数对于浏览器来说是个苦差,设置动画一帧为多长时间才能既流畅又不损耗性能呢?浏览器不会傻到进行一个DOM操作,就去渲染一次页面。它会把一个周期内所有的DOM操作整合起来,统一进行一次渲染。这个周期大约在16.7ms左右,不同浏览器间会有几毫秒的差异。SetTimeout的第二个参数设置为1000/60是比较合乎情理的做法。不过了解过SetTimeout运行机制的都会清楚,这个时间并不可靠,其根据实际情况会有些许甚至相当大的延迟。那么有没有这样一个API?我不想知道你浏览器到底多久渲染一次,反正你渲染的时候给我的动画执行一帧就行了。答案是有,requestAnimationFrame,可以让函数随着浏览器渲染执行,并且执行时机是可靠的。注意,这个方法在现在浏览器及IE10 才被支持。

  •     regexp : 正则表达式对象。如果非RegExp对象obj传递,它是隐式通过使用new RegExp(obj) 转换为RegExp

 语法

  现在可以封装起一个简单的requestAnimationFrame,下面的例子中将会使用到它。

返回值:

string.replace(regexp/substr, newSubStr/function[, flags]);
window.requestAnimFrame = (function(){
 return window.requestAnimationFrame    ||
     window.webkitRequestAnimationFrame ||
     window.mozRequestAnimationFrame  ||
     function( callback ){
      window.setTimeout(callback, 1000 / 60);
     };
})();
  •     如果成功的话,搜索将返回字符串内的正则表达式的索引。否则,它返回 -1.

下面是参数的详细信息:

  更加详细的封装可以在张鑫旭的博客中看到:张鑫旭:requestAnimFrame。下面让我们继续。

例子:

  •     regexp : 一个RegExp对象。匹配被替换参数的返回#2.
  •     substr : 一个字符串,由newSubStr 来替换
  •     newSubStr : 它取代从参数中收到的子字符串 #1.
  •     function : 一个函数被调用以创建新的子串
  •     flags : 包含的正则表达式标志的任意组合字符串: g - 全局匹配, i - 忽略大小写,m - 匹配多行。此参数仅用于如果所述第一参数是一个字符串。

动画函数的编写

<html>
<head>
<title>JavaScript String search() Method</title>
</head>
<body>
<script type="text/javascript">

var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";

if ( str.search(re) == -1 ){
  document.write("Does not contain Apples" );
}else{
  document.write("Contains Apples" );
}

</script>
</body>
</html>

返回值:

  有了requestAnimationFrame,下面该考虑一下如何让写动画函数了。一般来说我们会给出一个毫秒级的during值,限制这个动画必须要在这个时间内完成。下面以实现一个小球从离页面左侧100px处匀速运动到800px处为例,编写一个动画函数:戳我查看DEMO。

这将产生以下结果:

  •     它只是返回一个新的改变的字符串
      var ele = document.getElementById("block");
      var start = Date.now();//获取动画开始的时间。
      var during = 1000; //此动画要在1秒内执行完。
      var p=0;//动画完成度 从0-1;
      requestAnimationFrame(function f(){
        if(p>=1){ ele.style.left="800px";}//如果发现动画已经执行完,将元素置到终点。
        else{
          p=(Date.now()-start)/during;
          ele.style.left=100 700*p "px"; //从100px开始,匀速向右移动,共移动700px;
          requestAnimationFrame(f);
        }
      })
Contains Apples

例子:

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:方法的使用,方法使用详解

关键词: 千赢国际官网