原生Js封装的动画类
算法用的是Tween类，需要研究的参考这篇文章:
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
网页里常用的动画 放大缩小 位置移动 透明度改变
效果预览：http://jsfiddle.net/dtdxrk/WnACG/embedded/result/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生Js封装的动画类</title>
<style type="text/css">
*{margin: 0;padding: 0}
input {padding: 5px 10px;} #content{margin:10px;width:100px;height:100px;border: 5px solid #666;text-align: center; opacity: 1; filter: alpha(opacity=100);}
#content h1{background-color: #666;color: #fff;text-align: center;margin:10px;} </style>
</head> <body>
<input type="button" value="渐隐" onclick="Animation.alpha(_CalF.$('#content'),0);" />
<input type="button" value="渐显" onclick="Animation.alpha(_CalF.$('#content'),100);" />
<input type="button" value="位置移动" onclick="Animation.move(_CalF.$('#content'),{x:1000,y:500},Tween.Cubic.easeIn);" />
<input type="button" value="位置移动2" onclick="Animation.move(_CalF.$('#content'),{x:100,y:100},Tween.Cubic.easeOuth);" />
<input type="button" value="变大" onclick="Animation.size(_CalF.$('#content'),{w:500,h:500},Tween.Cubic.easeIn);" />
<input type="button" value="缩小" onclick="Animation.size(_CalF.$('#content'),{w:100,h:100},Tween.Cubic.easeOuth);" />
<input type="button" value="综合动画" onclick="Animation.alpha(_CalF.$('#content'),0);Animation.move(_CalF.$('#content'),{x:1000,y:500},Tween.Cubic.easeIn);Animation.size(_CalF.$('#content'),{w:500,h:500},Tween.Cubic.easeOuth);" />
<input type="button" value="综合动画2" onclick="Animation.alpha(_CalF.$('#content'),100);Animation.move(_CalF.$('#content'),{x:200,y:200},Tween.Cubic.easeIn);Animation.size(_CalF.$('#content'),{w:200,h:200},Tween.Cubic.easeOuth);" />
<div id="content">
<h1>动画类</h1>
</div> <script type="text/javascript">
var _CalF = {
$ : function(object){//选择器
if(object === undefined ) return;
var getArr = function(name,tagName,attr){
var tagName = tagName || '*',
eles = document.getElementsByTagName(tagName),
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
attr = attr || clas,
Arr = [];
for(var i=0;i<eles.length;i++){
if(eles[i].getAttribute(attr)==name){
Arr.push(eles[i]);
}
}
return Arr;
}; if(object.indexOf('#') === 0){ //#id
return document.getElementById(object.substring(1));
}else if(object.indexOf('.') === 0){ //.class
return getArr(object.substring(1));
}else if(object.match(/=/g)){ //attr=name
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
}else if(object.match(/./g)){ //tagName.className
return getArr(object.split('.')[1],object.split('.')[0]);
}
},
getPosition : function(obj) { //获取元素在页面里的位置和宽高
var top = 0,
left = 0,
width = obj.offsetWidth,
height = obj.offsetHeight; while(obj.offsetParent){
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
} return {"top":top,"left":left,"width":width,"height":height};
}
}; /*
t:currentCount 当前执行第t次
b:initPos 初始值
c:targetPos - initPos 发生偏移的距离值
d:count 一共执行d次
效果：http://www.robertpenner.com/easing/easing_demo.html
*/ var Tween = {
Linear: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * t / d + b;
},
Quad: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * (t /= d) * (t - 2) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
},
Cubic: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
},
Quart: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
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(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
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(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
},
Expo: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
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(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
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(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var 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(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var 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(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var 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(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut: function(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (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(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
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(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
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;
}
}
} var Animation = {
timer : 10,
alphaPlay : "",
alpha : function(obj,value,Func){ //透明度
var that = this,
num = 0,
F,
init = document.all ? obj.filters.alpha.opacity : window.getComputedStyle(obj, null).opacity * 100; //获取元素的透明度
clearInterval(that.alphaPlay);
if(value<0){
value=0;
}else if(value>100){
value=100
}else{
value=value;
} Func = Func || Tween.Linear; that.alphaPlay = setInterval(function(){
if(num>100){
clearInterval(that.alphaPlay);
}else{
num++;
F = Func(init,value,num,100);
if (document.all) {
obj.filters.alpha.opacity = F;
obj.style.zoom =1;
}else {
obj.style.opacity = F / 100;
}
}
},that.timer);
},
movePlay : "",
move :function(obj,pos,Func){ //移动
var that = this,
elPos = _CalF.getPosition(obj),
initPos = {x:elPos.left, y:elPos.top},
num = 0,
_tempX,_tempY; clearInterval(that.movePlay);
Func = Func || Tween.Linear;
obj.style.position = "absolute"; that.movePlay = setInterval(function(){
if(num>100){
clearInterval(that.movePlay);
}else{
num++;
_tempX = Func(initPos.x, pos.x, num, 100);
_tempY = Func(initPos.y, pos.y, num, 100);
obj.style.left = _tempX +"px";
obj.style.top = _tempY +"px";
}
},that.timer);
},
sizePlay : "",
size : function(obj,pos,Func){ //改变大小
var that = this,
initPos = {w:obj.offsetWidth, h:obj.offsetHeight},
num = 0,
_tempW,_tempH;
clearInterval(that.sizePlay);
Func = Func || Tween.Linear; that.sizePlay = setInterval(function(){
if(num>100){
clearInterval(that.sizePlay);
}else{
num++;
_tempW = Func(initPos.w, pos.w, num, 100);
_tempH = Func(initPos.h, pos.h, num, 100);
obj.style.width = _tempW +"px";
obj.style.height = _tempH +"px";
}
},that.timer);
}
} </script>
</body>
</html>
原生Js封装的动画类的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 原生js添加和删除类
原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- 原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
随机推荐
- 学到了林海峰,武沛齐讲的Day35 完 协程
day3 requests.get 爬网页 greenlet 协程模块 还有asy!!!模快(后续版本) day4 事件驱动 day5 基础学习 day6 基础学习 da ...
- DVWA-文件包含漏洞
本周学习内容: 1.学习web安全深度剖析: 2.学习安全视频: 3.学习乌云漏洞: 4.学习W3School中PHP: 实验内容: 进行DVWA文件包含实验 实验步骤: Low 1.打开DVWA,进 ...
- Poj 1743 Musical Theme(后缀数组+二分答案)
Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 28435 Accepted: 9604 Descri ...
- （11）打鸡儿教你Vue.js
表单 v-model 指令在表单控件元素上创建双向数据绑定 <div id="app"> <p>单个复选框:</p> <input typ ...
- A2T和T2A，===string和CString互转 方法一：--用宏的方式
USES_CONVERSION它是在堆栈上分配空间的,也就是说你在你在函数未结束就不会被释放掉.所有要注意不要在一个函数中用while循环执行它,不然栈空间就马上会分配完(栈空间一般只有2M,很小). ...
- Django基础（1）-虚拟环境的安装及配置
virtualenv介绍 (1)做什么的?virtualenv是用于创建独立的python环境,使得多个python应用彼此独立: (2)优点: a)使不同应用开发环境独立 b)环境升级不影响其他应用 ...
- ElasticSearch : 基础简介
1.安装 我用的docker安装,这个用起来比较方便,我是在腾讯云部署的docker,具体的过两天总结一下 安装: docker pull elasticsearch 运行: docker run - ...
- spark的一些基本概念和模型
Application application和Hadoop MapReduce类似,都是指用户编写的spark应用程序,其中包含了一个driver功能的代码和分布在集群中多个节点运行的executo ...
- docker容器连接
前面我们实现了通过网络端口来访问运行在docker容器内的服务.下面我们来实现通过端口连接到一个docker容器 网络端口映射 我们创建了一个 python 应用的容器. runoob@runoob: ...
- RIP子网划分及扩展详解