transformjs:让天下没有难做的生意!不对,是特效!

http://www.cnblogs.com/iamzhanglei/p/3990132.html

transformjs:让天下没有难做的生意!不对,是特效!

2014-09-24 10:51 by 【当耐特】, 3465 阅读, 6 评论, 收藏编辑

写在前面

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

时间: 2024-11-06 18:29:41

transformjs:让天下没有难做的生意!不对,是特效!的相关文章

马云又在“吹牛”了:让世界都没有难做的生意

吹的牛都实现了 一个诞生在中国的美国英雄故事 9 月 19 日,马云没有选择他钟爱的亮黄色或者大红色系上衣,但却成为聚光灯追逐的最闪亮的一个人. 在纽约,酒店服务员告诉北京晨报记者,这一周的新闻都在讨论阿里巴巴和马云.当看到记者拿着印有阿里巴巴标志的手提袋,擦身而过的华人会激动地问:马云来了吗?就连坐落在华尔街 11 号拥有 111 年历史的纽交所大楼,在阿里巴巴上市当天,也一改往昔风格,大楼内外被装扮成为阿里巴巴的代表色橙色. 美国知名财经卫视 CNBC 全程直播了开盘过程.敲钟后 143 分

云栖大会SaaS加速器专场 | 阿里云资深技术专家黄省江:让天下没有难做的SaaS

导语:本文中,阿里云资深技术专家黄省江(花名禅笑)将聚焦“SaaS加速器——让天下没有难做的SaaS”,对伙伴来说,SaaS加速器帮助他们做好SaaS,卖好SaaS:对企业来说,SaaS加速器帮助他们选好SaaS,用好SaaS.同时,也全面展示了SaaS加速器的产品堆栈和最新成果. 上一Part辛总分享了阿里云不敢做SaaS的原因,顺着他的话题我来讲一下我的感受,确实我们是不敢做.不敢做不是因为To B的链条太长,毕竟阿里云现在有To B自有的产品,然后商业以及服务体系里面也建立了自己的一整套班

为什么现在生意越来越难做?工作越来越难找?

很多人会发现现在的生意越来越难做了,工作也是越来越难找.很多企业倒闭了,同时造成了许多打工者失业,究其原因有很多,现在我们来简单分析一下. 1.房价房租暴涨 从2000年开始,中国房价开始上涨以来,已经上涨了17年,房子从没人买的年代,到了现在买不起.一套房子从几万涨到了现在几百万,甚至上千万,很多人一辈子都赚不到这些钱.随着房价暴涨,房租也一起飙升,房租总得对得起房价的利息吧,很多企业的工厂房租上涨过快,很多跨国企业的制造中心从华东地区搬迁到了西南地区,西南地区厂房租不起了,干脆搬到了东南亚国

生意越来越难做的背后是什么?

1.寒冬 又到冬天了,路边瑟瑟发抖的创业者似乎一抓一大把,各行各业都在喊经济不景气,生意不好做,而最近两天我却听说了一个有趣的观点:表明上生意越来越难做,其实背后是各行各业越专业,越来越精益求精了,留给投机取巧的人机会越来越少,留下的都是坚持品质.真才实干.脚踏实地的创业者. 2.红利 以电商.新媒体为代表的创业公司在前几年都享受了互联网的红利是事实.一做食品电商的哥们儿,现在一年营业额能做到1个亿以上.我问他是怎样走上电商创业道路的?他说,N年前,他为了养家,想多挣点外快,于是开了个淘宝店铺,

为什么生意越来越难做?

时代在改变,生意的逻辑也在发生变化,很多人觉得生意越来越难做的同时,还有人觉得生意越来越好做了. 具体到为什么会有人感觉生意越来越难做,有如下五点原因: 1.网购的兴起 支付宝是一个很伟大的发明,通过先代收货款,购买者确认收货后再交给卖家的模式解决了互联网信任问题.网购可以大幅降低开店成本,最为关键的是还能解决地区差价问题,通过全国比价找到性价比最高的商品. 不管是阿里巴巴的淘宝天猫还是京东.井兮兮.微商,经过多年发展,互联网模式也带来了新的弊端,那就是互联网太容易形成垄断了.实力强.推广能力强

H3 BPM10.0让天下没有难用的流程之产品概述

一.产品简介 BPM(Business Process Management),是指根据业务环境的变化,推进人与人之间.人与系统之间以及系统与系统之间的整合及调整的经营方法与解决方案的IT工具. H3 BPM,即H3 业务流程管理,基于"流程再造之父"迈克尔.哈默的管理思想,以流程作为企业管理的切入点,帮助企业实现各业务环节高度整合.端到端的流程管理.通过流程设计.运行.监控.分析.优化等流程全生命周期的闭环管理,迅速降低企业的运营成本.提升运营效率.减少运营风险,并实现企业管理的持续

SEO为什么越来越难做?

很久没有折腾seo了,很久没有绞尽脑汁想着怎么发外链了,一方面没有什么时间花在SEO上了,另一方面SEO越来越难做,还有一个方面,也是SEO的特性,不可控性与不可预测性,导致很多情况下我们花在SEO上的大部分时间都被浪费了. 现在的SEO确实不好做了,今晚只有四点感想 第一:SEO的前途 可能很多朋友从事seo一段时间后失去了当初的热情,找不到SEO的出路,这是一个必然情况. 如今越来越多的人开始从事互联网,而SEO基本上是一个必须的技能,就算不靠SEO,但很多时候也会用到SEO.而seo从事者

怎样做外贸生意 ?

怎样做外贸生意 ? 最近很多朋友都找我咨询,问是都是怎样做外贸生意,虽说本人已转行做教育,但是今天还是很想来跟大家分享下做外贸做了十几年的经验. 很多人会觉得外贸离自己很遥远很高大上,以为只有非常有实力的企业才能做外贸销售,做出口.其实做外贸的企业无处不在,越来越多,一个人可以做,几个人也可以做,贸易公司可以做,工厂也可以做. 大家都知道早些年就开始做外贸的企业,都发了大财.都说外国人的钱好赚一些,其实也不无道理.所以现在做外贸的企业已经非常普遍化. 1.外贸平台.做外贸的首先要考虑的问题是客户

PPT难做?花太长时间?收藏这4个网站,省时省力效率提升不止一倍

很多人在进入职场后,通常第一个要做的是制作一份简洁有逻辑的PPT.所以如果在职场办公过程中不会使用PPT软件真的太吃亏了.很多人都常说PPT难做,花了很长时间.其实,是因为你不知道可以高效做到,只需收藏这个4个网站! 一.PA口袋动画 PA口袋动画,是一款独立开发的PowerPoint动画编辑工具,主要用于在制作PPT的过程中添加相应的PPT动画效果,让PPT变得更加有感染力,绝对是职场PPT制作.展会PPT必备. 二.PPT美化大师 PPT美化大师,提供大量一键更换排版.一键更背景,对PPT个