元素惯性抖动?是这么说的吧= =?

帅气法神
  • 288

如图打开后或者手指拖动后元素有弹性的抖动,这个技术叫啥呀?该用什么实现呢?
如果能费时写个demo就更好了 万分感谢啦!

gif_cuatro_o_cinco.gif

回复
阅读 1.4k
5 个回答
✓ 已被采纳

这个效果有点难,怕是要用原生来弄哦

参考 animate.css

刘志国
  • 1
新手上路,请多包涵

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width:100px;
            height:100px;
            background-color:blue;
            position: absolute;
            border-radius: 50%;
            bottom:0px;
            right:0px;
        }
        #div0{
            width:1000px;
            height:200px;
            border:1px solid red;
            position:relative;
        }
    </style>
</head>
<body>
    <div id = "div0">
        <div id = "div1"></div>
    </div>
    
</body>
<script src="js/tween.js"></script>
<script>
    var div1 = document.getElementById("div1");
    var timer = setInterval(fun,50);    
    
    var t=0;//起始步数
    var b=0;//起始位置
    var c=900;//位置的变化量
    var d=100;//总步数
    
    function fun()
    {
        t+=1;
        if(t>=d)
        {
            clearInterval(timer);
        }
        //div1.style.left = Tween.Linear(t,b,c,d)+"px";    
        //div1.style.left = Tween.Back.easeIn(t,b,c,d)+"px";
        //div1.style.left = Tween.Back.easeOut(t,b,c,d)+"px";
        //div1.style.left = Tween.Back.easeInOut(t,b,c,d)+"px";
        div1.style.left = Tween.Bounce.easeInOut(t,b,c,d)+"px";

        //Linear()
        //Back.easeIn(), Back.easeInOut(), Back.easeOut()
        //Bounce.easeIn(), Bounce.easeInOut() Bounce.easeOut()            
    }

</script>

</html>

css3动画效果,具体样式可以参考animate.css的代码

你知道吗?

宣传栏