使用JavaScript实现CSS变形动画

Question

我有一个具体问题和一个一般性问题。

我需要使用JavaScript（没有框架）来实现拖动的动画效果，我认为最好使用translate()代替改变top和left属性，至少可以获得更好的性能。

但这是用户驱动界面的一部分，所以我不能预定义任何动画。因此，我必须构建一个包含更新值的字符串，并将其分配给元素的style属性。

这是我的问题。

因此，如果我需要动画化几个用户驱动的转换，我必须进行相对较重的字符串操作来更新所需值并保留那些我不进行动画处理的值吗？是否有任何简单的JavaScript API可供使用？

首先我想要理解它，所以请不要使用任何框架。

谢谢。

- Anton

---

你要移动什么？需要进行大量的绘制吗？如果不需要，只需更改顶部和左侧。只有在必要时才进行优化。 - sabithpocker

在JS中没有动画API...如果你想这样做动画，基本上只需将CSS分配给元素的.style即可。 - Robert Hoffmann

所有的CSS变换都可以用矩阵形式表示。在某些情况下，使用JS更改矩阵系数可能比构建复合“transform”值作为字符串更容易。有一篇很好的入门文章介绍了CSS变换矩阵（也有俄文翻译版），将变换字符串转换为矩阵以及反向转换的数学方法在规范中有描述。 - Ilya Streltsyn

Answer 1

我看了Ilya关于矩阵的评论，这可能是一个好主意。考虑到我在矩阵数学上挣扎，基于字符串的解决方案非常适合我。

我大约花了半个小时把这个东西拼凑起来，但它似乎运行良好。我假设你只需捕获鼠标移动并更新转换值即可。我创建了toObject方法，以防您想要进行一些更高级的动画。

我认为如果您要选择这种方法，应重新考虑不想使用框架的想法。

(function() {
    var setTransFunc, getTransFunc;

    // make sure cross browser...
    // I don't know if this is nescessary.  Every browser I tried worked on the first options.
    (function () {
        var testElem = document.createElement('DIV');
        if (testElem.style.transform !== undefined) {
            setTransFunc = function (elem, str) {
                elem.style.transform = str;
            }
            getTransFunc = function (elem) {
                return elem.style.transform;
            }
        }
        else if (testElem.style.webkitTransform !== undefined) {
            setTransFunc = function (elem, str) {
                elem.style.webkitTransform = str;
            }
            getTransFunc = function (elem) {
                return elem.style.webkitTransform;
            }
        }
        else if (testElem.style.msTransform !== undefined) {
            setTransFunc = function (elem, str) {
                elem.style.msTransform = str;
            }
            getTransFunc = function (elem) {
                return elem.style.msTransform;
            }
        }
        else {
            throw ('unable to detect set/get methods for transform style.');
        }
    }).call();

    // constructor
    var _tranZ = function (elem) {
        this.elem = (typeof elem == 'string') ? document.getElementById(elem) : elem;
    };

    (function () {
        this.elem = null;
        // sets transform style
        this.set = function (str) {
            setTransFunc(this.elem, str);
            return this;
        }
        // gets string of transform style
        this.get = function () {
            return getTransFunc(this.elem);
        }
        // adds a trasnform
        this.add = function (str) {
            this.set(this.get() + ' ' + str);
            return this;
        }
        // removes a transform
        this.remove = function (name) {
            var re = new RegExp(name + "\\([^)]*\\)", "gi");
            console.log(re);
            this.set(this.get().replace(re, ""));
            return this;
        }
        // represent transforms as object.  Might be easier later on to animate with this.
        this.getTransformObject = function () {
            var str = this.get(),
                re = /(\w+)\s*\(([^)]*)\)/g,
                match, obj = {};

            while (match = re.exec(str)) {
                obj[match[1]] = {
                    parameters: match[2].split(/\s*,\s*/)
                }
            }

            return obj;
        }
    }).call(_tranZ.prototype);

    // add a window module
    window.tranZ = function (elem) {
        return new _tranZ(elem);
    };
})();

{{链接1：jsFiddle}}

- Daniel Gimenez