运动函数move 各种各样的运动都可以做

在这里我说的还是那种匀速运动,主要是通过改变一个盒模形的left值和top 值,来实现运动,或者,改变模形的自身的属性,来动起来:

function getStyle(obj,name){
	return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
};

function move(obj,json,options){
	options=options||{};
	options.time=options.time||700;

	var start={};
	var dis={};

	for(var name in json){
		if(name==‘opacity‘){
			start[name]=parseFloat(getStyle(obj,name));
		}else{
			start[name]=parseInt(getStyle(obj,name));
		};
		dis[name]=json[name]-start[name];
	};
	var count=Math.round(options.time/30);
	var n=0;

	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		n++;

		for(var name in json){
			var cur=start[name]+dis[name]*n/count;

			if(name==‘opacity‘){
				obj.style.opacity=cur;
				obj.style.filter=‘alpha(opacity:‘+cur*100+‘)‘;
			}else{
				obj.style[name]=cur+‘px‘;
			}
		}
	},30);

}

  

getStyle这个函数是获取样式属性的,前面这块已经说过了;

这里要说一下的是动运的公式:

开始的距离+(终点距离-起点距离)*运动了几次/一共能运动多少次;

开始的距离这里用start表示,终点距离用了一个json数据,json[name],就代表是终点距离,n 代表运动了几次,count 代表,30毫秒走一次,一规定的时间里走完这段距离的总次数。
时间: 2024-08-28 00:40:12

运动函数move 各种各样的运动都可以做的相关文章

递归运动函数的实现

递归运动函数来源于论文<Prediction and Indexing of Moving Objects with Unknown Motion Patterns>,它能够以递归函数的形式描述一段轨迹.预测之后的轨迹. 一般的运动函数自变量是时间,应变量是位置,参数是加速度.速度等.而递归运动函数的输入变量是之前一定数量的轨迹点,输出是下一个轨迹点.所以要预测不止一个轨迹点,需要连续运用递归运动函数. 递归运动函数比起一般的运动函数具有的优点有:形式统一,描述能力强.缺点:参数矩阵的求解比较

javascript运动系列第一篇——运动函数

× 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体 前面的话 除了拖拽以外,运动也是javascript动画的一个基本操作.通过CSS属性transition和animation可以实现运动.但是,要进行更精细地操作,javascript运动是必不可少的.本文将详细介绍javascript运动 简单运动 让一个元素在页面中运动起来很简单,设置定时器,改变定位元素的left或top值即可 <button id="btn&

JS里面的两种运动函数

最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate1 1 function animate1(obj,data,rate,fn){//运动对象,运动数据,[运动速度],[回调函数] 2 //遍历获取样式属性 3 for(var key in data){ 4 //通过闭包将key私有化 5 (function(k){ 6 /* 7 获得样式宽高等会

jquer和封装的运动函数对比

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换----->> jquer和封装的运动函数对比 </title> <style type="text/css"> #parent{ margin:500px 500px 0 500px; position:

Swift具体解释之三----------函数(你想知道的都在这里)

函数(你想知道的都在这里) 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正.一起学习. 1. 函数的简单定义和调用 简单的无參函数就不再赘述 , name为形參 .也是内部在数名 . func sayHello(name:String) ->String { return name+" say: hello" } 调用的时候也非常easy sayHello("zhangsan") 是不是非常easy呀! 2

Swift详解之三----------函数(你想知道的都在这里)

函数(你想知道的都在这里) 注:本文为作者自己总结,过于基础的就不再赘述 ,都是亲自测试的结果.如有错误或者遗漏的地方,欢迎指正,一起学习. 1. 函数的简单定义和调用 简单的无参函数就不再赘述 , name为形参 ,也是内部在数名 . func sayHello(name:String) ->String { return name+" say: hello" } 调用的时候也很简单 sayHello("zhangsan") 是不是很简单呀! 2.外部参数名

人人都可以做深度学习应用:入门篇

一.人工智能和新科技革命 2017年围棋界发生了一件比较重要事,Master(Alphago)以60连胜横扫天下,击败各路世界冠军,人工智能以气势如虹的姿态出现在我们人类的面前.围棋曾经一度被称为"人类智慧的堡垒",如今,这座堡垒也随之成为过去.从2016年三月份AlphaGo击败李世石开始,AI全面进入我们大众的视野,对于它的讨论变得更为火热起来,整个业界普遍认为,它很可能带来下一次科技革命,并且,在未来可预见的10多年里,深刻得改变我们的生活. 其实,AI除了可以做我们熟知的人脸.

人人都能够做深度学习应用:入门篇

一.人工智能和新科技革命 2017年围棋界发生了一件比較重要事,Master(Alphago)以60连胜横扫天下,击败各路世界冠军.人工智能以气势如虹的姿态出现在我们人类的面前.围棋以前一度被称为"人类智慧的堡垒",现在.这座堡垒也随之成为过去.从2016年三月份AlphaGo击败李世石開始,AI全面进入我们大众的视野,对于它的讨论变得更为火热起来.整个业界普遍觉得,它非常可能带来下一次科技革命,而且,在未来可预见的10多年里,深刻得改变我们的生活. 事实上.AI除了能够做我们熟知的人

Android Activity生命周期都该做哪些事情?

Android系统根据生命周期的不同阶段唤起对应的回调函数来执行代码.系统存在启动与销毁一个activity的一套有序的回调函数.本节来讨论下不同生命周期的回调函数里都该做哪些事情,不该做哪些事情. 理解生命周期的回调 在一个activity的生命周期中,系统会像金字塔模型一样去调用一系列的生命周期回调函数.Activity生命周期的每一个阶段就像金字塔中的台阶.当系统创建了一个新的activity实例,每一个回调函数会向上一阶移动activity状态.处在金字塔顶端意味着当前activity处