封装animate动画

一时失言乱红尘 2021-09-02 09:49 456阅读 0赞

<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		#box {
    			position: absolute;
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			left: 10px;
    			top: 10px;
    		}
    		button {
    			position: fixed;
    			width: 100px;
    			height: 30px;
    			left: 100px;
    			bottom: 100px;
    		}
    	</style>
    </head>
    <body>
    	<div id="box"></div>
    	<button id="btn">点我移动</button>
    	<script type="text/javascript">
    	// 获取元素
    	var box = document.getElementById("box");
    	var btn = document.getElementById("btn");
    
    		
    	// $(dom).animate({}, time, callBack)
    
    
    	/**
    	 * animate 实现动画函数
    	 * @json 目标值
    	 * @time 完成动画的时间
    	 * @callBack 回调函数 当元素运动完毕之后执行的函数
    	 *
    	 **/
    	function animate(dom, json, time, callBack) {
    
    		/**
    		 * 分析:
    		 * 	 -我们的编程思路使用定时器和循环完成动画
    		 *	 -既然是使用循环动画，那么每一次动画都是一个步长值
    		 *   -首要问题要得到步长值
    		 *		步长值 = 总距离 / 总次数
    		 *    	总距离 = 目标值 - 初始值
    		 * 		总次数 = 总时间 / 定时器的间隔时间 
    		 */
    
    
    		// 定义计数器
    		var count = 0;
    		// 定时器间隔时间
    		var interval = 20;
    		// 定义总次数
    		var allCount = time / interval;
    		// 定义对象， 用于保存元素的初始值
    		var nowJson = {};
    		for (var i in json) {
    			nowJson[i] = parseInt(getComputedStyle(dom)[i]);
    		}
    		// 当循环完毕之后， 元素的初始值也就有了
    
    		// console.log(nowJson);
    
    
    		// 定义对象 用于保存元素的步长值
    		var stepJson = {};
    		for (var i in json) {
    			// 总距离 = 目标值 - 初始值
    			// 步长值 = 总距离 / 总次数
    			stepJson[i] = (json[i] - nowJson[i]) / allCount;
    		}
    		console.log(stepJson);
    
    
    		// 尝试开启一个定时器
    		var timer = setInterval(function() {
    			// 计算器++
    			count++;
    			// 使用for循环不断的改变dom的状态
    			for (var i in json) {
    				// 当前值 = 初始值 + 步长值 * 次数
    				dom.style[i] = nowJson[i] + stepJson[i] * count + "px";
    			}
    
    			//  判断是否到达边界
    			if (count >= allCount) {
    				// 拉终
    				for (var i in json) {
    					dom.style[i] = json[i] + "px";
    				}
    				// 停表
    				clearInterval(timer);
    
    				// 执行回调函数
    				callBack && callBack();
    			}
    		}, interval)
    
    	}
    
    
    
    	// 调用
    	animate(box, {"left": 1000, "top": 500}, 999, function() {
    		console.log("123");
    	});

发表评论取消回复

表情：

评论列表（有 0 条评论，456人围观）

还没有评论，来说两句吧...

相关阅读

相关 animation动画

一、集成方法：分两步： 1、首先使用animation 注册动画，如： .mydiv{ -webkit-animation:mymove 5s inf

柔情只为你懂/ 2023年01月07日 02:30/ 0 赞/ 321 阅读

相关 Flutter Animation动画

一，概述　　　 `　　Flutter`动画库的核心类是`Animation`对象，它生成指导动画的值，`Animation`对象指导动画的当前状态(例如，是开始、停止还是

梦里梦外;/ 2022年12月25日 01:54/ 0 赞/ 219 阅读

相关 Animation用法_animation动画效果

动画类型 Android的animation由四种类型组成 XML中 <table> <tbody> <tr> <td><spa

偏执的太偏执、/ 2022年08月07日 15:59/ 0 赞/ 293 阅读

相关【CSS 】动画animation

作为博主简单记录：深入学习请查看文末参考资料前面有提到过过渡效果[css transition][],实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的，而且

╰半橙微兮°/ 2022年07月13日 08:14/ 0 赞/ 261 阅读

相关 9、animation动画

除了前面章节介绍的3d变换可以做动画，还可以通过animation来做动画。下面分别介绍animation的各属性。 1、@keyframes @keyframes定义了

系统管理员/ 2022年04月06日 04:22/ 0 赞/ 282 阅读

相关 animation动画效果

animation属性开发工具与关键技术：DW、animation动画效果作者：黄桂康撰写时间：2019.02.20 animation属性是

梦里梦外;/ 2022年03月18日 08:56/ 0 赞/ 366 阅读

相关 animation动画实例

<template> <view> <page-head :title="title"></page-head> <view clas

末蓝、/ 2021年12月14日 05:23/ 0 赞/ 317 阅读

相关封装animate动画

<style type="text/css"> { margin: 0; padding: 0; }

一时失言乱红尘/ 2021年09月02日 09:49/ 0 赞/ 457 阅读

相关 jq animate动画

animate $('选择器').animate({json类型到终点的几何位置/几何大小},毫秒数) 多个变化一起执行

矫情吗；*/ 2021年07月25日 00:25/ 0 赞/ 524 阅读

相关 CSS Animations 动画

包含所有前缀的`CSS`关键帧。您需要做的就是选择一个动画并在`CSS`动画中使用它。 animations.css .animationStart{

小咪咪/ 2021年07月04日 16:12/ 0 赞/ 516 阅读