主页 > 前端 > javascript >
来源：未知 时间：2020-03-26 11:53 作者：小飞侠 阅读:次
[导读] 这是基于tween.js的扩展类移植部分扩展类代码进行换算即可。 /***Createdbylipanon2020/3/23.*///补丁window.requestAnimationFrame=(function(){returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window...
|
这是基于tween.js的扩展类移植部分扩展类代码进行换算即可。
效果：http://www.zixuephp.com/codes/js/animate/ html部分 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#a{
width: 50px;
height: 50px;
background: #f00;
position: absolute;
left:50px;
top:20px;
}
#b{
width: 50px;
height: 50px;
background: #00d6b2;
position: absolute;
left:0px;
top:80px;
}
#c{
width: 200px;
height: 200px;
background: #00d6b2;
position: absolute;
left:80px;
top:130px;
margin-left: 10px;
}
#f{
width: 200px;
height: 200px;
background: #f00;
position: absolute;
left:80px;
top:330px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c" style="width:200px;height:200px;left:80px;top:130px;"></div>
<div id="f"></div>
<script src="js/animate.js"></script>
</body>
</html>/**
* Created by lipan on 2020/3/23.
*/
// 补丁
window.requestAnimationFrame = (
function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
}
)();
//比例换算公式
var Easing = {
Linear: {
None: function (k) {
return k;
}
},
Quadratic: {
In: function (k) {
return k * k;
},
Out: function (k) {
return k * ( 2 - k );
},
InOut: function (k) {
if (( k *= 2 ) < 1) return 0.5 * k * k;
return -0.5 * ( --k * ( k - 2 ) - 1 );
}
},
Cubic: {
In: function (k) {
return k * k * k;
},
Out: function (k) {
return --k * k * k + 1;
},
InOut: function (k) {
if (( k *= 2 ) < 1) return 0.5 * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k + 2 );
}
},
Quartic: {
In: function (k) {
return k * k * k * k;
},
Out: function (k) {
return 1 - ( --k * k * k * k );
},
InOut: function (k) {
if (( k *= 2 ) < 1) return 0.5 * k * k * k * k;
return -0.5 * ( ( k -= 2 ) * k * k * k - 2 );
}
},
Quintic: {
In: function (k) {
return k * k * k * k * k;
},
Out: function (k) {
return --k * k * k * k * k + 1;
},
InOut: function (k) {
if (( k *= 2 ) < 1) return 0.5 * k * k * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
}
},
Sinusoidal: {
In: function (k) {
return 1 - Math.cos(k * Math.PI / 2);
},
Out: function (k) {
return Math.sin(k * Math.PI / 2);
},
InOut: function (k) {
return 0.5 * ( 1 - Math.cos(Math.PI * k) );
}
},
Exponential: {
In: function (k) {
return k === 0 ? 0 : Math.pow(1024, k - 1);
},
Out: function (k) {
return k === 1 ? 1 : 1 - Math.pow(2, -10 * k);
},
InOut: function (k) {
if (k === 0) return 0;
if (k === 1) return 1;
if (( k *= 2 ) < 1) return 0.5 * Math.pow(1024, k - 1);
return 0.5 * ( -Math.pow(2, -10 * ( k - 1 )) + 2 );
}
},
Circular: {
In: function (k) {
return 1 - Math.sqrt(1 - k * k);
},
Out: function (k) {
return Math.sqrt(1 - ( --k * k ));
},
InOut: function (k) {
if (( k *= 2 ) < 1) return -0.5 * ( Math.sqrt(1 - k * k) - 1);
return 0.5 * ( Math.sqrt(1 - ( k -= 2) * k) + 1);
}
},
Elastic: {
In: function (k) {
var s, a = 0.1, p = 0.4;
if (k === 0) return 0;
if (k === 1) return 1;
if (!a || a < 1) {
a = 1;
s = p / 4;
}
else s = p * Math.asin(1 / a) / ( 2 * Math.PI );
return -( a * Math.pow(2, 10 * ( k -= 1 )) * Math.sin(( k - s ) * ( 2 * Math.PI ) / p) );
},
Out: function (k) {
var s, a = 0.1, p = 0.4;
if (k === 0) return 0;
if (k === 1) return 1;
if (!a || a < 1) {
a = 1;
s = p / 4;
}
else s = p * Math.asin(1 / a) / ( 2 * Math.PI );
return ( a * Math.pow(2, -10 * k) * Math.sin(( k - s ) * ( 2 * Math.PI ) / p) + 1 );
},
InOut: function (k) {
var s, a = 0.1, p = 0.4;
if (k === 0) return 0;
if (k === 1) return 1;
if (!a || a < 1) {
a = 1;
s = p / 4;
}
else s = p * Math.asin(1 / a) / ( 2 * Math.PI );
if (( k *= 2 ) < 1) return -0.5 * ( a * Math.pow(2, 10 * ( k -= 1 )) * Math.sin(( k - s ) * ( 2 * Math.PI ) / p) );
return a * Math.pow(2, -10 * ( k -= 1 )) * Math.sin(( k - s ) * ( 2 * Math.PI ) / p) * 0.5 + 1;
}
},
Back: {
In: function (k) {
var s = 1.70158;
return k * k * ( ( s + 1 ) * k - s );
},
Out: function (k) {
var s = 1.70158;
return --k * k * ( ( s + 1 ) * k + s ) + 1;
},
InOut: function (k) {
var s = 1.70158 * 1.525;
if (( k *= 2 ) < 1) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
}
},
Bounce: {
In: function (k) {
return 1 - TWEEN.Easing.Bounce.Out(1 - k);
},
Out: function (k) {
if (k < ( 1 / 2.75 )) {
return 7.5625 * k * k;
} else if (k < ( 2 / 2.75 )) {
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
} else if (k < ( 2.5 / 2.75 )) {
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
} else {
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
}
},
InOut: function (k) {
if (k < 0.5) return TWEEN.Easing.Bounce.In(k * 2) * 0.5;
return TWEEN.Easing.Bounce.Out(k * 2 - 1) * 0.5 + 0.5;
}
}
};
;(function(w){
var A = {
data:{
anmList:[],
speed:1,
key:0,
isRun:false
},
move:function(dom,pms,time,cbk,es){
//校验传参
if(this.isEmptyObject(pms) || typeof dom == "undefined" || dom == null){
return false;
}
var anmLen = 1;
//拆碎
for(i in pms){
var fn = {}
fn = {};
fn.dom = dom;
fn.startTime = new Date().getTime();
fn.pms = pms;
fn.overTime = time;
fn.speed = 1;
fn.speedx = 1;
fn.fn = cbk;
A.getDefaultStyle(fn); //追加默认参数
fn.type = i;
fn.value = pms[i];
fn.anmLen = anmLen;
fn.es = typeof es != "undefined"?es:null;
if(typeof fn.default[i] == "undefined"){
continue;
}
//追加动画队列
this.data.anmList.push(fn);
anmLen ++;
}
console.log('调用KEY',A.data.key,this.data.isRun);
A.data.key ++;
if(this.data.anmList.length > 0 && !this.data.isRun){
this.frameChange('first');
}
},
getStyle:function(obj,styleName){
if(obj.currentStyle){
return obj.currentStyle[styleName];
}else{
return getComputedStyle(obj,null)[styleName];
}
},
isEmptyObject: function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
},
//设置默认属性
getDefaultStyle:function(item){
//测试
var dom = item.dom;
if(typeof item.default == "object"){ return false;}
item.default = {};
item.default.width = dom.style.width != ""?parseInt(dom.style.width):dom.offsetWidth;
item.default.height = dom.style.height != ""?parseInt(dom.style.height):dom.offsetHeight;
item.default.left = dom.style.left != ""?parseInt(dom.style.left):dom.offsetLeft;
item.default.top = dom.style.top != ""?parseInt(dom.style.top):dom.offsetTop;
item.default.opacity = parseFloat(this.getStyle(dom,'opacity'));
},
//真刷新
anmpx:function(item){
//console.log('获得当前实列',item);
var now = new Date().getTime(),
proportion = (now - item.startTime)/item.overTime; //获得比例
//加速度带入
if(item.es != null){
proportion = item.es(proportion);
}
//proportion = proportion * (item.speed + item.speedx);
//item.speedx > 0?item.speedx -= 0.3:null;
//循环CSS属性
var _value;
var _last = item.value; //最终期望结果
var _default = item.default[item.type]; //原始大小
var _nowValue = _last - _default; //期望 - 原始
_value = _default + _nowValue * proportion; //得到当前
if(_nowValue > 0){ //大
if(_value >= _last){
_value = _last;
item.isok = true;
}
}else{ //小
if(_value <= _last){
_value = _last;
item.isok = true;
}
}
switch (item.type){
case "opacity":
//设置属性
item.dom.style[item.type] = _value;
break;
default:
//设置属性
item.dom.style[item.type] = _value +"px";
}
},
frameChange:function(type){
//console.log('aaaa',A.data.anmList);
if(typeof type != "undefined" && type == "first"){
console.log('我触发了',type);
}
A.data.anmList.forEach(function(item,key){
if(item.isok || item === null){
item.anmLen --;
if( item.anmLen === 0){
//触发回调
item.fn(item);
}
//销毁当前实列
A.data.anmList[key] = null;
//删除当前实列
A.data.anmList.splice(key,1);
//如果队列没有数据,关闭动画状态
if(A.data.anmList.length 0 && requestAnimationFrame(A.frameChange);
},
}
w.A = A;
})(window);
A.move(document.getElementById("a"),{
left:500,
top:150
},2000,function(){
console.log('触发完成');
},Easing.Quadratic.In);
A.move(document.getElementById("b"),{
left:500,
top:180,
width:300,
height:190
},2000,function(item){
console.log('触发完成',item);
A.move(document.getElementById("b"),{
left:100,
top:50
},1200,function(item){
console.log('触发完成',item);
//setTimeout(function(){
console.log(item.dom);
A.move(item.dom,{
left:300,
top:300,
width:100,
height:100
},800,function(item){
console.log('触发完成',item);
},Easing.Quintic.InOut);
//},1000);
},Easing.Quintic.Out);
},Easing.Cubic.InOut);
//document.getElementById("c").onclick = function(e){
A.move(document.getElementById("c"),{
width:100,
height:100,
opacity:0.3,
color:"#ff0"
},2000,function(item){
console.log('触发完成',item);
},Easing.Elastic.In);
//}
var ops = 1;
var type = false;
function autoAnm(dom){
var op = !type?0.1:1;
A.move(dom,{
opacity:op,
},300,function(item){
type = !type;
autoAnm(item.dom);
});
}
autoAnm(document.getElementById("f"),ops);
//requestAnimationFrame(A.frameChange); |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
