transformjs:让天下没有难做的生意!不对,是特效!
写在前面
transform是css3新增的一个属性,可是令开发者费解的是,其内部又有大量的属性如旋转、缩放、扭曲、平移,这也就导致了获取或者是设置transform中一个或者多个属性变得异常麻烦。
transform.js意义
- 让前端没有难做的特效
- 告别style.xxxTransform= "xxx(xxdeg) xxx(xxx) "
- 直接element.scaleX=0.5,element.ratation=30.....,更加pure和友好;
- 自动更新元素的显示状态
当然这里transformjs没有提供诸如:animate({scaleX:2,ratation:60},500)的方法,开发者可以基于transform.js自行去封装,transformjs都这么便利了,结合tween也好,或者利用transition也好,封装一个animate方法应该非常简单。说白了,transformjs只负责让开发者通过简单的赋值操作,让dom变化。
5分钟精通transform.js
这里是没有使用任何模块化开发框架,直接暴露在window下的使用代码:
var element = document.querySelector("#testTransform");
//只需这一行代码
transform.mix(element);
//element就能够72变
element.rotation++;
element.scaleX = 2;
element.scaleY = 3;
当然还可以设置诸如:x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY等属性。
其中x对应translateX、y对应translateY、rotation对应rotateZ,regX和regY相当于设置transform-origin。其余属性和transform一致。目前不支持3d
transform.js原理
transformjs依赖 observablejs用于响应属性改变,自动更新元素显示状态。
transformjs依赖 matrix2D用于将元素的transform属性转换为2*3的矩阵,然后赋值给dom的style的transform属性。见核心代码:
observer.propertyChangedHandler = function () {
var mtx = self.element.matrix2D.identity().appendTransform(self.element.x, self.element.y, self.element.scaleX, self.element.scaleY, self.element.rotation, self.element.skewX, self.element.skewY, self.element.regX, self.element.regY);
self.element.style.transform = self.element.style.msTransform = self.element.style.OTransform = self.element.style.MozTransform = self.element.style.webkitTransform = "matrix(" + [mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty].join(",") + ")";
}
在线演示
http://kmdjs.github.io/transformjs/
Github
https://github.com/kmdjs/kmdjs
有问题反馈
在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流
- mail:(kmdjs#qq.com, 把#换成@)
- qq: 644213943
- weibo: @当耐特
transformjs:让天下没有难做的生意!不对,是特效!的更多相关文章
- 阿里云资深技术专家黄省江:让天下没有难做的SaaS
导语:本文中,阿里云资深技术专家黄省江(花名禅笑)将聚焦“SaaS加速器——让天下没有难做的SaaS”,对伙伴来说,SaaS加速器帮助他们做好SaaS,卖好SaaS:对企业来说,SaaS加速器帮助他们 ...
- 阿里云在云栖大会发布SaaS加速器3.0版最新成果,让天下没有难做的SaaS
2019年杭州·云栖大会顺利落幕,超过6万人次观展,200余位顶尖科学家分享了前沿技术.作为“阿里云不做SaaS”,坚持“被集成”战略的落地体现,阿里云SaaS加速器在云栖大会现场发布了SaaS加速器 ...
- 共享商业&技术红利,阿里云SaaS加速器让天下没有难做的SaaS
9月26日,阿里云在2019杭州云栖大会上发布了SaaS加速器3.0版“一云多端”多个应用平台,展示了阿里云给伙伴带来的多种商业和技术红利.阿里云SaaS加速器将帮助伙伴做好SaaS,卖好SaaS:帮 ...
- 阿里云MVP 第十期全球发布:让天下没有难做的技术
简介: MVPs与阿里云一起探索前路,用技术改变世界! 在云的世界中,从来没有“简单”二字,想成为一个优秀的开发者,也没有“简单”二字,而阿里云MVP就一直是云计算中最为顶尖的专家.现在,阿里云MVP ...
- 听H3絮叨:何以让天下没有难用的流程
最近朋友圈.网站新闻铺天盖地是"让天下没有难用的流程",有人就要问了,H3 BPM何德何能,为BPM站台,让天下没有难用的流程? 这是一个关于"办公室空想"的故 ...
- 规模、性能、弹性全面升级,让天下没有难用的 K8s
作者 | 汤志敏 阿里云容器服务开发负责人 Kubernetes 是云原生时代的基础设施.云上的分布式操作系统. 9 月 26 日云栖大会容器专场,在<拐点已至,云原生引领数字化转型升级> ...
- H3 BPM让天下没有难用的流程之产品概述
一.产品简介 BPM(Business Process Management),是指根据业务环境的变化,推进人与人之间.人与系统之间以及系统与系统之间的整合及调整的经营方法与解决方案的IT工具. H3 ...
- DDD——让天下没有难调的程序
https://www.linuxidc.com/Linux/2016-11/137343.htm DDD全称Data Display Debugger,当我第一次见到它时,它的界面着实让我吃了一惊, ...
- 企业级BI为什么这么难做?
本人长期在银行内从事数据线相关工作,亲眼目睹过多个企业级BI(非部门级BI)产品从上线试用.全行推广.然后衰败没落,再替换到下一个BI产品重复此过程.企业内没有任何一个BI产品即能长期运行,又能赢得非 ...
随机推荐
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- WaitType:SOS_SCHEDULER_YIELD
今天遇到一个query,处于SOS_SCHEDULER_YIELD 状态,physical IO 不增加,CPU的使用一直在增长.当一个sql query长时间处于SOS_SCHEDULER_YIEL ...
- Python标准模块--functools
1 模块简介 functools,用于高阶函数:指那些作用于函数或者返回其它函数的函数,通常只要是可以被当做函数调用的对象就是这个模块的目标. 在Python 2.7 中具备如下方法, cmp_to_ ...
- 深入理解DOM事件类型系列第四篇——剪贴板事件
× 目录 [1]定义 [2]对象方法 [3]应用 前面的话 剪贴板操作可能看起来不起眼,但是却十分有用,可以增强用户体验,方便用户操作.本文将详细介绍剪贴板事件 定义 剪贴板操作包括剪切(cut).复 ...
- The network bridge on device VMnet0 is not running
The network bridge on device VMnet0 is not running. The virtual machine will not be able to communic ...
- 应用程序框架实战三十四:数据传输对象(DTO)介绍及各类型实体比较
本文将介绍DDD分层架构中广泛使用的数据传输对象Dto,并且与领域实体Entity,查询实体QueryObject,视图实体ViewModel等几种实体进行比较. 领域实体为何不能一统江湖? 当你阅读 ...
- input(file)按钮美化
<!DOCTYPE HTML> <html> <body> <input type="file" id="upload" ...
- ZOJ Problem Set - 1337 Pi 最大公约数
这道题目的关键在于怎么求两个整数的最大公约数,这里正好复习一下以前的知识,如下: 1.设整数a和b 2.如果a和b都为0,则二者的最大公约数不存在 3.如果a或b等于0,则二者的最大公约数为非0的一个 ...
- 用ThreadLocal类实现线程安全的正确姿势
大家通常知道,ThreadLocal类可以帮助我们实现线程的安全性,这个类能使线程中的某个值与保存值的对象关联起来.ThreadLocal提供了get与set等访问接口或方法,这些方法为每个使用该变量 ...
- 用户反馈:对 Rafy 开发框架的一些个人建议
这篇文章是去年 Rafy 框架发布后,许胜平先生为我提出的一些建议.他从用户群体分析.社区.商业模式.技术支持等方面对框架发展提出了建议,我觉得写得非常不错.此文不仅适用于 Rafy 框架,所以不 ...