transform的原理是计算机图形学中的2D矩阵变换,
在开始之前,首先来复习下一个简单的线性代数知识:矩阵与向量乘法。太复的用不到,只需要3维向量与3x3矩阵的乘积:
接下来我们来说说transform跟矩阵乘法的关系,我们的任何一个html元素渲染完成后可以得到一张位图,把这张位图上所有的点都做一次矩阵运算,将得到一张的新的位图,这就是transform的基本含义。
首先来看最简单的transform,translate。我们都知道tansform:translate(tx,ty);的基本含义是将一个元素的显示位置平移tx,ty。在矩阵变换中,translate体现为下面的矩阵运算:
tansform:scale(sx,sy);将一个元素拉伸或者压缩指定的倍数,它对应的矩阵变换是:
transform:rotate(a)将一个元素旋转角度a,它对应的矩阵变换是:
transform:skew(ax,ay)将一个元素研x向和y向倾斜角度ax和ay,它对应的矩阵变换是:
transform:matrix(a,b,c,d,e,f)则是完整的矩阵变换,把这张位图上所有的点都做一次矩阵乘法,得到的新位图
transition涉及到的则是另一个数学概念:贝塞尔插值。
transition的变换函数有 linear ease ease-in ease-out ease-in-out几种,通常我们尝试使用时能感觉到它们之间稍有不同。
实际上,它们是使用了不同的参数进行三次贝塞尔插值计算的结果。所以我们先来复习一下贝塞尔插值:
一个量(可以是任何矢量或者标量)从一个值到变化到另一个值,如果我们希望它按照一定时间平滑地过渡,就必须要对它进行插值。
最基本的情况,我们认为这个变化是按照时间均匀进行的,这个时候,我们称其为线性插值。而实际上,线性插值不大能满足我们的需要,因此数学上出现了很多其它的插值算法,其中贝塞尔插值法是非常典型的一种。它根据一些变换中的控制点来决定值与时间的关系。
K次贝塞尔插值算法需要k+1个控制点,最简单的一次贝塞尔插值就是线性插值,将时间表示为0到1的区间,一次贝塞尔插值公式是:
二次贝塞尔插值有3个控制点,相当于对P0和P1,P1和P2分别做贝塞尔插值,再对结果做一次贝塞尔插值计算
三次贝塞尔插值则是两次二次贝塞尔插值的结果在做一次贝塞尔插值:
回到我们的transition,我们要用到的就是三次贝塞尔插值算法了。
把时间认为是0,1区间,待变换属性也认为是0,1区间,那么所有的控制函数都是三次贝塞尔函数:
ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]
linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]
ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]
ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]
ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]
cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]
最后附上各函数图,请自行辨认:
相关推荐
基于SVG的矢量绘图与矩阵变换
svg 转换解析器在 Javascript 中解析 SVG 转换安装 npm install svg-transform-parser用法 var parseSvgTransform = require('svg-transform-parser').parse;parseSvgTransform("translate(10,20)");// {translate: ...
在vue中使用three.js的svg拉伸体的转换函数transformSVGPathExposed
NULL 博文链接:https://long316.iteye.com/blog/1332896
一款让人看得眼花缭乱的HTML5 SVG多彩三角形矩阵动画特效,多种颜色的三角形矩阵布局放大缩小动画效果。
HTML5 SVG三角形矩阵动画特效是一款基于HTML5 SVG制作的三角形矩阵布局放大缩小动画特效。
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
SVG( Scalable Vector Graphics),即可缩放矢量图形, 是基于XML( Extensible Markup Language) 描述二维矢量图形的标记语言,由World Wide Web Consortium( W3C联盟,即万维网 联盟) 自1999年开始开发的开放...
SVG的基本原理是,将电压源型逆变器,经过电抗器并联在电网上。电压源型逆变器包含直流电容和逆变桥两个部分,其中逆变桥由可关断的半导体器件IGBT组成。
最近在用svg的点击事件做...SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序(比如谷歌地图) •复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) •不适合游戏应用 做出的网页在
静止无功发生器SVG的工作原理及与同类产品比较pdf,静止无功发生器SVG的工作原理及与同类产品比较
把svg格式图形转成xaml格式的源码,用于wpf和silverlight
SVG模型在matlab的仿真原理图,SVG模型在matlab的仿真原理图
SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程
CSS3 SVG线条圆圈变换背景动画特效,一款很有创意的纯CSS3动画特效,矢量线条不断变粗并画圆直到填满整个背景,然后线条颜色与背景颜色交替继续画,一直循环。
世界所有国家的国旗 SVG 图标 共266国家 1X1和 4x3 格式 文件命名为 国家缩写 (ad.svg)
snap.svg的介绍文档,如果不想看php的话可以访问http://www.zhangxinxu.com/GitHub
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
java解析svg,一个用于android中解析svg的jar包,发的实打实地方的所得税