移动端二三事【三】：transform的矩阵（matrix）操作、transform操作函数及注意事项

*每当在DOM浏览器中增加动态效果时，使用强大的transform和transition，总是很酸爽。抛开css，使用js操作transform还真的有点复杂，涉及到线性代数中的矩阵，但是js操作又不可避免的会用到。俗话说，山水有相逢，早日学会，早日总结，方便以后用到。今天就与大家分享一下，transform的注意事项以及transform矩阵操作的一些技巧。

*首先说一些小的注意事项，硬菜在后面！

1.js操作transition时需使用驼峰命名增加前缀：

div.style.WebkitTransform = div.style.transform = "rotate(90deg)";

2.多个transition操作的执行顺序：先写的后后执行

以下以两个div为例，点击后执行不同的过渡效果：

    div[0].addEventListener('touchend', function(e) {

        this.style.WebkitTransform = this.style.transform = "scale(.5) translateX(100px)";

    });

    div[1].addEventListener('touchend', function(e) {

        this.style.WebkitTransform = this.style.transform = "translateX(100px) scale(.5)";

    });

初始效果：

点击后的效果：

页面代码如下，可自己拎下来运行：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,user-scalable=no" />

<title>执行顺序</title>

<style type="text/css">

#box {

    width: 100px;

    border: 1px solid #000;

    padding: 100px;

}

.div {

    width: 100px;

    height: 100px;

    margin: 10px 0;

    background: red;

    transition: 3s;

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

}

</style>

<script type="text/javascript">

document.addEventListener('touchstart', function(e) {

    e.preventDefault();

});

window.onload = function(){

    var div = document.querySelectorAll('.div');

    div[0].addEventListener('touchend', function(e) {

        this.style.WebkitTransform = this.style.transform = "scale(.5) translateX(100px)";

    });

    div[1].addEventListener('touchend', function(e) {

        this.style.WebkitTransform = this.style.transform = "translateX(100px) scale(.5)";

    });

};

</script>

</head>

<body>

<div id="box">

    <div class="div"></div>

    <div class="div"></div>

</div>

</body>

</html>

3.移动端在操作结点位置时，尽量使用translate，而操作left或margin等都会引起页面回流（reflow），我们要做的就是尽可能地避免回流，尽可能的减少重绘。

举个栗子使用translate模拟垂直滚动条：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>垂直滚动</title>

<meta name="viewport" content = "width=device-width,user-scalable=no">

<style type="text/css">

body {

    margin: 0;

}

html,

body {

    overflow: hidden;

    height: 100%;

    position: relative;

}

header{

    height: 40px;

    background: #000;

    color: #fff;

    text-align: center;

    font-size: 20px;

    line-height: 40px;

}

#wrap {

    position: absolute;

    left: 0;

    right: 0;

    top: 40px;

    bottom: 0px;

    overflow: hidden;

}

#list {

    margin: 0;

    padding: 0;

    list-style: none;

}

#list li {

    height: 30px;

    border-bottom: 1px solid #000;

    line-height: 30px;

    text-indent: 20px;

}

</style>

<script type="text/javascript">

document.addEventListener("touchstart",function(e){

        e.preventDefault();

});

function setListInner(){

    var list = document.querySelector('#list');

    var inner = "";

    for(var i = 0; i < 100; i++){

        inner += "<li>这是第"+i+"个li</li>"

    }

    list.innerHTML = inner;

}

window.onload = function(){

    setListInner();

    var wrap = document.querySelector('#wrap');

    var list = document.querySelector('#list');

    var startPoint = 0;

    var startEl = 0;

    var elTranslateY = 0;

    list.addEventListener('touchstart', function(e) {

        startPoint = e.changedTouches[0].pageY;

        startEl = elTranslateY;

    });

    list.addEventListener('touchmove', function(e) {

        var nowPoint = e.changedTouches[0].pageY;

        var dis =  nowPoint - startPoint;

        elTranslateY = startEl + dis;

        list.style.WebkitTransform = list.style.transform = "translateY("+elTranslateY+"px)";

    });

};

</script>

</head>

<body>

<header>垂直滚动</header>

<div id="wrap">

    <ul id="list"></ul>

</div>

</body>

</html>

4.矩阵操作

大家都知道当使用js获取transform时获取的是一个矩阵：

    div[0].style.WebkitTransform = div[0].style.transform = "scale(.5) translateX(100px)";

    //最终样式才能获取到transform的矩阵参数字符串

    console.log(getComputedStyle(div[0])["transform"]);                  //  matrix(0.5, 0, 0, 0.5, 50, 0)

    console.log( typeof (getComputedStyle(div[0])["transform"]));       //  string

    console.log(div[0].style.transform);                               //   scale(0.5) translateX(100px)

    console.log(typeof (div[0].style.transform));                     //  string

*矩阵参数对应的变量：
matrix( a, b, c, d, e, f )，基础值为：

matrix( 1, 0, 0, 1, 0, 0 )

基础效果如下：

1.改变位移：

//位移:

//x为轴位移量，y为y轴位移量，可使用负数

//x轴位移 = e + x;

//y轴位移 = f + y;

//如下为左移100像素，下移50像素

div[0].style.transform = "matrix(1, 0, 0, 1, -100, 50)";

改变位移效果：

2.缩放：

（1） x轴缩放：操作变量a,c,e

//x轴:

//a = a*x;

//c = c*x;

//e = e*x;
//x为缩放倍数

div[0].style.transform = "matrix(.5, 0, 0, 1, 0, 0)";

x轴缩放0.5效果：

（2）y轴缩放：操作变量b,d,f

//y轴:

//b = b*x;

//d = d*x;

//f = f*x;

div[0].style.transform = "matrix(1, 0, 0, .5, 0, 0)";

y轴缩放后效果：

由此就可以解释，在使用css命令时的执行顺序问题：

//先执行matrix(.5, 0, 0, 1, 0, 0)

//后执行matrix(.5, 0, 0, 1, 100, 0)

div[0].style.transform = "scaleX(.5) translateX(100px)";

//先执行matrix(1, 0, 0, 1, 100, 0)

//后执行matrix(.5, 0, 0, 1, 50, 0)

div[0].style.transform = "translateX(100px) scaleX(.5)";

3.斜切：

（1）x轴斜切：

//x轴斜切30度：单位(deg)

//操作参数c，修改参数时需要转化为弧度

//弧度 = Math.tan(角度/180*Math.PI);

div[0].style.transform = "matrix(1, 0, "+Math.tan(30/180*Math.PI)+", 1, 0, 0)";

效果如下：

（2）y轴斜切：

//y轴斜切30度：单位(deg)

//操作参数b，修改参数时需要转化为弧度

div[0].style.transform = "matrix(1,"+Math.tan(30/180*Math.PI)+",0, 1, 0, 0)";

效果如下：

4.旋转rotate：

//旋转：

//修改a，b，c，d四个参数

var a = Math.cos(45/180*Math.PI);

var b = Math.sin(45/180*Math.PI);

var c = -Math.sin(45/180*Math.PI);

var d = Math.cos(45/180*Math.PI);

div[0].style.transform = "matrix("+ a +","+ b +","+ c +","+ d +",0,0)";

效果如下：

5.transform操作函数封装

若现在有这么一个需求，每次点击div后，使其旋转30deg，那么我们是无法直接操作transform完成的，通过js修改操作css的transform无法记录当前的状态（旋转角度等）。因此需要转换思想进行函数封装，封装的原理是添加自定义属性，再利用自定义属性为相应结点添加transform。

function cssTransform(element, attr, val){

    if(!element.transform){

        element.transform = {};

    }

    if(typeof val === "undefined"){

        if(typeof element.transform[attr] === "undefined"){

            switch(attr){

                case "scale":

                case "scaleX":

                case "scaleY":

                case "scaleZ":

                    element.transform[attr] = 100;

                    break;

                default:

                    element.transform[attr] = 0;

            }

        }

        return element.transform[attr];

    } else {

        element.transform[attr] = val;

        var transformVal  = "";

        for(var s in element.transform){

            switch(s){

                case "scale":

                case "scaleX":

                case "scaleY":

                case "scaleZ":

                    transformVal += " " + s + "("+(element.transform[s]/100)+")";

                    break;

                case "rotate":

                case "rotateX":

                case "rotateY":

                case "rotateZ":

                case "skewX":

                case "skewY":

                    transformVal += " " + s + "("+element.transform[s]+"deg)";

                    break;

                default:

                    transformVal += " " + s + "("+element.transform[s]+"px)";

            }

        }

        element.style.WebkitTransform = element.style.transform = transformVal;

    }

}

注意！如果要获取transform相关的属性，那transform相关的设置也必须是通过该方法设置的！

利用封装的函数，就可以完成刚才的需求。完整的代码如下，可自行运行查看效果：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,user-scalable=no" />

<title>点击旋转30deg</title>

<style type="text/css">

    #box {

        width: 100px;

        height: 100px;

        border: 1px solid #000;

        padding: 100px;

    }

    #div {

        height: 100px;

        background: red;

        transition: .5s;

    }

</style>

<script type="text/javascript">

function cssTransform(element, attr, val){

    if(!element.transform){

        element.transform = {};

    }

    if(typeof val == "undefined"){

        if(!element.transform[attr]){

            switch(attr){

                case "scale":

                case "scaleX":

                case "scaleY":

                case "scaleZ":

                    element.transform[attr] = 100;

                    break;

                default:

                    element.transform[attr] = 0;

            }

        }

        return element.transform[attr];

    } else {

        element.transform[attr] = val;

        var transformVal  = "";

        for(var s in element.transform){

            switch(s){

                case "scale":

                case "scaleX":

                case "scaleY":

                case "scaleZ":

                    transformVal += " " + s + "("+(val/100)+")";

                    break;

                case "rotate":

                case "rotateX":

                case "rotateY":

                case "rotateZ":

                case "skewX":

                case "skewY":

                    transformVal += " " + s + "("+val+"deg)";

                    break;

                default:

                    transformVal += " " + s + "("+val+"px)";

            }

        }

        element.style.WebkitTransform = element.style.transform = transformVal;

    }

}

window.onload = function(){

    var div = document.querySelector('#div');

    div.addEventListener('touchend', function(e) {

        var deg = cssTransform(this, "rotate");

        deg += 30;

        cssTransform(this, "rotate", deg);

    });

};

</script>

</head>

<body>

<div id="box">

    <div id="div"></div>

</div>

</body>

</html>

移动端二三事【三】：transform的矩阵（matrix）操作、transform操作函数及注意事项的更多相关文章

移动端二三事【三】：transform的注意事项
1.js操作transition时需使用驼峰命名: div.style.WebkitTransform = div.style.transform = "rotate(90deg)" ...
WinForm二三事（三）Control.Invoke&Control.BeginInvoke
http://www.cnblogs.com/yuyijq/archive/2010/01/11/1643802.html 这个系列从2009年写到2010年,差点又成太监文.随着WPF/Silver ...
【CSS3】理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
css3 transform中的matrix矩阵
CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...
Java并发编程二三事
Java并发编程二三事转自我的Github 近日重新翻了一下<Java Concurrency in Practice>故以此文记之. 我觉得Java的并发可以从下面三个点去理解: * ...
linux杂记（十二?) 关于账号和密码的二三事
关于密码的二三事关于账号和密码的二三事久了不更linux的相关知识,实在是懒得想内容点(纯粹是懒).那么今天就来谈谈关于linux密码和账号的重要概念. 假如你的主机遭到入侵,那么对方的第一个侵入 ...
{Django基础八之cookie和session}一会话跟踪二 cookie 三 django中操作cookie 四 session 五 django中操作session
Django基础八之cookie和session 本节目录一会话跟踪二 cookie 三 django中操作cookie 四 session 五 django中操作session 六 xxx 七 ...

随机推荐

DynamicSegmentTree
最近尝试了一下动态开点线段树,英文直译就是Dynamic Open Point Segment Tree,太SB了. 就跟之前的主席树写法差不多. if(!x || x == y) { x = ++t ...
Java环境变量自动配置。嗯，就是用C#去配置JDK
在跟学弟们聊天的过程中,发现一些人在首次接触Java时,对环境变量配置总是很生疏.可能是由于初学,对一些概念没有很深刻的理解.本着助人为乐的精神.我决定帮他们一下.写一个自动配置JDK环境变量的小工具 ...
JAVA io 包小结
IO 无非读写 I --> Reader O--> Writer 为了方便字符或者文本文件的操作创造出了字符流尤其是缓冲字符输入输出流(BufferedReader,Buff ...
Liberty Mutual Property Inspection, Winner's Interview: Qingchen Wang
Liberty Mutual Property Inspection, Winner's Interview: Qingchen Wang The hugely popular Liberty Mut ...
[转载] PNG优化插件：TinyPNG for Photoshop CC
http://www.im286.com/thread-14922316-1-1.html http://www.tinypng.com的PS插件版,优化.无损压缩PNG,支持批量处理,据说只支持Ph ...
CSS图片下面产生间隙的6种解决方案
CSS图片下面产生间隙的6种解决方案在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於该问题的解决方法也是 ...
GORM 中文文档
由于篇幅问题,本文只是快速开始部分,下面是完整地址. 中文文档地址:http://gorm.book.jasperxu.com/ 中文文档项目地址:https://github.com/jasperx ...
npm 更换阿里镜像
使用NPM(Node.js包管理工具)安装依赖时速度特别慢,只需要使用–registry参数指定镜像服务器地址, npm install your-need-model --registry=http ...
HDU 1875 畅通工程再续最小生成树问题
题目描述:输入一个T,表示有T组测试数据,然后每组测试数据有一个C,表示在一个湖里面有C座岛屿,现在要在岛屿之间修建桥,可以修建必须满足的条件是岛与岛之间的距离在10到1000的范围内,然后给出每座岛 ...
Integer中1000==1000为false而100==100为true
查看Integer.java类,会发现有一个内部私有类,IntegerCache.java,它缓存了从-128到127之间的所有的整数对象.如果在这个区间内,他就会把变量当做一个变量,放到内存中:但如 ...

移动端二三事【三】：transform的矩阵（matrix）操作、transform操作函数及注意事项

移动端二三事【三】：transform的矩阵（matrix）操作、transform操作函数及注意事项的更多相关文章

随机推荐

热门专题