变形园

weixin_40533188

于 2019-08-22 09:59:06 发布

阅读量127

点赞数

文章标签： vue+react

本文链接：https://blog.csdn.net/weixin_40533188/article/details/100008588

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
div{
width:150px;
height: 150px;
border-radius: 50%;
background:linear-gradient( red 50%,green 50%);
}
</style>
</head>
<body>

//声明一个变形类
class Transform{

constructor(selector){
//获取选择器
this._el=document.querySelector(selector);
this.defaultTime=Transform.config.defaultTime;
//设置是否所有的属性都可以发生渐变
this._el.style.transition=`all ${this.defaultTime}`;
//设置默认时间

//用于存放变形的方法
this.queue=[];
//用于存放每一个变形的属性
this.transform={
translate:'',
scale:'',
rotate:''
};
}

//平移方法

translate(value,time){
this._add("translate",value,time);
return this;

}

//旋转方法
rotate(value,time){

this._add("rotate",value,time);
return this;
}

//扭曲
scale(value,time){
this._add("scale",value,time);
return this;
}

//添加

_add(type,value,time){

this.queue.push({type,value,time});
return this;

}

//所有组装完之后进行开始
done(){
this._start();
}

//将变形方法一个一个取出来
_start(){
setTimeout(()=>{

//判断接受方法
if(!this.queue.length) return;

const info=this.queue.shift();
this._el.style.transition=`all ${info.time}/1000`;
console.log(this._getTransform(info))
this._el.style.transform=this._getTransform(info);
   setTimeout(() => {
               this._start();
           }, info.time);

},0);

}

//获取属性
_getTransform({type,value,time}){
//用于存放样式
const tf=this.transform;
switch(type){
case "translate":
tf.translate=`translate(${value})`;
break;
case "scale":
tf.scale=`scale(${value})`;
break;
case "rotate":
tf.rotate=`rotate(${value}deg)`
break;

}
return `${tf.translate} ${tf.scale} ${tf.rotate}`;
}

}

//设置一个默认时间
Transform.config={
defaultTime:''
}
Transform.config.defaultTime="3s";

//
class MutilTransform extends Transform{

   multi(value, time) {
       return this._add('multi', value, time);
   }

sleep(time){
return this._add("sleep","",time);
}

_getTransform({type,value,time}){
   //用于存放样式
   const tf=this.transform;
switch(type){
case "translate":
tf.translate=`translate(${value})`;
break;
case "scale":
tf.scale=`scale(${value})`;
break;
case "rotate":
tf.rotate=`rotate(${value}deg)`
break;
case 'multi': //这里可以散开传进来
value.forEach(item=>{
    this._getTransform(item);
});
break;
case 'sleep':
break
}
return `${tf.translate} ${tf.scale} ${tf.rotate}`;
}

}
const tf = new MutilTransform('#app');
tf
   .translate('200px, 200px')
   .scale(1.5)
   .sleep(1000)
   .rotate(180, 5000)
   .multi([
       {
           type: 'translate',
           value: '0, 0'
       },
       {
           type: 'scale',
           value: 2
       }
   ])
.done()

</script>
</body>
</html>

weixin_40533188

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
变形园

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">div{width:150px;height: 150px;bo...
复制链接

扫一扫