如图打开后或者手指拖动后元素有弹性的抖动,这个技术叫啥呀?该用什么实现呢?
如果能费时写个demo就更好了 万分感谢啦!
<!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>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
这里有篇教程,附带源文件下载。
可以参考:弹性摇摆效果幻灯片