通过js使用动画曲线

最新推荐文章于 2024-06-25 12:49:20 发布

汤玉鹏

最新推荐文章于 2024-06-25 12:49:20 发布

阅读量1.1k

点赞数

	<!DOCTYPE html><htmllang="zh-cn"><head><metacharset="UTF-8"><title>通过js使用动画曲线</title><style>#ball {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: red;
	}</style></head>
	<html>
	<body>
	<div id="ball"></div>
	<script type="text/javascript">
	var Tween = {
	"Elastic" : {
	easeOut: function(t, b, c, d, a, p) {
	var s;
	if(t == 0) return b;
	if((t /= d) == 1) return b + c;
	if(typeof p == "undefined") p = d * .3;
	if(!a \|\| a < Math.abs(c)) {
	a = c;
	s = p / 4;
	} else {
	s = p / (2 * Math.PI) * Math.asin(c / a);
	}
	return(a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
	}
	}
	};

	var ball = document.getElementById("ball")
	var elasticFall = function() {
	var start = 0,
	beginingValue = 0,
	changeValue = 400,
	during = 100;
	var _run= function() {
	start++;
	var top = Tween.Elastic.easeOut(start, beginingValue, changeValue, during);
	ball.style.webkitTransform = "translateY("+top+"px)";
	if(start < during) requestAnimationFrame(_run);
	}
	_run();
	};
	elasticFall();
	</script>
	</body>
	</html><script></script></html> https://github.com/zhangxinxu/Tween/blob/master/tween.js

关注