阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript twenn动画代码思路

      代码基础

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>tween动画的基础支持</title>
          <style>
              #div1{
                  width: 100px;
                  height: 100px;
                  line-height: 100px;
                  text-align: center;
                  font-weight: bold;
                  background: orange;
                  position: absolute;
                  top: 200px;
                  left: 100px;
                  box-shadow: 5px 5px 10px blue;
                  border-radius: 10px;
                  border: 2px solid #ff0000;
              }
          </style>
      </head>
      <body>
      <div id="div1">朱安邦</div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          oDiv.onclick = move;
      
          /*    动画需要的参数
              - 起始位置:begin;
              - 一共需要移动的juice:change
              - 当前走的时间:times
              - 所需的总时间:duration
                步长:interval:运动是一步一步走的,也就是单步时间,可以通过控制单步的时间,来控制运动的效果;时间要求的短,步子就要迈大点,时间要求的长,就走小碎步
              */
      
          /*动画的初始条件*/
          var begin=oDiv.offsetLeft;//起点
          var target=600;//重点
          var change=target-begin;//总的移动距离=目的地-其实的位置;
          var times=0;
          var duration=1000;//总的时间;
          var nInterval=13;//一步走多少;步长;
      
      
          function move(){
              var timer=window.setTimeout(move,nInterval);
              if(times<duration){//时间到,就停止
                  times+=nInterval;
                  oDiv.style.left=linear(begin,change,times,duration)+"px";
              }else{
                  oDiv.style.left=target+"px";
                  clearTimeout(timer);
              }
          }
          /* 匀速运动公式:当前的位置=起始位置+总距离*(当前走的时间/所需要走的时间)*/
          function linear(begin,change,times,duration){
              return begin+change*(times/duration);
          }
      </script>
      

      代码

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>tween动画的基础支持</title>
          <style>
              #div1{
                  width: 100px;
                  height: 100px;
                  line-height: 100px;
                  text-align: center;
                  font-weight: bold;
                  background: orange;
                  position: absolute;
                  top: 200px;
                  left: 100px;
                  box-shadow: 5px 5px 10px blue;
                  border-radius: 10px;
                  border: 2px solid #ff0000;
              }
          </style>
      </head>
      <body>
      <div id="div1">JavaScript</div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          oDiv.onmouseover = function(){
              animate(this,"height",300,1000);
          };
          function animate(ele,attr,target,duration){
              var times=0;
              var begin=setCss(ele,attr);//起点
              var change=target-begin;//总的移动距离=目的地-其实的位置;
              var nInterval=13;//一步走多少;步长;
              function move(){
                  times+=nInterval;
                  if(times<duration){//时间到,就停止
                      ele.style[attr]=begin+change*(times/duration)+"px";
                  }else{
                      ele.style[attr]=target+"px";
                      clearInterval(timer);
                  }
              }
              var timer=window.setInterval(move,nInterval);
          };
          function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
              if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
                  var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
                  var flag="getElementsByClassName" in document;
                  var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
                  return !reg.test(attr) ? parseFloat(value) : value;
              } else{
                  switch (attr) {
                      case "opacity":
                          curEle["style"][attr] = value;
                          curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                          break;
                      case "zIndex":
                          curEle["style"][attr] = value;
                          break;
                      default:
                          curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
                  }
              }
          };
      </script>
      

      代码-透明度1

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>tween动画的基础支持</title>
          <style>
              #div1{
                  width: 100px;
                  height: 100px;
                  line-height: 100px;
                  text-align: center;
                  font-weight: bold;
                  background: orange;
                  position: absolute;
                  top: 200px;
                  left: 100px;
                  box-shadow: 5px 5px 10px blue;
                  border-radius: 10px;
                  border: 2px solid #ff0000;
                  opacity: 0.5;
                  filter:alpha(opacity=50);
              }
          </style>
      </head>
      <body>
      <div id="div1">朱安邦</div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          oDiv.onclick = function(){
              animate(this,"opacity",0.2,1000);
          };
          function animate(ele,attr,target,duration){
              var times=0;
              var begin=setCss(ele,attr);//起点
              var change=target-begin;//总的移动距离=目的地-其实的位置;
              var nInterval=13;//一步走多少;步长;
              console.log("开始:"+begin);
              console.log("重点:"+target);
              var timer=window.setInterval(move,nInterval);
              function move(){
                  times+=nInterval;
                  if(times>=duration){
                      if(attr==="opacity"){/*如果是opacity,需要用到小数*/
                          ele.style[attr]=target;
                          ele.style["filter"] = "alpha(opacity=" + target*100 + ")";
                          clearInterval(timer);
                      }else{
                          ele.style[attr]=target+"px";
                          clearInterval(timer);
                      }
      
                  }else{
                      if(attr==="opacity"){
                          ele.style[attr]=begin+change*(times/duration);
                          ele.style["filter"] = "alpha(opacity=" + (begin+change*(times/duration))*100 + ")";
                      }else{
                          ele.style[attr]=begin+change*(times/duration)+"px";
                      }
                  }
              }
          };
      
          function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
              if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
                  var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
                  var flag="getElementsByClassName" in document;
                  var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
                  return !reg.test(attr) ? parseFloat(value) : value;
              } else{
                  switch (attr) {
                      case "opacity":
                          curEle["style"][attr] = value;
                          curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                          break;
                      case "zIndex":
                          curEle["style"][attr] = value;
                          break;
                      default:
                          curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
                  }
              }
          };
      </script>
      

      代码-透明度2

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>tween动画的基础支持</title>
          <style>
              #div1{
                  width: 100px;
                  height: 100px;
                  line-height: 100px;
                  text-align: center;
                  font-weight: bold;
                  background: orange;
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  box-shadow: 5px 5px 10px blue;
                  border-radius: 10px;
                  border: 2px solid #ff0000;
                  opacity: 0.9;
                  filter:alpha(opacity=90);
              }
          </style>
      </head>
      <body>
      <div id="div1">朱安邦</div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          oDiv.onclick = function(){
              if(!this.timer){
                  animate(this,"left",500,1000,toGreen);
              }
          };
      
          function animate(ele,attr,target,duration,fnCallback){
              var times=0;
              var begin=setCss(ele,attr);//起点
              var change=target-begin;//总的移动距离=目的地-其实的位置;
              var nInterval=13;//一步走多少;步长;
              if(change===0){//解决无效运动,changge=begin;
                  if(typeof fnCallback=="function"){
                      fnCallback.call(ele);
                      return;
                  }
              };
      
              clearInterval(ele.timer);
              ele.timer=window.setInterval(move,nInterval);
              function move(){
                  times+=nInterval;
                  if(times>=duration){
                      setCss(ele,attr,target);
                      clearInterval(ele.timer);
                      ele.timer=null;//动画停止的时候,变为null;这样就成为elel这个元素是否在运动的判断依据了;
                      /*动画行为结束*/
                      if(typeof fnCallback=="function"){
                          fnCallback.call(ele);
                      }
                  }else{
                      var targetNumber=begin+change*(times/duration);
                      setCss(ele,attr,targetNumber);
                  }
              }
          };
          function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
              if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
                  var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
                  var flag="getElementsByClassName" in document;
                  var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
                  return !reg.test(attr) ? parseFloat(value) : value;
              } else{
                  switch (attr) {
                      case "opacity":
                          curEle["style"][attr] = value;
                          curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                          break;
                      case "zIndex":
                          curEle["style"][attr] = value;
                          break;
                      default:
                          curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
                  }
              }
          };
      
          //回调方法;
          function toGreen(){
              this.style.backgroundColor="green"
          };
          function fnRight(){
              animate(this,"left",600,1000,fnDown);
          }
          function fnDown(){
              animate(this,"top",600,1000,fnLeft);
          }
          function fnLeft(){
              animate(this,"left",0,1000,fnUp);
          }
          function fnUp(){
              animate(this,"top",0,1000,fnRight);
          }
      </script>
      
      

      代码-多方向封装

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>tween动画的基础支持</title>
          <style>
              #div1{
                  width: 100px;
                  height: 100px;
                  line-height: 100px;
                  text-align: center;
                  font-weight: bold;
                  background: orange;
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  box-shadow: 5px 5px 10px blue;
                  border-radius: 10px;
                  border: 2px solid #ff0000;
                  opacity: 0.4;
                  filter:alpha(opacity=40);
              }
          </style>
      </head>
      <body>
      <div id="div1">朱安邦</div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          var jsonStr={
              "left":500,
              top:400,
              "width":"200",
              "height":"200",
              "opacity":"0.8"
          };
          oDiv.onclick = function(){
              if(!this.timer){
                  starMove(this,jsonStr,1000,toGreen);
              }
          };
          function starMove(ele,jsonStr,duration,fnCallback){
              var oBegin={};//不同方向的起始值;
              var oChange={};//不同方向的运动距离;
              var booleanNum=0;
              for(var attr in jsonStr){
                  var begin=setCss(ele,attr);
                  var target=jsonStr[attr];
                  var change=target-begin;
                  if(change){
                      oBegin[attr]=begin;
                      oChange[attr]=change;
                      booleanNum++;
                  }
              }
              if(booleanNum===0){
                  if(typeof fnCallback=="function"){
                      fnCallback.call(ele);
                  }
                  return;
              }else{
                  var interval=13;
                  var times=0;
                  clearInterval(ele.timer);
                  ele.timer=window.setInterval(move,interval);
                  function move(){
                      times+=interval;
                      if(times>=duration){
                          clearInterval(ele.timer);
                          ele.timer=null;
                          for(var attr in jsonStr){
                              setCss(ele,attr,jsonStr[attr]);
                          }
                          if(typeof fnCallback=="function"){
                              fnCallback.call(ele);
                          }
                      }else{
                          for(var attr in oChange){
                              var targetNumber=oBegin[attr]+oChange[attr]*(times/duration);
                              setCss(ele,attr,targetNumber);
                          }
                      }
                  }
              }
          };
      
          //回调方法;
          function toGreen(){
              setCss(this,"backgroundColor","green");
          };
          function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
              if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
                  var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
                  var flag="getElementsByClassName" in document;
                  var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
                  return !reg.test(attr) ? parseFloat(value) : value;
              } else{
                  switch (attr) {
                      case "opacity":
                          curEle["style"][attr] = value;
                          curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                          break;
                      case "float":
                          curEle["style"].cssFloat = value;
                          curEle["style"].styleFloat = value;
                          break;
                      case "backgroundColor":
                          curEle["style"][attr] = value;
                          break;
                      case "zIndex":
                          curEle["style"][attr] = value;
                          break;
                      default:
                          curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
                  }
              }
          };
      
      </script>
      
      
      目录
      目录