分享js动画案例(初学了解)

可直接复制代码运行查看效果

 

<!DOCTYPE html>
<html>

<head> 
	<meta charset="utf-8">
	<title>基础动画了解</title>
</head>
<body style="background-color: #000;position: relative;">
	<div class="contain">
		<div class="ball" id="ball"></div>
		<div class="pplayout" id="contain"></div>
	</div>
	<style type="text/css">
		.point{width:1px;height: 1px;border-radius: 50%;overflow: hidden;background:#000;left: 0;top:0;position: absolute;}
		.contain{background-color: #eee;width: 500px;height: 300px;position: relative;display: block;margin:0 auto;margin-top: 10%;}
		.pplayout{width: 100%;height: 100%;position: relative;display: block;z-index: 5;}
		.ball{width:10px;height: 10px;border-radius: 50%;overflow: hidden;box-shadow: 0 0 3px red;background-image: linear-gradient(-90deg, red, yellow);left: -5px;top:295px;position: absolute;z-index: 10;}
		button{
			margin: 5px 0 0 5px;
		}
	</style>
	<div style="margin: 0 auto;width: 500px;">
		<button onclick="runAni('Linear')">Linear</button>
		<button onclick="runAni('Quad.easeIn')">Quad.easeIn</button>
		<button onclick="runAni('Quad.easeOut')">Quad.easeOut</button>
		<button onclick="runAni('Quad.easeInOut')">Quad.easeInOut</button>

		<button onclick="runAni('Cubic.easeIn')">Cubic.easeIn</button>
		<button onclick="runAni('Cubic.easeOut')">Cubic.easeOut</button>
		<button onclick="runAni('Cubic.easeInOut')">Cubic.easeInOut</button>

		<button onclick="runAni('Quart.easeIn')">Quart.easeIn</button>
		<button onclick="runAni('Quart.easeOut')">Quart.easeOut</button>
		<button onclick="runAni('Quart.easeInOut')">Quart.easeInOut</button>

		<button onclick="runAni('Sine.easeIn')">Sine.easeIn</button>
		<button onclick="runAni('Sine.easeOut')">Sine.easeOut</button>
		<button onclick="runAni('Sine.easeInOut')">Sine.easeInOut</button>

		<button onclick="runAni('Expo.easeIn')">Expo.easeIn</button>
		<button onclick="runAni('Expo.easeOut')">Expo.easeOut</button>
		<button onclick="runAni('Expo.easeInOut')">Expo.easeInOut</button>

		<button onclick="runAni('Circ.easeIn')">Circ.easeIn</button>
		<button onclick="runAni('Circ.easeOut')">Circ.easeOut</button>
		<button onclick="runAni('Circ.easeInOut')">Circ.easeInOut</button>

		<button onclick="runAni('Elastic.easeIn')">Elastic.easeIn</button>
		<button onclick="runAni('Elastic.easeOut')">Elastic.easeOut</button>
		<button onclick="runAni('Elastic.easeInOut')">Elastic.easeInOut</button>

		<button onclick="runAni('Back.easeIn')">Back.easeIn</button>
		<button onclick="runAni('Back.easeOut')">Back.easeOut</button>
		<button onclick="runAni('Back.easeInOut')">Back.easeInOut</button>

		<button onclick="runAni('Bounce.easeIn')">Bounce.easeIn</button>
		<button onclick="runAni('Bounce.easeOut')">Bounce.easeOut</button>
		<button onclick="runAni('Bounce.easeInOut')">Bounce.easeInOut</button>
	</div>
	<script type="text/javascript">
		/*
		 * Tween.js
		 * t: current time(当前时间);
		 * b: beginning value(初始值);
		 * c: change in value(变化量);
		 * d: duration(持续时间)。
		 */
		var Tween = {
			Linear: function(t, b, c, d) { //匀速
				return c * t / d + b;
			},
			Quad: { //二次方缓动效果
				easeIn: function(t, b, c, d) {
					return c * (t /= d) * t + b;
				},
				easeOut: function(t, b, c, d) {
					return -c * (t /= d) * (t - 2) + b;
				},
				easeInOut: function(t, b, c, d) {
					if ((t /= d / 2) < 1) return c / 2 * t * t + b;
					return -c / 2 * ((--t) * (t - 2) - 1) + b;
				}
			},
			Cubic: { //三次方缓动效果
				easeIn: function(t, b, c, d) {
					return c * (t /= d) * t * t + b;
				},
				easeOut: function(t, b, c, d) {
					return c * ((t = t / d - 1) * t * t + 1) + b;
				},
				easeInOut: function(t, b, c, d) {
					if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
					return c / 2 * ((t -= 2) * t * t + 2) + b;
				}
			},
			Quart: { //四次方缓动效果
				easeIn: function(t, b, c, d) {
					return c * (t /= d) * t * t * t + b;
				},
				easeOut: function(t, b, c, d) {
					return -c * ((t = t / d - 1) * t * t * t - 1) + b;
				},
				easeInOut: function(t, b, c, d) {
					if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
					return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
				}
			},
			Quint: { //五次方缓动效果
				easeIn: function(t, b, c, d) {
					return c * (t /= d) * t * t * t * t + b;
				},
				easeOut: function(t, b, c, d) {
					return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
				},
				easeInOut: function(t, b, c, d) {
					if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
					return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
				}
			},
			Sine: { //正弦缓动效果
				easeIn: function(t, b, c, d) {
					return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
				},
				easeOut: function(t, b, c, d) {
					return c * Math.sin(t / d * (Math.PI / 2)) + b;
				},
				easeInOut: function(t, b, c, d) {
					return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
				}
			},
			Expo: { //指数缓动效果
				easeIn: function(t, b, c, d) {
					return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
				},
				easeOut: function(t, b, c, d) {
					return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
				},
				easeInOut: function(t, b, c, d) {
					if (t == 0) return b;
					if (t == d) return b + c;
					if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
					return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
				}
			},
			Circ: { //圆形缓动函数
				easeIn: function(t, b, c, d) {
					return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
				},
				easeOut: function(t, b, c, d) {
					return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
				},
				easeInOut: function(t, b, c, d) {
					if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
					return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
				}
			},
			Elastic: { //指数衰减正弦曲线缓动函数
				easeIn: 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)) {
						s = p / 4;
						a = c;
					} else {
						s = p / (2 * Math.PI) * Math.asin(c / a);
					}
					return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
				},
				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);
				},
				easeInOut: function(t, b, c, d, a, p) { //先加速后减速
					var s;
					if (t == 0) return b;
					if ((t /= d / 2) == 2) return b + c;
					if (typeof p == "undefined") p = d * (.3 * 1.5);
					if (!a || a < Math.abs(c)) {
						a = c;
						s = p / 4;
					} else {
						s = p / (2 * Math.PI) * Math.asin(c / a);
					}
					if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
					return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
				}
			},
			Back: { //超过范围的三次方的缓动函数
				easeIn: function(t, b, c, d, s) {
					if (typeof s == "undefined") s = 1.70158;
					return c * (t /= d) * t * ((s + 1) * t - s) + b;
				},
				easeOut: function(t, b, c, d, s) {
					if (typeof s == "undefined") s = 1.70158;
					return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
				},
				easeInOut: function(t, b, c, d, s) {
					if (typeof s == "undefined") s = 1.70158;
					if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
					return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
				}
			},
			Bounce: { //指数衰减的反弹曲线缓动函数
				easeIn: function(t, b, c, d) {
					return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
				},
				easeOut: function(t, b, c, d) {
					if ((t /= d) < (1 / 2.75)) {
						return c * (7.5625 * t * t) + b;
					} else if (t < (2 / 2.75)) {
						return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
					} else if (t < (2.5 / 2.75)) {
						return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
					} else {
						return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
					}
				},
				easeInOut: function(t, b, c, d) {
					if (t < d / 2) {
						return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
					} else {
						return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
					}
				}
			}
		}

		function runAni(str){
			var dom = document.getElementById("ball");
			var lay = document.getElementById("contain");
			lay.innerHTML = ""
			// var event = function(){}
			// switch(str){
			// 	case 'Linear': event = Tween.Linear;break

			// 	case 'Quad.easeIn': event = Tween.Quad.easeIn;break
			// 	case 'Quad.easeOut': event = Tween.Quad.easeOut;break
			// 	case 'Quad.easeInOut': event = Tween.Quad.easeInOut;break

			// 	case 'Cubic.easeIn': event = Tween.Cubic.easeIn;break
			// 	case 'Cubic.easeOut': event = Tween.Cubic.easeOut;break
			// 	case 'Cubic.easeInOut': event = Tween.Cubic.easeInOut;break

			// 	case 'Quart.easeIn': event = Tween.Quart.easeIn;break
			// 	case 'Quart.easeOut': event = Tween.Quart.easeOut;break
			// 	case 'Quart.easeInOut': event = Tween.Quart.easeInOut;break

			// 	case 'Quint.easeIn': event = Tween.Quint.easeIn;break
			// 	case 'Quint.easeOut': event = Tween.Quint.easeOut;break
			// 	case 'Quint.easeInOut': event = Tween.Quint.easeInOut;break

			// 	case 'Sine.easeIn': event = Tween.Sine.easeIn;break
			// 	case 'Sine.easeOut': event = Tween.Sine.easeOut;break
			// 	case 'Sine.easeInOut': event = Tween.Sine.easeInOut;break

			// 	case 'Expo.easeIn': event = Tween.Expo.easeIn;break
			// 	case 'Expo.easeOut': event = Tween.Expo.easeOut;break
			// 	case 'Expo.easeInOut': event = Tween.Expo.easeInOut;break

			// 	case 'Circ.easeIn': event = Tween.Circ.easeIn;break
			// 	case 'Circ.easeOut': event = Tween.Circ.easeOut;break
			// 	case 'Circ.easeInOut': event = Tween.Circ.easeInOut;break

			// 	case 'Elastic.easeIn': event = Tween.Elastic.easeIn;break
			// 	case 'Elastic.easeOut': event = Tween.Elastic.easeOut;break
			// 	case 'Elastic.easeInOut': event = Tween.Elastic.easeInOut;break

			// 	case 'Back.easeIn': event = Tween.Back.easeIn;break
			// 	case 'Back.easeOut': event = Tween.Back.easeOut;break
			// 	case 'Back.easeInOut': event = Tween.Back.easeInOut;break

			// 	case 'Bounce.easeIn': event = Tween.Bounce.easeIn;break
			// 	case 'Bounce.easeOut': event = Tween.Bounce.easeOut;break
			// 	case 'Bounce.easeInOut': event = Tween.Bounce.easeInOut;break
			// 	default:
			// }

			var start = 0,end = 500
			var ti = setInterval(function(){
				try{
					let left = start;
					// let top = (300 - event(start,1,300,500));
					let top = (300 - eval(`Tween.${str}(start,1,300,500)`));

					dom.style.left = (start - 5) + 'px';
					dom.style.top  = (top - 5) + 'px';
					start++

					var child = document.createElement("div")
					child.className  = "point"
					child.style.left = left + 'px';
					child.style.top  = top + 'px';

					lay.appendChild(child)
					if(start >= end){
						clearInterval(ti)
					}
				}catch(er){
					console.dir(er)
					clearInterval(ti)
				}
			},16)
		}
	</script>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值