JavaScript twenn动画代码思路
🌙
手机阅读
本文目录结构
代码基础
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tween动画的基础支持</title>
<style>
#div1{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-weight: bold;
background: orange;
position: absolute;
top: 200px;
left: 100px;
box-shadow: 5px 5px 10px blue;
border-radius: 10px;
border: 2px solid #ff0000;
}
</style>
</head>
<body>
<div id="div1">朱安邦</div>
</body>
</html>
<script>
var oDiv=document.getElementById("div1");
oDiv.onclick = move;
/* 动画需要的参数
- 起始位置:begin;
- 一共需要移动的juice:change
- 当前走的时间:times
- 所需的总时间:duration
步长:interval:运动是一步一步走的,也就是单步时间,可以通过控制单步的时间,来控制运动的效果;时间要求的短,步子就要迈大点,时间要求的长,就走小碎步
*/
/*动画的初始条件*/
var begin=oDiv.offsetLeft;//起点
var target=600;//重点
var change=target-begin;//总的移动距离=目的地-其实的位置;
var times=0;
var duration=1000;//总的时间;
var nInterval=13;//一步走多少;步长;
function move(){
var timer=window.setTimeout(move,nInterval);
if(times<duration){//时间到,就停止
times+=nInterval;
oDiv.style.left=linear(begin,change,times,duration)+"px";
}else{
oDiv.style.left=target+"px";
clearTimeout(timer);
}
}
/* 匀速运动公式:当前的位置=起始位置+总距离*(当前走的时间/所需要走的时间)*/
function linear(begin,change,times,duration){
return begin+change*(times/duration);
}
</script>
代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tween动画的基础支持</title>
<style>
#div1{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-weight: bold;
background: orange;
position: absolute;
top: 200px;
left: 100px;
box-shadow: 5px 5px 10px blue;
border-radius: 10px;
border: 2px solid #ff0000;
}
</style>
</head>
<body>
<div id="div1">JavaScript</div>
</body>
</html>
<script>
var oDiv=document.getElementById("div1");
oDiv.onmouseover = function(){
animate(this,"height",300,1000);
};
function animate(ele,attr,target,duration){
var times=0;
var begin=setCss(ele,attr);//起点
var change=target-begin;//总的移动距离=目的地-其实的位置;
var nInterval=13;//一步走多少;步长;
function move(){
times+=nInterval;
if(times<duration){//时间到,就停止
ele.style[attr]=begin+change*(times/duration)+"px";
}else{
ele.style[attr]=target+"px";
clearInterval(timer);
}
}
var timer=window.setInterval(move,nInterval);
};
function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
var flag="getElementsByClassName" in document;
var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
return !reg.test(attr) ? parseFloat(value) : value;
} else{
switch (attr) {
case "opacity":
curEle["style"][attr] = value;
curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
break;
case "zIndex":
curEle["style"][attr] = value;
break;
default:
curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
}
}
};
</script>
代码-透明度1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tween动画的基础支持</title>
<style>
#div1{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-weight: bold;
background: orange;
position: absolute;
top: 200px;
left: 100px;
box-shadow: 5px 5px 10px blue;
border-radius: 10px;
border: 2px solid #ff0000;
opacity: 0.5;
filter:alpha(opacity=50);
}
</style>
</head>
<body>
<div id="div1">朱安邦</div>
</body>
</html>
<script>
var oDiv=document.getElementById("div1");
oDiv.onclick = function(){
animate(this,"opacity",0.2,1000);
};
function animate(ele,attr,target,duration){
var times=0;
var begin=setCss(ele,attr);//起点
var change=target-begin;//总的移动距离=目的地-其实的位置;
var nInterval=13;//一步走多少;步长;
console.log("开始:"+begin);
console.log("重点:"+target);
var timer=window.setInterval(move,nInterval);
function move(){
times+=nInterval;
if(times>=duration){
if(attr==="opacity"){/*如果是opacity,需要用到小数*/
ele.style[attr]=target;
ele.style["filter"] = "alpha(opacity=" + target*100 + ")";
clearInterval(timer);
}else{
ele.style[attr]=target+"px";
clearInterval(timer);
}
}else{
if(attr==="opacity"){
ele.style[attr]=begin+change*(times/duration);
ele.style["filter"] = "alpha(opacity=" + (begin+change*(times/duration))*100 + ")";
}else{
ele.style[attr]=begin+change*(times/duration)+"px";
}
}
}
};
function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
var flag="getElementsByClassName" in document;
var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
return !reg.test(attr) ? parseFloat(value) : value;
} else{
switch (attr) {
case "opacity":
curEle["style"][attr] = value;
curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
break;
case "zIndex":
curEle["style"][attr] = value;
break;
default:
curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
}
}
};
</script>
代码-透明度2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tween动画的基础支持</title>
<style>
#div1{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-weight: bold;
background: orange;
position: absolute;
top: 0px;
left: 0px;
box-shadow: 5px 5px 10px blue;
border-radius: 10px;
border: 2px solid #ff0000;
opacity: 0.9;
filter:alpha(opacity=90);
}
</style>
</head>
<body>
<div id="div1">朱安邦</div>
</body>
</html>
<script>
var oDiv=document.getElementById("div1");
oDiv.onclick = function(){
if(!this.timer){
animate(this,"left",500,1000,toGreen);
}
};
function animate(ele,attr,target,duration,fnCallback){
var times=0;
var begin=setCss(ele,attr);//起点
var change=target-begin;//总的移动距离=目的地-其实的位置;
var nInterval=13;//一步走多少;步长;
if(change===0){//解决无效运动,changge=begin;
if(typeof fnCallback=="function"){
fnCallback.call(ele);
return;
}
};
clearInterval(ele.timer);
ele.timer=window.setInterval(move,nInterval);
function move(){
times+=nInterval;
if(times>=duration){
setCss(ele,attr,target);
clearInterval(ele.timer);
ele.timer=null;//动画停止的时候,变为null;这样就成为elel这个元素是否在运动的判断依据了;
/*动画行为结束*/
if(typeof fnCallback=="function"){
fnCallback.call(ele);
}
}else{
var targetNumber=begin+change*(times/duration);
setCss(ele,attr,targetNumber);
}
}
};
function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
var flag="getElementsByClassName" in document;
var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
return !reg.test(attr) ? parseFloat(value) : value;
} else{
switch (attr) {
case "opacity":
curEle["style"][attr] = value;
curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
break;
case "zIndex":
curEle["style"][attr] = value;
break;
default:
curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
}
}
};
//回调方法;
function toGreen(){
this.style.backgroundColor="green"
};
function fnRight(){
animate(this,"left",600,1000,fnDown);
}
function fnDown(){
animate(this,"top",600,1000,fnLeft);
}
function fnLeft(){
animate(this,"left",0,1000,fnUp);
}
function fnUp(){
animate(this,"top",0,1000,fnRight);
}
</script>
代码-多方向封装
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tween动画的基础支持</title>
<style>
#div1{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-weight: bold;
background: orange;
position: absolute;
top: 0px;
left: 0px;
box-shadow: 5px 5px 10px blue;
border-radius: 10px;
border: 2px solid #ff0000;
opacity: 0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<div id="div1">朱安邦</div>
</body>
</html>
<script>
var oDiv=document.getElementById("div1");
var jsonStr={
"left":500,
top:400,
"width":"200",
"height":"200",
"opacity":"0.8"
};
oDiv.onclick = function(){
if(!this.timer){
starMove(this,jsonStr,1000,toGreen);
}
};
function starMove(ele,jsonStr,duration,fnCallback){
var oBegin={};//不同方向的起始值;
var oChange={};//不同方向的运动距离;
var booleanNum=0;
for(var attr in jsonStr){
var begin=setCss(ele,attr);
var target=jsonStr[attr];
var change=target-begin;
if(change){
oBegin[attr]=begin;
oChange[attr]=change;
booleanNum++;
}
}
if(booleanNum===0){
if(typeof fnCallback=="function"){
fnCallback.call(ele);
}
return;
}else{
var interval=13;
var times=0;
clearInterval(ele.timer);
ele.timer=window.setInterval(move,interval);
function move(){
times+=interval;
if(times>=duration){
clearInterval(ele.timer);
ele.timer=null;
for(var attr in jsonStr){
setCss(ele,attr,jsonStr[attr]);
}
if(typeof fnCallback=="function"){
fnCallback.call(ele);
}
}else{
for(var attr in oChange){
var targetNumber=oBegin[attr]+oChange[attr]*(times/duration);
setCss(ele,attr,targetNumber);
}
}
}
}
};
//回调方法;
function toGreen(){
setCss(this,"backgroundColor","green");
};
function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
var flag="getElementsByClassName" in document;
var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
return !reg.test(attr) ? parseFloat(value) : value;
} else{
switch (attr) {
case "opacity":
curEle["style"][attr] = value;
curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
break;
case "float":
curEle["style"].cssFloat = value;
curEle["style"].styleFloat = value;
break;
case "backgroundColor":
curEle["style"][attr] = value;
break;
case "zIndex":
curEle["style"][attr] = value;
break;
default:
curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
}
}
};
</script>