js的动画效果（框架）

最新推荐文章于 2024-06-13 21:22:53 发布
最新推荐文章于 2024-06-13 21:22:53 发布
阅读量625 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lina2017lina/article/details/79345628
版权

在制作静态页面中，少不了要学习一些动态的效果。例如图片的跳跃、鼠标移入移出、图表的变化的一些效果等等许多。

如果页面中有许多的效果，每做一个效果都想一个流程的话会很麻烦，所以，将动画效果的框架做一个整理就是很有必要的了。今天就是将一些动画框架做一个整理，方便使用。

运动中，无非改变的是width、left、height、right、opacity等等值，总结如下，有几种框架。

一、一般运动

代码：
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>运动框架</title>
        <style>
        	body{
        		padding: 0px;
        		margin: 0px;
        	}
        	.box{
        		width: 200px;
        		height: 100px;
        		left: -200px;
        		background: #003EFF;
        		position: relative;
        	}
        	.share{
        		position: absolute;
        		background: #122B40;
        		color: white;
        		display: block;
        		width: 20px;
        		height: 50px;
        		left: 200px;
        		top: 20px;
        	}
        </style>
        <script>
        	window.οnlοad=function(){
        		var oBox=document.getElementById('box');
        		oBox.οnmοuseοver=function(){
        			move(0);
        		}
        		oBox.οnmοuseοut=function(){
        			move(-200);
        		}
        	}
        	var time=null;
        	function move(targat){
        		var oBox=document.getElementById('box');
        		var speed=0;
        		if (oBox.offsetLeft<targat) {
        			speed=10;
        		} else{
        			speed=-10;
        		}
        		clearInterval(time);
        		time=setInterval(function(){
        			if(oBox.offsetLeft==targat){
        				clearInterval(time);
        			}else{
        				oBox.style.left=oBox.offsetLeft+speed+'px';
        			}
        		},30);
        	}
        </script>
    </head>
    <body>
    	<div class="box" id="box">
    		<span class="share" id="share">分享</span>
    	</div>
 	</body>
</html>

简单物体移入移出

总结框架：是单一的某个属性的匀速运动

clearinterval（time）;                        
time=setinterval（function(){                 
    if(变化属性==目标值){
        clearInterval(time);
    }else{
        速度变化
    }
}，30）

二、缓冲运动

分析：距离越大速度越大，距离越小速度越小。成正比
代码：
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>运动框架</title>
        <style>
        	body{
        		padding: 0px;
        		margin: 0px;
        	}
        	.box{
        		width: 200px;
        		height: 100px;
        		left: -200px;
        		background: #003EFF;
        		position: relative;
        	}
        	.share{
        		position: absolute;
        		background: #122B40;
        		color: white;
        		display: block;
        		width: 20px;
        		height: 50px;
        		left: 200px;
        		top: 20px;
        	}
        </style>
        <script>
        	window.οnlοad=function(){
        		var oBox=document.getElementById('box');
        		oBox.οnmοuseοver=function(){
        			move(0);
        		}
        		oBox.οnmοuseοut=function(){
        			move(-200);
        		}
        	}
        	var time=null;
        	function move(targat){
        		var oBox=document.getElementById('box');
        		clearInterval(time);
        		time=setInterval(function(){
        			var speed=(targat-oBox.offsetLeft)/15;
        			speed=speed>0?Math.ceil(speed):Math.floor(speed);
        			if(oBox.offsetLeft==targat){
        				clearInterval(time);
        			}else{
        				oBox.style.left=oBox.offsetLeft+speed+'px';
        			}
        		},30);
        	}
        </script>
    </head>
    <body>
    	<div class="box" id="box">
    		<span class="share" id="share">分享</span>
    	</div>
 	</body>
</html>

三、多物体运动

代码（多物体单属性）：
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>运动框架</title>
        <style>
        	body{
        		padding: 0px;
        		margin: 0px;
        	}
        	ul,li{
        		list-style: none;
        	}
        	ul li{
        		width: 200px;
        		height: 100px;
        		background: yellow;
        		margin-bottom: 20px;
        	}
        </style>
        <script>
        	window.οnlοad=function(){
        		var aLi=document.getElementsByTagName('li');
        		for(var i=0;i<aLi.length;i++){
        			aLi[i].timer=null;
        			aLi[i].οnmοuseοver=function(){
        				move(this,300);
        			}
        			aLi[i].οnmοuseοut=function(){
        				move(this,200);
        			}
        		}
        	}
        	function move(obj,target){
        		clearInterval(obj.timer);
        		obj.timer=setInterval(function(){
        			var speed=(target-obj.offsetWidth)/8;
        			speed=speed>0?Math.ceil(speed):Math.floor(speed);
        			if(obj.offsetWidth==target){
        				clearInterval(obj.timer);
        			}else{
        				obj.style.width=obj.offsetWidth+speed+'px';
        			}
        		},30);
        	}
        </script>
    </head>
    <body>
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
 	</body>
</html>
总结：
多物体的变量都不能公用。可以写成当前物体。

获取行间样式
            function getStyle(obj,attr){
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else{
                    return obj.getComputedStyle(obj,false)[attr];
                }
             }
*代码（多物体多属性）：
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>运动框架</title>
        <style>
        	body{
        		padding: 0px;
        		margin: 0px;
        	}
        	ul,li{
        		list-style: none;
        	}
        	ul li{
        		width: 200px;
        		height: 100px;
        		background: yellow;
        		margin-bottom: 20px;
        		border: 2px solid #000000;
        	}
        </style>
        <script>
        	window.οnlοad=function(){
        		var aLi=document.getElementsByTagName('li');
        		for(var i=0;i<aLi.length;i++){
        			aLi[i].timer=null;
        			aLi[i].οnmοuseοver=function(){
        				move(this,300);
        			}
        			aLi[i].οnmοuseοut=function(){
        				move(this,200);
        			}
        		}
        	}
        	function move(obj,target){
        		clearInterval(obj.timer);
        		obj.timer=setInterval(function(){
        			var icur=parseInt(getStyle(obj,'width'));
        			var speed=(target-icur)/8;
        			speed=speed>0?Math.ceil(speed):Math.floor(speed);
        			if(icur==target){
        				clearInterval(obj.timer);
        			}else{
        				obj.style.width=icur+speed+'px';
        			}
        		},30);
        	}
        	function getStyle(obj,attr){
        		if (obj.currentStyle) {
        			return obj.currentStyle[attr];
        		} else{
        			return getComputedStyle(obj,false)[attr];
        		}
        	}
        </script>
    </head>
    <body>
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
 	</body>
</html>
这种多属性变化也不会互相影响

四、任意值运动

分析：将属性作为参数传入
代码：
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>运动框架</title>
        <style>
        	body{
        		padding: 0px;
        		margin: 0px;
        	}
        	ul,li{
        		list-style: none;
        	}
        	ul li{
        		width: 200px;
        		height: 100px;
        		background: yellow;
        		margin-bottom: 20px;
        		border: 2px solid #000000;
        	}
        </style>
        <script>
        	window.οnlοad=function(){
        		var aLi=document.getElementsByTagName('li');
        		for(var i=0;i<aLi.length;i++){
        			aLi[i].timer=null;
        			aLi[i].οnmοuseοver=function(){
        				move(this,'width',300);
        			}
        			aLi[i].οnmοuseοut=function(){
        				move(this,'width',200);
        			}
        		}
        	}
        	function move(obj,attr,target){
        		clearInterval(obj.timer);
        		obj.timer=setInterval(function(){
        			var icur=parseInt(getStyle(obj,attr));
        			var speed=(target-icur)/8;
        			speed=speed>0?Math.ceil(speed):Math.floor(speed);
        			if(icur==target){
        				clearInterval(obj.timer);
        			}else{
        				obj.style[attr]=icur+speed+'px';
        			}
        		},30);
        	}
        	function getStyle(obj,attr){
        		if (obj.currentStyle) {
        			return obj.currentStyle[attr];
        		} else{
        			return getComputedStyle(obj,false)[attr];
        		}
        	}
        </script>
    </head>
    <body>
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
 	</body>
</html>
有一种属性例外，那就是透明度。首先是parseInt,其次是‘px’的地方有问题。可以用if判断一下。以下对透明度修改地方做出了标注。
代码（透明度）：
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>运动框架</title>
        <style>
        	body{
        		padding: 0px;
        		margin: 0px;
        	}
        	ul,li{
        		list-style: none;
        	}
        	ul li{
        		width: 200px;
        		height: 100px;
        		background: yellow;
        		margin-bottom: 20px;
        		border: 2px solid #000000;
        		opacity: 0.3;
        		filter:alpha(opacity:30);
        	}
        </style>
        <script>
        	window.οnlοad=function(){
        		var aLi=document.getElementsByTagName('li');
        		for(var i=0;i<aLi.length;i++){
        			aLi[i].timer=null;
        			aLi[i].οnmοuseοver=function(){
        				move(this,'opacity',100);
        			}
        			aLi[i].οnmοuseοut=function(){
        				move(this,'opacity',30);
        			}
        		}
        	}
        	function move(obj,attr,target){
        		clearInterval(obj.timer);
        		obj.timer=setInterval(function(){
        			if(attr=='opacity'){
        				var icur=Math.round(parseFloat(getStyle(obj,attr))*100);
        			}else{
        				var icur=parseInt(getStyle(obj,attr));
        			}
        			var speed=(target-icur)/8;
        			speed=speed>0?Math.ceil(speed):Math.floor(speed);
        			if(icur==target){
        				clearInterval(obj.timer);
        			}else{
        				if(attr=='opacity'){
        					obj.style.filter='alpha:(opacity:'+icur+speed+')';
        					obj.style.opacity=(icur+speed)/100;
        				}else{
        					obj.style[attr]=icur+speed+'px';
        				}
        			}
        		},30);
        	}
        	function getStyle(obj,attr){
        		if (obj.currentStyle) {
        			return obj.currentStyle[attr];
        		} else{
        			return getComputedStyle(obj,false)[attr];
        		}
        	}
        </script>
    </head>
    <body>
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
 	</body>
</html>

五、链式运动




六、同时运动


总结时，再次注意到的问题：

1.position属性问题relative和absolute

2.oBox.style.left和oBox.offsetLeft区别

3.Math函数floor()、ceil()、round()

___KAKU
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS动画效果代码3
10-30
总之，JavaScript动画是通过编程方式改变HTML元素的属性（如位置、大小、颜色等）来创建动态视觉效果。在这个示例中，我们看到了如何使用JS和CSS来准备动画元素，并了解了创建动画对象和处理动画的基本步骤。要使这...
开源的JS动画框架库介绍
u013558123的博客
02-09 1149
开源的JS动画框架库介绍
12个最好的JavaScript动画框架
qq_25605715的博客
12-01 4551
1. Scripty2 scripty2 是一个用于基于HTML的高级用户界面的开源JavaScript框架。 或者简单地说，scripty2帮助你构建一个更美味的网络：视觉效果，UI组件和CSS实用程序。 scripty2是script.aculo.us的完全重写和重新实现，具有模块化结构，旨在简化高度自定义的用户界面效果和行为的开发。 2. JSAnim jsAnim
【JavaScript脚本宇宙】点亮网页交互：六款前端动画库大揭秘
最新发布
记录我的学习历程
06-13 1125
本文将介绍六种流行的动画库，分别是AOS (Animate On Scroll)、ScrollReveal、WOW.js、Animate.css、GreenSock Animation Platform (GSAP)和Vivus.js。每种库都包括概述、主要特性、使用示例和使用场景等内容，旨在为读者提供全面的了解和选择参考。
前端攻城狮---js之动画运动框架
GYH的博客
06-24 1254
先来说说外链式的js的使用方式 &lt;script type="text/javascript" src="animate.js"&gt;&lt;/script&gt;这就是我们外链式的使用方法。 animate.js包含了我们动画运动框架的方法。 运动框架的编写 动画什么来的，在指定的时间内，通过定时器去不断的改变属性。 所以我们需要写一个animate方法，那么需要传入对象，属性，...
10 个顶级 JavaScript 动画框架推荐
weixin_33796205的博客
01-12 153
使用JavaScript可以做出一些引人注目的动画效果，但通常不太容易实现。本文为你整理了10个非常优秀的JavaScript动画框架，使用它们你可以轻松实现动画效果。 1. Raphaël Raphaël是一个小型JavaScript库，用于简化你的Web矢量图形工作。如果你想创建独特的图表或图形的裁剪和旋转部件，你可以使用这个简单方便的库来实现。  源码 + 演示 2. Processi...
tojs:JavaScript 动画框架
07-10
to.js JavaScript 动画框架。 ##Demo 关于to.js 是一个小型 JavaScript 库，使动画变得极其简单、优雅和强大。安装如果您的项目中不使用 amd、cmd 或 ，请在您的 html 文件中添加 ref [removed][removed]例子例如...
js动画效果制件让图片组成动画代码分享
10-26
在本文中，我们将探讨如何使用JavaScript（简称js）来创建动画效果，特别是通过组合图片来实现动态视觉效果。这种技术允许开发者在网页上创建引人入胜的交互式体验，而无需依赖复杂的库或框架。 首先，我们需要了解...
movejs基于CSS3的JavaScript动画框架
08-08
《Move.js：基于CSS3的JavaScript动画框架深度解析》 在现代网页开发中，动态效果的实现已经成为提升用户体验的关键因素之一。Move.js，一个由Vision Media开发的JavaScript库，为开发者提供了一种简单且强大的方式...
js实现盒子滚动动画效果
10-14
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。...在实际项目中，还可以结合CSS3的`transition`和`animation`属性，以及现代前端框架如React或Vue，实现更为流畅和高效的动画效果。
模拟现实物体运动的js动画库框架-Anima
12-11
Anima是一款可以同时控制许多对象进行动画的js插件。并且每一个对象都有它们各自的质量和密度以模拟现实生活中的物体。Anima是一个基本的物理基础动画框架。
JavaScript框架近50套，各类特效几乎全了
04-11
收集了50个开发者最喜欢使用的jQuery插件 滑动门控制 滑动展开或关闭DIV层 2级菜单 Tabs - 选项卡 幻灯片 过渡特效 拾色器 表单验证器 提示工具 表格插件 拖拽插件 日历组件等内容
p5.js实现动态图形临摹
10-16
主要为大家详细介绍了p5.js实现动态图形临摹，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jsAnim:一个简单而实用的js动画框架
07-02
jsAnim 一个简单而实用的js动画框架，支持动画缓动算法函数，如Linear、Cubic、Back、Bounce等，支持改变高度，宽度，透明度，边框，外边距的基本动画，支持动画的回调函数，如开始、暂停、完成callback等。 Usage 参数 参数名称 参数说明 是否必须 duration 动画持续时间 是 frequence 帧频，推荐30 是 tweenFunc 动画缓动函数，如：Tween.Bounce.easeIn 是 targetPos 动画元素目标位置，如：{left: 300, top: 400} 是 opacity 透明度，如60 否 width 宽度，不带单位，如200 否 height 高度，不带单位，如200 否 marginX 外边距，其中X表示Top、Left、Right、Bottom 否 border 边框，如：'2px solid red' 否 onSt
JS动画案例
08-04
完美动画框架，能实现日常常用动画效果。
tweenjs-实现threejs的转场动画（基于vue）
string佳佳的博客
08-17 1863
注意！文章主讲tweenjs的使用，省去了threejs部分的代码，请自行添加！ 参考博文 链式补间：tween.chain 如果有多组补间动画，想要a组动画结束后立即启动b组动画，则需要使用tweena.chain(tweenb) 效果图: 1、引入tweenjs import * as TWEEN from '@/assets/js/Tween' 2、使用 <el-button @click="action">开始运动</el-button> data： p1: { x:
10个最好的 JavaScript 动画库和开发框架
jyb123的专栏
05-05 803
1. Tween JS TweenJS 是一个简单的 JavaScript 补间动画库。能够很好的和 EaselJS 库集成，但也不依赖或特定于它。它支持渐变的数字对象属性和 CSS 样式属性。API 简单但非常强大，因此很容易通过链式调用来创建复杂的补间动画。   2. Snap.svg  SVG 是一个创建交互式、分辨率无关的向量图形的很好的解决方案，让效果在任何大小的屏
前端开发常用的18个JavaScript框架和库
码为人生的博客
02-23 2675
在WebGL库和SVG/Canvas元素的支持下，JavaScript惊人的强大。几乎可以为网络构建任何东西，包括基于浏览器的游戏和本地应用，本文整理了可供Web开发人员使用的18个JavaScript 3D库和框架。
鼠标悬停动画js框架
08-31
鼠标悬停动画JS框架是一种用于在网页中实现使用鼠标悬停触发动画效果的JavaScript框架。它具有以下特点和功能： 1. 响应鼠标悬停事件：该框架可以通过监测鼠标悬停在指定元素上的事件来触发相应的动画效果。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值