多动画同时执行的时候设置了不同时间，时间值该怎么传，我试了下，没成功
来源：6-4 封装形变类（4）
王文辉
2021-02-24 19:49:47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形类</title>
<style type="text/css">
.ball{
background: linear-gradient(#ff9b9b 50%,#106dbb 50%);
width: 150px;
height: 150px;
border-radius: 50%;
}
.ballTwo{
background: linear-gradient(#ff9b9b 50%,#106dbb 50%);
width: 150px;
height: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- <div class="ball"></div> -->
<div class="ballTwo"></div>
<script type="text/javascript">
class Transform{
constructor(selector) {
this.el=document.querySelector(selector);
this._queue=[] //存放动画素组
this.defaultTime=Transform.config.defaultTime; //用户输入默认的动画执行时间
this.el.style.transition=`all ${.3}s`; //确保元素可以执行动画
this._transform={ //用来存动画播放之后的状态，避免每次都从开始执行
translate:'',
scale:'',
rotate:''
}
}
// 位移
translate(value,time){
return this._addAnimation('translate',value,time)
}
// 旋转
scale(value,time){
return this._addAnimation('scale',value,time)
}
//形变
rotate(value,time){
return this._addAnimation('rotate',value,time)
}
//暂停
sleep(value){
return this._addAnimation('sleep','',value)
//sleep接收的参数为停止时间参数，其实对应的是时间
//sleep执行无需改变transform属性，对应的是把时间传到setTimeout去实现
}
//暂停
//添加动画
_addAnimation(type,value,time=this.defaultTime){
this._queue.push({type,value,time})
return this;
}
//添加完成，可以开始执行动画了
done(){
this._start();
}
//开始动画
_start(){
//[位置，旋转，形变]按照队列的模式先进先出开始执行
//执行动画就是添加对应的transition属性变化即可属性即可
if(!this._queue.length) return
setTimeout(()=>{
const info=this._queue.shift();
// this.el.style.transition=`all ${this.defaultTime/1000}s`;//改写
this.el.style.transition=`all ${info.time/1000}s`;
this.el.style.transform=this._getTransform(info);
setTimeout(()=>{ //递归调用
this._start()
},info.time)
},0)
}
_getTransform({time,value,type}){
var tsf=this._transform;
switch(type){
case 'translate':
tsf.translate= `translate(${value})`;
break;
case 'scale':
tsf.scale= `scale(${value})`;
break;
case 'rotate':
tsf.rotate= `rotate(${value}deg)`;
break;
case 'sleep':
tsf.sleep= `sleep(${value}deg)`;
break;
default:
break;
}
return `${tsf.translate} ${tsf.scale} ${tsf.rotate}`
}
}
// 用户自定义的属性
Transform.config={
defaultTime:300
}
/* const tf=new Transform('.ball')
tf
.translate('500px,500px')
.scale(2,3000)
.translate('100px,100px')
.sleep(1000)
.scale(0.5)
.rotate(180)
.done()
*/
//继承，实现动画的同时播放
class MultiTransform extends Transform{
multi(value,time){
return this._addAnimation('multi',value,time)
}
_getTransform({time,value,type}){
var tsf=this._transform;
switch(type){
case 'translate':
tsf.translate= `translate(${value})`;
break;
case 'scale':
tsf.scale= `scale(${value})`;
break;
case 'rotate':
tsf.rotate= `rotate(${value}deg)`;
break;
case 'multi':
value.forEach(item=>{
this._getTransform(item);
});
break;
default:
break;
}
return `${tsf.translate} ${tsf.scale} ${tsf.rotate}`
}
}
const tf2=new MultiTransform('.ballTwo')
tf2.sleep(2000)
.multi([
{
type:'translate',
value:'100px,100px',
time:5000
},{
type:'scale',
value:2,
time:1000
},
{
type:'rotate',
value:180,
time:10000
}
])
.done()
</script>
</body>
</html>
tf2的，multi中的三个动画还是同时执行的
1回答
-
好帮手慕久久
2021-02-25
同学你好，解答如下：
.multi这个动画的意思是让元素同时做多个动画（不是依次执行multi中的过渡）：
所以multi中的过渡，所需的时间是一样的，应该如下这样设置时间：
之所以要这样设置时间，是原因multi方法的第二个参数对应的是multi过渡的时间：
祝学习愉快！
0
相似问题
回答 2