原生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标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
随机推荐
- learning java AWT Dialog
import java.awt.*; public class DialogTest { Frame f = new Frame("test"); Dialog d1 = new ...
- HTTP文件上传
看到网上很多链接文件(word.pdf...)可以下载,想制作http下载链接. 其实是将某文件直接放在服务器上搭建的网站上某目录下即可,例如:http://xxx:port/UpgradePack/ ...
- （24）打鸡儿教你Vue.js
学习Vue基础语法 Vue中的组件 Vue-cli的使用 1.使用Vue2.0版本实现响应式编程 2.理解Vue编程理念与直接操作Dom的差异 3.Vue常用的基础语法 4.使用Vue编写TodoLi ...
- Java中的读文件，文件的创建，写文件
前言 大家好,我是 Vic,今天给大家带来Java中的读文件,文件的创建,写文件的概述,希望你们喜欢 示意图 读文件 public static void read(String path,Strin ...
- UOJ#221. 【NOI2016】循环之美 数论,杜教筛
原文链接www.cnblogs.com/zhouzhendong/p/UOJ221.html 题解 首先把题目转化为求 \[\sum_{x=1}^n \sum_{y=1}^m [\gcd(x,y) = ...
- andriod studio连接SQLite
SQLite SQLite是一种嵌入式的数据库引擎,以文件的形式保存数据的,专门适用于资源有限的设备上进行适量的数据存储. 从本质上来看,SQLite的操作方式只是一种更为便捷的文件操作,当应用程序创 ...
- python 通过下载包setup.py安装模块
下载安装包,并解压到相应的位置 1.打开cmd 2.到达安装目录 3.python setup.py build 4.python setup.py install
- RNA剪接体 Spliceosome | 冷冻电镜 | 结构生物学
冷冻电镜 为什么冷冻电镜 (Cryo-EM) 技术的发明可以获得2017诺贝尔化学奖?知乎看法 Press release: The Nobel Prize in Chemistry 2017 We ...
- Vue 中Axios 使用
1.安装axios npm install axios 2.在使用的地方导入 import axios from 'axios' 3.再方法中调用 sendHttp: function () { ax ...
- 微信小程序带cookie的request请求代码封装(小程序使用session)
微信小程序带cookie的request请求可,以使服务端知道是同一个客户端请求. session_id会不变,从而很好的使用服务端的session. 写一个工具函数,直接导入使用即可,接口同 wx. ...