找回密码
当前位置：前端开发者 > 教程 > 正文

【算法】前端开发效果实例_缓动效果

2018-06-15 21:41:39 分类：教程 阅读(508) 评论(0)

前端组建化开发实例|算法语言与前端开发|数据结构与算法对前端开发重要吗 为什么？

参数：
t:时间，区间[0,1]；
b:开始位置；
c:终点位置减去开始位置

最要研究的是easeInOut算法，javascript的代码没怎么整理（凑合看吧。。。）
[code]<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”Author” content=”” />
<meta name=”Keywords” content=”” />
<meta name=”Description” content=”” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no,minimal-ui” />
<title>Easing</title>
<style>

show{position:relative;height:40px;width:500px;margin:50px 50px 0;border:1px solid #CCC;}

#show>span{position:absolute;width:40px;height:100%;background-color:blue;}
form{margin-left:50px;}

</style>
</head>
<body>
<div id=”show”><span></span></div>
<canvas></canvas>
<form>
<label><input type=”radio” name=”type” value=”linear” checked=”checked” />linear</label>
<label><input type=”radio” name=”type” value=”easeIn” />easeIn</label>
<label><input type=”radio” name=”type” value=”easeOut” />easeOut</label>
<label><input type=”radio” name=”type” value=”easeInOut” />easeInOut</label>
<input type=”button” value=” run ” />
</form>
<script>
var Easing={
linear:function(t,b,c){
return b+ct;
},
easeIn:function(t,b,c){
return b+ctt;
},
easeOut:function(t,b,c){
return b+c(2t-tt);
},
easeInOut:function(t,b,c){
return b+c/2(1-Math.cos(Math.PIt));
}
};

 var W=600,H=400,
   cvs=document.querySelector("canvas"),g=cvs.getContext("2d"),
   inps=document.querySelectorAll("input");
   cvs.width=W;
   cvs.height=H;

   function init(g){
     g.strokeStyle="#CCC";
     g.font="16px Arial";

     g.rect(49.5,49.5,W-100,H-100);
     g.fillText("0",50,H-50+14);
     g.fillText("t",W/2,H-50+14);
     g.fillText("1",W-50,H-50+14);
     g.fillText("b",30,H-50);
     g.fillText("c",30,50);
     g.stroke();
   }
   function draw(g,t,c){
     g.lineTo(50+t*(W-100),H-50-c/460*(H-100));
   }         

   init(g);

   inps[4].addEventListener("click",function(){
      var span=document.querySelector("#show>span"),
       t=0,
       b=0,
       c=span.parentNode.clientWidth-b-span.offsetWidth,
       type;
       for(var i=0,l=inps.length-1;i<l;i++)
       {
         if(inps[i].checked)
         {
           type=inps[i].value;
           break;
         }
       }

       g.clearRect(50,50,W-101,H-101);           
       g.beginPath();
       g.moveTo(50,H-50);
       (function(){
          t+=0.02;
          g.strokeStyle="blue";
          draw(g,t,Easing[type](t,b,c));
          g.stroke();
         if(t<1)
         {
           span.style.left=Easing[type](t,b,c)+"px";
           setTimeout(arguments.callee,16.7);
         }
         else
         {
           span.style.left=Easing[type](1,b,c)+"px";
         }
       })();
   },false);

</script>
</body>
</html>
[/code]
代码片段 1

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″ />
    <meta name=”Author” content=”” />
    <meta name=”Keywords” content=”” />
    <meta name=”Description” content=”” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no,minimal-ui” />
    <title>前端开发工程师 职业感悟：Easing</title>
    <style>
        #show {
            position: relative;
            height: 40px;
            width: 500px;
            margin: 50px 50px 0;
            border: 1px solid #CCC;
        }
        #show>span {
            position: absolute;
            width: 40px;
            height: 100%;
            background-color: blue;
        }
        form {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div id=”show”>
        <span></span>
    </div>
    <canvas></canvas>
    <form>
        <label>
            <input type=”radio” name=”type” value=”linear” checked=”checked” />linear</label>
        <label>
            <input type=”radio” name=”type” value=”easeIn” />easeIn</label>
        <label>
            <input type=”radio” name=”type” value=”easeOut” />easeOut</label>
        <label>
            <input type=”radio” name=”type” value=”easeInOut” />easeInOut</label>
        <input type=”button” value=” run ” />
    </form>
    <script>
        var Easing = {
            linear: function (t, b, c) {
                return b + c * t;
            },
            easeIn: function (t, b, c) {
                return b + c * t * t;
            },
            easeOut: function (t, b, c) {
                return b + c * (2 * t – t * t);
            },
            easeInOut: function (t, b, c) {
                return b + c / 2 * (1 – Math.cos(Math.PI * t));
            }
        };
        var W = 600,
            H = 400,
            cvs = document.querySelector(“canvas”),
            g = cvs.getContext(“2d”),
            inps = document.querySelectorAll(“input”);
        cvs.width = W;
        cvs.height = H;
        function init(g) {
            g.strokeStyle = “#CCC”;
            g.font = “16px Arial”;
            g.rect(49.5, 49.5, W – 100, H – 100);
            g.fillText(“0”, 50, H – 50 + 14);
            g.fillText(“t”, W / 2, H – 50 + 14);
            g.fillText(“1”, W – 50, H – 50 + 14);
            g.fillText(“b”, 30, H – 50);
            g.fillText(“c”, 30, 50);
            g.stroke();
        }
        function draw(g, t, c) {
            g.lineTo(50 + t * (W – 100), H – 50 – c / 460 * (H – 100));
        }
        init(g);
        inps[4].addEventListener(“click”, function () {
            var span = document.querySelector(“#show>span”),
                t = 0,
                b = 0,
                c = span.parentNode.clientWidth – b – span.offsetWidth,
                type;
            for (var i = 0, l = inps.length – 1; i < l; i++) {
                if (inps[i].checked) {
                    type = inps[i].value;
                    break;
                }
            }
            g.clearRect(50, 50, W – 101, H – 101);
            g.beginPath();
            g.moveTo(50, H – 50);
            (function () {
                t += 0.02;
                g.strokeStyle = “blue”;
                draw(g, t, Easing[type](t, b, c));
                g.stroke();
                if (t < 1) {
                    span.style.left = Easing[type](t, b, c) + “px”;
                    setTimeout(arguments.callee, 16.7);
                } else {
                    span.style.left = Easing[type](1, b, c) + “px”;
                }
            })();
        }, false);
    </script>
</body>
</html>
web前端开发工程师要会哪些？|前端_开发_算法的薪资|前端开发需要会算法吗？
» 本文来自：前端开发者 » 《【算法】前端开发效果实例_缓动效果》
» 本文链接地址：https://www.rokub.com/3865.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论