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

最新推荐文章于 2023-07-06 21:45:43 发布
最新推荐文章于 2023-07-06 21:45:43 发布
阅读量277 收藏
点赞数
分类专栏： 兴趣爱好 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37118353/article/details/108953906
版权

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

 

<!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
    评论
专栏目录
javascript简易的动画效果
Sore4的博客
03-28 2616
JavaScript做一个简易的动画效果，主要还是要注意的是js部分 还是和往常一样创建一个HTML，如下图（开始操作）： 首先写一个div做成一个正方形盒子，内名为“box”，也可以给它写其他名，自由创作 再写两个div做成竖线，各自给一个不同的内名，在script用来做检测判断用的 还有再加两个input标签或者button标签，各给一个id名 如下图： 给这些div标签和input标签做好css属性样式，以及定好位置，如下图代码： 这就是在浏览器的一个样貌，颜色可以自己随意去改.
500套JavaScript小案例
05-11
JavaScript，作为全球最广泛使用的编程语言之一，是创建交互式...无论你是初学者还是有经验的开发者，"500套JavaScript小案例" 都是一份宝贵的资源，它可以帮助你不断提升JavaScript技能，适应快速变化的前端开发环境。
javaScript动画项目案例
小青头的博客
04-25 3751
javaScript动画项目案例 示例代码：我的github 1.动画库编写 匀速运动 案例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
JavaScript 动画案例分析
qq937654393的博客
03-19 776
一、onScroll事件1.用处：是页面滚动条滚动事件，当页面滚动条滚动时候，自动触发2.从属于window对象，事件应绑定到window对象上二、scrollTop和scrollLeft1.含义： scrollTop指的是向上滚动头部高度        scrollLeft指的是向左滚动的宽度2.注意：兼容性不好，不同浏览器的scrollTop/scrollLeft属性从属对象不一chrom浏览...
分享113个JS特效动画效果，总有一款适合您
zy0412326的专栏
02-05 4769
js
JavaScript动画应用实例
最新发布
2301_77083521的博客
07-06 376
（1）第一个样式规则（.f）定义了一个宽度为1000像素、高度为600像素、红色边框的元素。（2）第二个样式规则（.z）定义了一个宽度为100像素、高度为100像素、圆形边框、黑色背景的元素。这个元素的位置是绝对定位，位于父元素的正中心位置（left: 450px;top:250px;），并且拥有较高的堆叠顺序（z-index: 2）。（3）第三个样式规则（.f1）定义了一个宽度为1000像素、高度为50像素、相对定位的元素。
20个前端动画案例合集
02-05
这个"20个前端动画案例合集"是前端开发者和设计师们学习和提升技能的宝贵资源。在这个合集中，我们可以看到各种使用CSS3动画和JavaScript实现的创新效果，这些动画能够增强用户体验，提升网站的互动性和吸引力。 ...
css和js小案例.zip
07-19
总的来说，"css和js小案例.zip"是一个宝贵的教育资源，它涵盖了CSS和JavaScript的基础到进阶知识，适合不同层次的学习者。通过这些案例，你可以提升自己的技能，了解这两种语言的最新趋势，并且能够将所学应用到实际...
three.js 入门案例详解
10-18
本篇文章将通过一个简单的入门案例，帮助初学者理解three.js 的基本使用方法。 1. **下载与引入three.js** three.js 的最新版本可以从其GitHub仓库（https://github.com/mrdoob/three.js）获取。下载后，将其引用...
关键帧和过渡动画小案例.zip
03-21
本案例集“关键帧和过渡动画小案例.zip”提供了三个精心设计的小项目，旨在帮助初学者理解并实践这两种动画方式。 首先，我们要了解关键帧动画。关键帧动画是通过在时间轴上设置特定时刻的关键状态，然后由软件自动...
JS动画案例
08-04
完美动画框架，能实现日常常用动画效果。
原生js实现jquery函数animate()动画效果的简单实例
10-21
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js基础动画（分享）
03-24
setInterval（函数，毫秒） 定时器 onmouseover 鼠标移入 onmouseout 鼠标移出 object.style.left 修改left object.offsetLeft 当前的left object.style.left=object.offsetLeft+num'px' clearInterval 清除定时器
分享92个JS特效动画效果，总有一款适合您
zy0412326的专栏
02-05 739
js
js习题（筋斗云导航栏）
weixin_46611729的博客
10-01 524
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none;
JavaScript 动画效果的实现（附带示例）
Itmastergo的博客
01-29 2132
JavaScript 动画主要是通过修改元素样式来实现的，能够实现许多 CSS 动画所不能实现的效果，例如暂停、回放等。
tweens运动说明以及图表展示
榴莲不好吃的专栏
12-09 1660
linear 线性匀速运动效果 Sine.easeIn 正弦曲线的缓动（sin(t)）/ 从0开始加速的缓动，也就是先慢后快 Sine.easeOut 正弦曲线的缓动（sin(t)）/ 减速到0的缓动，也就是先快后慢 Sine.easeInOut 正弦曲线的缓动（sin(t)）/ 前半段从0开始加速，后半段减速到0的缓动 Quad.easeIn 二次方的缓动（t^2）/ 从0开始加速的缓动，也就是先慢后快 Quad.easeOut 二次方的缓动（t^2）/ 减速到0的缓动，也就是先快后慢 Quad.ease
24个适合初学者练习的CSS 和 Javascript 动画效果案例
web前端开发
10-15 5289
英文 | https://niemvuilaptrinh.medium.com/24-css-javascript-animation-effects-a4c5b6e98a59翻译 | 杨...
js---基础案例-移动动画
weixin_41086056的博客
02-28 184
效果图： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/titl
JavaScript动画实战：打造引人入胜的Web体验
此外，书中还探讨了如何利用CSS变换来创建动画的丰富深度，以及如何有效地利用JavaScript动画库（如Velocity.js）来简化动画编程工作。无论你是初学者还是经验丰富的Web开发者，这本书都涵盖了从动画性能到理论的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值