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

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

gif_cuatro_o_cinco.gif

阅读 3.8k
5 个回答

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

参考 animate.css

新手上路,请多包涵

<!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的代码

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题