<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
html,body,#app{
width:100%;
height:100%;
overflow: hidden;
}
#box{
width: 100px;
height: 100px;
font-weight:bold;">darkorange;
position: absolute;
left:0;
}
#box2{
width: 100px;
height: 100px;
font-weight:bold;">darkorange;
position: absolute;
left:0;
top:100px;
}
</style>
</head>
<body>
<div id="app">
<div id="box"></div>
<div id="box2"></div>
</div>
<script src="transformCSS.js"></script>
<script src="tweenAnimation.js"></script>
<script>
var box = document.querySelector('#box');
var box2 = document.querySelector('#box2');
// tweenAnimation(box,'left',0,1000,1000,10,'backEaseOut');
// tweenAnimation(box2,'left',0,1000,2000,10,'backEaseOut');
// tweenAnimation(box,'width',100,600,1000,10);
// tweenAnimation(box,'top',0,500,2000,10,'backEaseOut');
tweenAnimation(box,'translateX',0,1000,500,10);
</script>
</body>
</html>
-------------
tweenAnimation.js
/**
* Created by Eric on 2020/10/4.
*/
/**
能够实现对元素的动画控制
函数名
tweenAnimation
使用示例
tweenAnimation(el, 'width', 200, 956, 5000, 10, 'linear');
function backEaseOut(t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
}
function easeOut(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
function linear(t,b,c,d){
return c*t/d + b;
}
// 2s 200 9000 10ms easeOut
tweenAnimation(el, 'top', 200, 9000, 2000, 10, 'easeOut');
*/
function tweenAnimation(el,style,init,end,time,jiange,type){
// 动画切换的函数集合
var tween = {
backEaseOut:function(t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeOut:function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
linear:function(t,b,c,d){
return c*t/d + b;
}
};
// type 参数初始化
var type = type === undefined ? 'linear' : type;
// 初始化参数
var t = 0;
var b = init;
var c = end - init;
var d = time;
// 启动定时器
var timer = setInterval(function(){
// 4 清除定时器
if(t >= d){
clearInterval(timer);
return;
}
// 1 计算间隔
t += jiange;
// 2 计算新的值
var v = tween[type](t,b,c,d);
// 3 设置样式
switch (style){
case 'width':
case 'height':
case 'left':
case 'top':
el.style[style] = v + 'px';
break;
case 'translateX':
case 'translateY':
case 'translateZ':
case 'scale':
case 'scaleX':
case 'scaleY':
case 'scaleZ':
case 'rotate':
case 'rotateX':
case 'rotateY':
transformCSS(el,style,v);
break;
case 'opacity':
el.style[style] = v;
break;
}
},jiange);
}
------------------
transformCSS.js
/*
函数
transformCSS
作用
1. 快速设置元素的 transform 变形 ele.style.transform = 'translateX(100px)';
transformCSS(ele, 'translateX', 100);
transformCSS(ele, 'translateY', 100);
transformCSS(ele, 'rotate', 50);
transformCSS(ele, 'scale', 2);
transformCSS(ele, 'scaleY', 1);
2. 读取元素 transform 变形值
transformCSS(ele, 'translateX'); // 100
transformCSS(ele, 'rotate'); // 50
prop property 属性
val value 属性值
#box{
left:100px;
transform: translateX(100px)
}
*/
/**
*
* @param el 元素对象
* @param prop 变形的样式
* @param val 变形的样式值
*
* 多次的设置 需要保存前面的样式
* translateX 100
* rotate 45
*
*/
// transformCSS(box, 'translateX', 200);
// var styles = {};// {translateX: 100}
//
(function (w) {
function transformCSS(el, prop, val) {
//初始化样式仓库
if (el.store === undefined) {
el.store = {};
}
//设置
if (arguments.length == 3) {
el.style.transform = prop + '(' + val + 'px)';
//向对象中存入参数
el.store[prop] = val;
//设置样式
/**
*
* {translateX: 200, rotate: 45, scale: 3}
||
||
||
\/
transform: translateX(200px) rotate(45deg) scale(3);
*/
var str = '';
for (var i in el.store) {
// i translateX rotate scale
// styles[i] 200 45 3
switch (i) {
case 'translateX':
case 'translateY':
case 'translateZ':
str += i + '(' + el.store[i] + 'px) ';
break;
case 'rotate':
case 'rotateX':
case 'rotateY':
case 'rotateZ':
str += i + '(' + el.store[i] + 'deg) ';
break;
case 'scale':
case 'scaleX':
case 'scaleY':
case 'scaleZ':
str += i + '(' + el.store[i] + ') ';
break;
}
//设置变形样式
el.style.transform = str;
}
}
//样式读取
if (arguments.length == 2) {
//判断 如果设置了 则返回设置的值
if (el.store[prop]) {
return el.store[prop];
}
//如果没有设置 translate rotate 0 scale 1 scaleX scaleY scaleX scale
//判断样式是否以 scale 开头
var start = prop.substr(0, 5);
if (start === 'scale') {
return 1;
} else {
return 0;
}
}
}
w.transformCSS = transformCSS;
})(window);
