js动画-学习笔记

已于 2022-04-10 19:22:17 修改
阅读量499 收藏 1
点赞数
分类专栏： js css 文章标签： javascript
于 2022-04-10 14:52:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cai_niao5623/article/details/124078213
版权
js 同时被 2 个专栏收录
57 篇文章 1 订阅
订阅专栏
css
13 篇文章 0 订阅
订阅专栏

1、匀速运动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            position: relative;
            left: -200px;
        }

        .btn {
            width: 60px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: lightblue;
            position: absolute;
            top: 50%;
            right: -60px;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="btn">动画</span>
    </div>

    <script>
        window.onload = function () {
            var box = document.querySelector('.box')
            var timer = null
            var speed = 0

            box.onmouseover = function () {
                move(this,0)
            }
            box.onmouseout = function () {
                move(this,-200)
            }

            function move(obj,end) {
                clearInterval(timer)
                speed = end > obj.offsetLeft ? 5:-5
                timer = setInterval(() => {
                    if (obj.offsetLeft === end) {
                        return clearInterval(timer)
                    }
                    obj.style.left = obj.offsetLeft + speed + 'px'
                }, 20)
            }
        }
    </script>
</body>

</html>

2、缓动运动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            position: relative;
            left: -200px;
        }

        .btn {
            width: 60px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: lightblue;
            position: absolute;
            top: 50%;
            right: -60px;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="btn">动画</span>
    </div>

    <script>
        window.onload = function () {
            var box = document.querySelector('.box')
            var btn = document.querySelector('.btn')
            var timer = null
            /*
                加速度speed = (结束状态 - 初始状态) / 系数
            */
            var speed = 0
            // 鼠标进入元素时候元素的最终状态值
            var end1 = 0
            // 鼠标移除元素时候元素的最终状态值
            var end2 = -200

            box.onmouseover = function () {
                move(this, end1)
            }

            box.onmouseout = function () {
                move(this, end2)
            }

            function move(obj, end) {
                clearInterval(timer)
                timer = setInterval(() => {
                    if (obj.offsetLeft === end) {
                        return clearInterval(timer)
                    }
                    speed = (end - obj.offsetLeft) > 0 ? speed = Math.ceil((end1 - obj.offsetLeft) / 20) : speed = Math.floor((end2 - obj.offsetLeft) / 20)
                    obj.style.left = obj.offsetLeft + speed + 'px'
                }, 30)
            }
        }
    </script>
</body>

</html>

3、透明度动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: brown;
            opacity: 0.3;
         }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        window.onload = function() {
            var box = document.querySelector('.box')
            var timer = null,speed=0,alpha = 30

            box.onmouseover = function() {
                opacityAnimation(this,100)
            }

            box.onmouseout = function() {
                opacityAnimation(this,30)
            }

            function opacityAnimation(obj,end) {
                clearInterval(timer) 
                timer = setInterval(()=>{
                    if(alpha === end) return clearInterval(timer)
                    speed = end > alpha ? 10 : -10
                    alpha += speed
                    obj.style.opacity = alpha / 100
                },50)
            }
        }
    </script>
</body>
</html>

4、多物体缓动运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 150px;
            background-color: chartreuse;
            margin: 15px 0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        window.onload = function() {
            var oDivs = document.querySelectorAll('div')
            for(let i=0;i<oDivs.length;i++) {
                oDivs[i].onmouseover = function() {
                    changeWidth(this,600)
                }

                oDivs[i].onmouseout = function() {
                    changeWidth(this,300)
                }
            }

            var speed = 0;
            function changeWidth(obj,end) {
                // 对于多物体，定时器的返回值要绑定到当前对象里去
                clearInterval(obj.timer)
                obj.timer = setInterval(()=>{
                    let oWidth = parseInt(getStyle(obj,'width'))
                    if(end === oWidth) return clearInterval(obj.timer)
                    speed = (end - oWidth) > 0 ? Math.ceil((end - oWidth) / 20) : Math.floor((end - oWidth) / 20)
                    obj.style.width = `${oWidth + speed}px`
                },20)
            }

            /**
             * 获取元素属性的值
             * obj: 当前元素对象
             * attr: 当前元素对象属性
            */
            function getStyle(obj, attr) {
                if (obj.currentStyle) {
                    // 兼容ie
                    return obj.currentStyle[attr];
                }else {
                    // 主流浏览器
                    return getComputedStyle(obj, null)[attr]
                }
            }
        }
    </script>
</body>
</html>

5、封装简单的动画框架

var speed = 0;
/**
 * 动画的函数
 * @param {Object} obj 当前的对象
 * @param {Object} attr 当前元素对象的属性
 * @param {Object} endTarget 末尾位置
 */
function startAnimation(obj, json, fn) {
	// 针对于多物体运动,定时器的返回值要绑定当前的对象中.
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var cur = 0;
		var flag = true; //标杆 如果true，证明所有的属性都到达终点值
		for (var attr in json) {
			// 0 获取样式属性
			// 透明度变化处理
			switch (attr) {
				case 'opacity':
					cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
					break;
				case 'scrollTop':
					cur = obj[attr]
					break;
				default:
					cur = parseInt(getStyle(obj, attr));
					break;
			}
			// 1.求速度
			speed = (json[attr] - cur) / 10;
			speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed);
			// 2.临界处理
			if (json[attr] !== cur) {
				flag = false;
			}
			// 3.运动起来
			switch (attr) {
				case 'opacity':
					obj.style[attr] = `alpha(opacity: ${cur + speed})`;
					obj.style[attr] = (cur + speed) / 100;
					break;
				case 'scrollTop':
					obj.scrollTop = cur + speed;
				default:
					obj.style[attr] = cur + speed + 'px';
					break;
			}
		}

		if (flag) {
			clearInterval(obj.timer);
			if (fn) {
				fn();
			}
			return;
		}

	}, 30);
}
/**
 * 获取元素属性的函数
 * @param {Object} obj 当前元素对象
 * @param {Object} attr 当前元素对象的属性
 */
function getStyle(obj, attr) {
	if (obj.currentStyle) {
		// 兼容ie
		return obj.currentStyle[attr];
	} else {
		// 兼容主流浏览器
		return getComputedStyle(obj, null)[attr];
	}
}

韭伍後
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之粒子动画学习笔记
05-25
JavaScript之粒子动画学习笔记。节省你的时间
js实现动画
Mystery_Fan的博客
06-01 302
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box1 { margin: 0; padding: 5px; height: 300px; background-
【JavaScript-动画原理】如何使用js进行动画效果的实现
热门推荐
zhaochen1127的博客
09-25 1万+
利用js实现动画效果
分享12个强大的 JavaScript 动画库，让你的项目更炫酷
最新发布
前端达人
06-05 469
动画效果，可以快速吸引访客注意力。通过创造性的对象运动和流畅的页面过渡，您不仅可以为您的网站增添独特的美感，还可以增强用户参与度并创造令人难忘的第一印象。在今天这篇文章中，我们跟你分享12个强大的 JavaScript 库，从而让创建动画变得简单。像滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……它们功能无穷。01、Anime.js地址：https://animejs.co...
分享12个强大的 JS 动画库，助你提升用户体验
前端达人
09-21 1904
动画，是吸引你客户注意的好方法之一。在项目开发中，我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验，同时，也为我们的网站增添了独特的美感，而且还提高了用户参与度并创造了令人难忘的第一印象。因此，今天这篇文章，我将整理了10个有趣又有用的 JavaScript 动画库，从而帮助你快速创建动画，其中包括，滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……它们的功能实...
JS基础——js动画
s13596191285的博客
01-31 626
用javascript实现动画效果 I.位置 Position属性的合法取值有static、fixed、relative和absolute四种 如果把某个元素的position属性设置为absolute,我们就可以把它摆放到它的“容器”里的任何位置。它的显示位置将由top、left、right和bottom决定。 （1.）写一个函数设置这个元素的位置 （2.）再写一个执行函数去改变这个元素的位置属性 （3.）把这两个函数绑定到addLoadEvent()上
JS实现网页动画
benlalagang的博客
07-29 2750
JS实现网页动画、核心原理、封装函数、简单例子、测导航案例、导航筋斗云案例
Vue-router学习笔记
01-27
4. **基于Vue.js过渡系统的视图过渡效果**：结合Vue的过渡系统，可以在路由切换时添加过渡动画，提升用户体验。 5. **细粒度的导航控制**：允许在路由切换前后进行干预，例如通过导航守卫进行权限验证、数据预加载...
JS制作网页特效-学习笔记
07-12
JS的实用教程，传智播客web培训学习笔记及相关代码。基于原生JS实现一些常用的网页特效以及JS的一些其他应用。包括：轮播图、匀速动画、缓动动画、浏览器可视区域操作、固定导航栏、楼层切换、鼠标跟随、放大镜效果...
js代码-JS学习笔记
07-14
本JS学习笔记将深入探讨这一语言的关键概念和技术。 首先，我们从基础开始。JavaScript的基础语法与C++和Java相似，包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔值、null、undefined、对象...
javascript-jquery学习笔记.docx
10-20
JavaScript 是一种客户端脚本语言，用于增强网页的交互性和动态性，而 jQuery 是一个 JavaScript 库，它简化了 JavaScript 的使用，提供了丰富的选择器、动画效果和事件处理。 在 JavaScript 中，字符串可以使用反...
分享113个JS特效动画效果，总有一款适合您
zy0412326的专栏
02-05 4756
js
js动画效果和运动轨迹
m0_61096949的博客
07-05 1244
因为图形的轨迹等通常情况下是在css的style标签下修改的，所以这里也是使用的这种方法。.f表示f类选择器，.f>div表示该类选择器所在标签，所包含的所有的div标签。在定时器可以来修改图形的运动轨迹，在修改运动轨迹之前需要获取到该图形的id值，，后面括号里面添入比1小的值为缩小，比1大为增大，等于1则缩放为原来的形状。，这里y是一个数值类型，而px用单引号为字符串类型，所以这里。注意：边框是占有一定大小的，轮廓是不占有大小的。，比1小则所以，比1大则放大，等于1则不透明。思想：这里实现圆周远动，
JavaScript 动画效果的实现（附带示例）
Itmastergo的博客
01-29 2122
JavaScript 动画主要是通过修改元素样式来实现的，能够实现许多 CSS 动画所不能实现的效果，例如暂停、回放等。
炫酷不止一面：探索JavaScript动画的奇妙世界(上)
你若盛开，清风自来
12-09 1150
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6🍨🕠 牛客高级专题作者、在牛客打造高质量专栏🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程。
JS动画效果实现
m0_72144544的博客
07-05 469
用js核心代码去实现定时器的实现。首先要用css制作一个爱心。然后去实现开始和停止按钮。最后实现的效果是这样的。用js去实现动画效果。然后用js去循环实现。
JS动画三剑客——setTimeout、setInterval、requestAnimationFrame
m0_73988449的博客
09-22 394
前端实现动画效果主要有以下几种方法：CSS3中的transition 和 animation ，Javascript 中可以通过定时器 setTimeout、setinterval，HTML5 canvas，HTML5提供的requestAnimationFrame。本文主要分析setTimeout、setinterval、requestAnimationFrame三者的区别和他们各自的优缺点。二、浏览器动画原理浏览器动画的基本实现思路。
JavaScript(CSS)动画引擎汇总
缘如风的博客
10-10 493
汇总记录前端实现动画相关的库
网页设计基础：韩顺平HTML-CSS-JavaScript笔记
JavaScript是客户端脚本语言，它使网页具有动态功能，如响应用户操作、验证表单、执行动画等。在HTML中，JavaScript通常通过`<script>`标签引入。 学习HTML、CSS和JavaScript是成为网页设计师的基础，这三者结合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值