JS实现div的抖动：缓动式抖动

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1 {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 400px;
                top: 200px;
                background: red;
            }
        </style>
    </head>

    <body>
        <div id="div1"></div>

        <script>
            var div1 = document.querySelector('#div1');

            document.onclick = function() {

                /*
                 * 抖动：
                 * 1. 每次改变一下元素的位置
                 * 按照一个中心点进行偏移，假设中心点left原始是400，那么每次就以left：400为中心做位置的移动
                 * 380 -> 420
                 * */

                // div1.style.left = '380px';
                // div1.style.left = '420px';

                var a = true;

                setInterval(function() {

                    /*
                     * 根据a的值，做不同的设置
                     * */
                    div1.style.left = (a ? 380 : 420) + 'px';//这样可以实现小幅度的抖动效果，但是大幅度的抖动就会显得很生硬
　　　　　　　　　　　　
                    a = !a;

                }, 30);

            }
　　　　　　/*缓动代码*/            
　　　　　　var tween = {
    　　　　　　linear:function(t,b,c,d){
        　　　　　　return c*t/d + b;
    　　　　　　},
    　　　　　　easeIn:function(t,b,c,d){
        　　　　　　return c * ( t /= d ) * t + b;
    　　　　　　},
    　　　　　　strongEaseIn:function(t,b,c,d){
        　　　　　　return c * ( t /= d ) * t * t * t * t + b;
    　　　　　　},
    　　　　　　strongEaseOut:function(t,b,c,d){
        　　　　　　return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b;
    　　　　　　},
    　　　　　　sineaseIn:function(t,b,c,d){
        　　　　　　return c * ( t /= d ) * t * t + b;    
    　　　　　　},
    　　　　　　sineaseOut:function(t,b,c,d){
        　　　　　　return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b;
    　　　　　　}
　　　　　　};

　　　　　　var Animate = function(dom){
    　　　　　　this.dom = dom;
    　　　　　　this.startTime = 0;
    　　　　　　this.startPos = 0;
    　　　　　　this.endPos = 0;
    　　　　　　this.propertyName = null;
    　　　　　　this.easing = null;
    　　　　　　this.duration = null;
　　　　　　}

　　　　　　Animate.prototype.start = function(propertyName,endPos,duration,easing){
    　　　　　　this.startTime = +new Date;
    　　　　　　this.startPos = this.dom.getBoundingClientRect()[propertyName];
    　　　　　　this.propertyName = propertyName;
    　　　　　　this.endPos = endPos;
    　　　　　　this.duration = duration;
    　　　　　　this.easing = tween[easing];

    　　　　　　var self = this;
    　　　　　　var timeId = setInterval(function(){
        　　　　　　if(self.step() === false){
            　　　　　　clearInterval(timeId);
        　　　　　　}
    　　　　　　},19);
　　　　　　}

　　　　　　Animate.prototype.step = function(){
    　　　　　　var t = +new Date;
    　　　　　　if(t>=this.startTime + this.duration){
        　　　　　　this.update(this.endPos);
        　　　　　　return false;
    　　　　　　}
   　　 　　　　var pos = this.easing(t-this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
    　　　　　　this.update(pos);
　　　　　　}

　　　　　　Animate.prototype.update = function(pos){
    　　　　　　this.dom.style[this.propertyName] = pos + 'px';
　　　　　　}
　　　　　　var b = true;
　　　　　　var div = document.getElementById('div');
　　　　　　var animate = new Animate(div);
　　　　　　setInterval(function() {
　　　　　　　　animate.start('left',(a ? 380 : 420),1000,'strongEaseOut');//如果用缓动的效果来实现较大幅度的抖动，那视觉上就可以看到更舒适了
　　　　　　　　a = !a;
　　　　　　}, 30);
　　　　</script> 

　　</body> 

</html>

 

posted @ 2018-07-10 12:20  雨夜看叶  阅读(3386)  评论(0)  编辑  收藏  举报