transformjs污染了DOM?是你不了解它的强大

Transform(element);

var tween = new TWEEN.Tween({ translateX: element.translateX, translateY: element.translateY })
    .to({ translateX: 100, translateY: 100 }, 1000)
    .onUpdate(function () {
        element.translateX = this.translateX
        element.translateY = this.translateY
    })
    .start();

requestAnimationFrame(animate);

function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}

这里由于 TWEEN.Tween会去遍历所以的属性并且设置初始值，如tween里面的代码：

 // Set all starting values present on the target object
for (var field in object) {
    _valuesStart[field] = parseFloat(object[field], 10);
}

所以不能直接把 new TWEEN.Tween(element)。
因为在start之前，程序其实已经可以完全收集到所有需要to的属性，去运动便可以。我们可以自己封装一个tween去支持这种简便的方式。如：

var Tween = function (obj) {
    this.obj = obj;
    return this;
}

Tween.prototype = {
    to: function (targets, duration, easing) {
        this.duration = duration;
        this.targets = targets;
        return this;
    },
    start: function () {
        this.startTime = new Date();
        this._beginTick();
    },
    _beginTick: function () {
        var _startValues = {},
            targets = this.targets;
        for (var key in targets) {
            if (targets.hasOwnProperty(key)) {
                _startValues[key] = this.obj[key];
            }
        }
        var self  = this;
        this._interval = setInterval(function () {
            var dt = new Date() - self.startTime;
            for (var key in targets) {
                if (targets.hasOwnProperty(key)) {
                    if (dt >= self.duration) {
                        clearInterval(self._interval);
                    } else {
                        var p = dt / self.duration;
                        var dv = targets[key] - self.obj[key];
                        self.obj[key] += dv * p;
                    }
                }
            }
        }, 15)

    }
}

这里为了简便使用setInterval去进行loop，当然可以换成其他方式。现在便可以使用如下方式：

var element = document.querySelector("#test");
Transform(element);
var tween = new Tween(element)
    .to({ translateX: 100, translateY: 100 }, 1000)
    .start();

当然这有点跑题了。这里只是对比直接使用DOM挂载和使用第三方对象挂载的区别。第三方挂载有点隔山打牛的感觉。
当然..，还没有完，不仅仅可以上面那个样子。那还可以把transformjs完全当作一个计算工具来用。

语法2

 Transform.getMatrix3D(option)

姿势

var matrix3d = Transform.getMatrix3D({
    translateX: 0,
    translateY: 100,
    scaleX:2
});
console.log(matrix3d);

打印出来你将得到下面的值：

你想用这个值来干什么就干什么吧。看transformjs源码可以得到 Transform.getMatrix3D一共支持的属性：

Transform.getMatrix3D = function (option) {
    var defaultOption = {
        translateX: 0,
        translateY: 0,
        translateZ: 0,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 0,
        skewX: 0,
        skewY: 0,
        originX: 0,
        originY: 0,
        originZ: 0,
        scaleX: 1,
        scaleY: 1,
        scaleZ: 1
    };
    for (var key in option) {
    ...
    ...
    ...

}

语法3

 Transform.getMatrix2D(option)

不仅仅是3D matrix， transformjs也提供了2D的工具函数支持。

姿势

var matrix2d = Transform.getMatrix2D({
    translateX: 0,
    translateY: 100,
    scaleX:2
});
console.log(matrix2d);

打印出来你将得到下面的值：

  • a 水平缩放
  • b 水平拉伸
  • c 垂直拉伸
  • d 垂直缩放
  • tx 水平位移
  • ty 垂直位移

那么得到这个Matrix2D有什么用?

  • 缩放：scale(sx, sy) 等同于 matrix(sx, 0, 0, sy, 0, 0);
  • 平移：translate(tx, ty) 等同于 matrix(1, 0, 0, 1, tx, ty);
  • 旋转：rotate(deg) 等同于 matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0);
  • 拉伸：skew(degx, degy) 等同于 matrix(1, tan(degy), tan(degx), 1, 0, 0);

看transformjs源码可以得到 Transform.getMatrix2D一共支持的属性：

Transform.getMatrix2D = function(option){
    var defaultOption = {
        translateX: 0,
        translateY: 0,
        rotation: 0,
        skewX: 0,
        skewY: 0,
        originX: 0,
        originY: 0,
        scaleX: 1,
        scaleY: 1
    };
    ...
    ...
    ...
}

特别注意事项

Transform.getMatrix2D 和Transform.getMatrix3D都是支持origin特性，请和transform-origin说拜拜
Transform.getMatrix2D 和Transform.getMatrix3D没有使用传统的Math.tan去实现shew，取而代之的是half of rotation

如2d的skew：

Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX)

以前腾讯IEG的同学问过为什么使用half of rotation，而不使用Math.tan？
原因很简单，Math.tan扭曲力度特别大，而且会有无穷大的值导致扭曲横跨整个屏幕。

而half of rotation则不会。

getMatrix2D有用吗？

用于Dom Transformation时候，可以用于兼容不支持CSS3 3D Transforms的浏览器

如，我们可以很轻松的把一些transformation属性转换成CSS3属性赋给DOM:

var matrix = Transform.getMatrix2D({
    rotation: 30,
    scaleX: 0.5,
    scaleY: 0.5,
    translateX: 100
});
ele.style.transform = ele.style.msTransform = ele.style.OTransform = ele.style.MozTransform = ele.style.webkitTransform = "matrix(" + [matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty].join(",") + ")";

用于Canvas和SVG Transformation

什么？还能用于Canvas和SVG?是的，举个例子，在Canvas画一个旋转30度、缩小成0.5倍，并且平移（200,200）的图片：

var canvas = document.getElementById("ourCanvas"),
    ctx = canvas.getContext("2d"),
    img = new Image(),
    rotation = 30 * Math.PI / 180;

img.onload = function () {
    ctx.sava();
    ctx.setTransform(
        0.5 * Math.cos(rotation), 0.5 * Math.sin(rotation),
        -0.5 * Math.sin(rotation), 0.5 * Math.cos(rotation),
        200, 200
    );
    ctx.drawImage(img, 0, 0);
    ctx.restore();
};

img.src = "asset/img/test.png";

上面是我们传统的姿势。使用Transform.getMatrix2D 之后，变成这个样子：

var canvas = document.getElementById("ourCanvas"),
    ctx = canvas.getContext("2d"),
    img = new Image();

var matrix = Transform.getMatrix2D({
    rotation: 30,
    scaleX: 0.5,
    scaleY: 0.5,
    translateX: 200,
    translateY: 200
});

img.onload = function () {
    ctx.sava();
    ctx.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
    ctx.drawImage(img, 0, 0);
    ctx.restore();
};

img.src = "asset/img/test.png";

可以看到，这里让开发者不用自己去拼凑matrix。SVG的粒子就不再举例，和用于DOM的例子差不多，相信大家能够很快搞定。

开始使用吧

最后，多谢大家对transformjs的建议，有了你们中肯建议和意见，才让它变得更好更灵活更强大。

-转载

时间： 2024-10-15 02:59:01

transformjs污染了DOM?是你不了解它的强大的相关文章

库&插件&框架&工具

nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署,可能大多数前端工程师在工作中都是使用的公司现成的部署系统,与SRE对接.一起完成前端的部署操作.如果我现在给你一台新注册的云主机,那么你应该怎么做才能把一个前端工程部署到一台云主机上,成为一个可以访问的网页呢?今天我们就来聊聊前端的部署~ 首先,一个前端工程要变成- 一个 jQuery 前端插件

java中的xml简介与DOM解析xml

1. xml简介 XML:指可扩展标记语言, Extensible Markup Language:类似HTML.XML的设计宗旨是传输数据,而非显示数据. 一个xml文档实例: 1 <?xml version="1.0" encoding="UTF-8"?> 2 <company name="Tencent" address="深圳市南山区"> 3 <department deptNo=&quo

JSONP原理及代码简单实现

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP,这项技术可以解决跨域提交Ajax请求的问题. JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制:它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持:并且在请求完毕后可以通过调用callback的方式回传结果. JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求:它只支持跨域H

JSONP原理及简单实现

文章是转过来的,来自:http://www.travisup.com/post/index/28 在web2.0时代,熟练的使用ajax是每个前端攻城师必备的技能.然而由于受到浏览器的限制,ajax不允许跨域通信. JSONP就是就是目前主流的实现跨域通信的解决方案. 虽然在在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有.jsonp主要是通过script可以链接远程url来实现跨域请求的.如: <sc

跨域通信的解决方案JSONP

在web2.0时代,熟练的使用ajax是每个前端攻城师必备的技能.然而由于受到浏览器的限制,ajax不允许跨域通信. JSONP就是就是目前主流的实现跨域通信的解决方案. 虽然在在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有.jsonp主要是通过script可以链接远程url来实现跨域请求的.如: <script src="http://jsonp.js?callback=xxx"&g

闭包深度理解

一.闭包的概念理解 在 定义 某函数的 词法作用域 以外调用该函数时,该函数依然保留有对其 定义时的词法作用域 的引用.那么这个 引用 就叫做闭包. 闭包的一些特点: 当函数在定义时的词法作用域以外调用时,闭包使得函数可以继续访问其定义时的词法作用域 闭包可以阻止内存空间的回收 只要使用了回调函数,实际上就在使用闭包 Tip: 词法作用域是定义在词法阶段的作用域,即是由 编写代码时 函数.变量声明的位置来决定的.也就是说,词法作用域是在 编写代码时 绑定的.(对比this,其是在代码运行时绑定)

为什么会有jQuery、Dojo、Ext、Prototype、YUI、Zepto这么多JS包？

目前流行的JS框架很多Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx 等.当然还有很多我都不熟悉的框架,就没有列举. 很多人会在坛子里问,到底哪个框架好呢?哪个框架更牛x呢? 哪个框架OO 更舒服呢? 个人觉得,这是一个新手很容易犯的错误逻辑. 世界上任何东西,任何工具,都没有最好的这一个说法,只有适合和不适合. 我们要根据我们项目的真实需要来选择具有相关特性的框架. 一.JQuery推荐级别:

jQuery基本知识

jQuery知识结构 * jQuery入门?     * js函数库(DOM/ajax)     * 特点:         * HTML元素选取         * HTML元素操作         * CSS操作         * HTML事件处理         * JS动画效果         * 链式调用         * 浏览器兼容         * Ajax封装         * 易扩展插件     * helloworld         * 引入库           

PHP 面试题

请写出以下html标签的含义: input form script style table b img ============================================================ <input/>标签 用于搜集用户信息. 根据不同的type属性值,输入字段拥有很多种形式. 输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. =====================================================