从头开始复习css之2D变换

481 阅读9分钟

最近一直在系统的复习前端基础知识, 不复习的时候不知道 一旦系统的复习才知道 原来自己对很多知识还是处于一知半解的地步,好吧 话不多说 开始写吧:

一、 过渡

1.1、 过渡是什么?

首先关于过渡,过渡是一个什么东西呢?我感觉用语言来描述是很苍白的,我们直接来看下面一段代码:

// css
.test {
  width: 200px;
  height: 200px;
  background-color: red;
}
.test:hover {
  height: 400px;
}
// html
<div class="test"></div>

代码的意思是在鼠标放在元素上面的时候,就会改变元素的高度,具体的效果如下:

效果.gif

我们发现:在鼠标hover的时候,元素一瞬间高度变化,紧接着我们在其基础上面增加过渡的代码:

transition: height 2s;

效果如下:

效果.gif
从上面的效果,我们可以看出来没加过渡和加过渡的之后的效果差距,过渡效果就像在变换的过程中增加缓冲效果,也就是说过渡就是元素从一种样式逐渐改变为另一种的效果

1.2、 介绍过渡可选用的属性

那么关于过渡,需要掌握的知识点有哪些呢?

  • transition 简写属性,用于在一个属性中设置四个过渡属性,依次是下面几个元素
  • transition-property 规定应用过渡的 CSS 属性的名称。
  • transition-duration 定义过渡效果花费的时间。默认是 0。
  • transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
  • transition-delay 规定过渡效果何时开始。默认是 0
1.3、 transition-property

transition-property属性规定应用过渡效果的css属性的名称,当指定css属性值发生改变的时候,过渡效果将会触发。 其可选值是:

  • **none:**没有属性会触发过渡效果
  • **all:**所有的属性变化都会触发过渡效果
  • **property:**定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
1.4、 transition-duration

transition-duration属性规定完成过渡效果需要花费的时间。默认值是0.

1.5、 transition-timing-function

transition-timing-function属性规定过渡效果的速度曲线。其可选值有:

  • linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
  • **ease ** 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
  • ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
  • ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
  • ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 这里值得我们注意的是:最后一个速度的值可以在赛贝尔曲线官网上自行选取。
1.6、transition-delay

transition-delay 属性规定过渡效果何时开始。通俗点说就是设置变换的延时时间。

1.7、 来搞个例子吧

说了这么概念性的问题,接下来看一段代码:

// css
		.runn-area{
			background: skyblue;
			padding: 2px 4px
		}
		.runn-area:hover>.test{
			transform: translateX(80px);
		}
		.runn-area:hover>.test3{
			transform: translate(80px,0) rotate(360deg);
		}
		.test {
			width: 12px;
			height: 12px;
			background-color: red;
			transition: height 2s;
			margin-top: 10px;
			color:white;
			font-size: 12px
		
		}
		.test1 {
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: ease;
			transition-delay: 0.5s;
		}
		.test2 {
			transition-property: width;
			transition-duration: 1s;
			transition-timing-function: linear;
			transition-delay: 0.5s;
		}
		.test3 {
			transition-property: all;
			transition-duration: 1s;
			transition-timing-function: ease-in-out;
			transition-delay: 0.5s;

		}
		.test4 {
			
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: cubic-bezier(0,.67,.87,.06);
			transition-delay: 0.5s;

		}
		.test5 {
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: ease-out;
			transition-delay: 0.5s;
		}
// html
	<div class="runn-area">
		<div class="test1 test"></div>
		<div class="test2 test"></div>
		<div class="test3 test"></div>
		<div class="test4 test"></div>
		<div class="test5 test"></div>
	</div>	

效果如下:

效果.gif

上面我们分别用了不同的transition-property给大家一个不一样的速度感受,能让大家更好的去理解transition-property这个属性。值得我们注意的是:test2元素并没有过渡效果,这里我们发现指定的width,而元素产生的变化确实做的平移变换,所以没有了效果。test3既有平移效果,也有旋转效果,如果想有多种效果的话,用空格做分隔,只要transition-property支持该属性就能被触发。

二、 2d变换基础方法

前面在我们的过渡中用到了一个平移的方法,那么我们肯定不能只满足于平移,肯定还想知道更多平面上的变换动画。

2.1、 2d平面基础中有哪些办法:

关于平面2d变换中 主要有一下几个方法:

  • translate:平移
  • scale: 缩放
  • rotate:旋转
  • skew: 倾斜

2.1、 translate

首先关于关于translate这个方法而言,本身就有两个子方法:

  • translateX 这个方法只有一个参数,表示沿x轴的平移量
  • translateY 这个方法也只有一个参数,表示沿y轴的平移量 而translate是上面两个方法的简写形式,可以接收两个参数,前者是x轴的平移量,后者是沿y轴的平移量。如果只传一个值,缺省值默认为0。具体的代码,前面代码、效果已经展示过了我就不多说了。

2.2、 scale

关于scale来说而言,本身也有两个子方法:

  • scaleX:定义 2D 缩放转换,改变元素的宽度。
  • scaleY:定义 2D 缩放转换,改变元素的高度。 而 scale是上面两个方法的简写形式,可以接收两个参数,分别代表改变元素的宽度和高度。来看下面一个一段代码:
<div class="test"></div>
		body:hover>.test{
			transform: scale(4,4);
		}
		.test{
			width: 100px;
			height: 100px;
			background-color: red;
			transition: transform 2s
		}

效果.gif

2.3、 rotate

rotate主要用来定义 2D 旋转,在参数中规定角度。修改一下上面的代码

		body:hover>.test{
			transform: rotate(360deg)
		}

效果如下:

效果.gif

2.4、 skew

关于skew来说而言,本身也有两个子方法:

  • skewX:定义 2D 倾斜转换,沿着 X 轴。
  • skewY:定义 2D 倾斜转换,沿着 Y 轴。 而 skew是上面两个方法的简写形式,可以接收两个参数,分别代表改变元素的沿着x,y轴的倾斜角度。修改一下上面的代码:
		body:hover>.test{
			transform: skew(60deg,60deg);
		}

效果如下:

效果.gif
这里值得我们的注意的是沿着哪个轴倾斜,就是被倾斜边与坐标轴之间的夹脚的角度。

三、原点位置

我们这里有这样一个需求:就是在我们的旋转操作中,我们不希望从,从元素的中心点开始旋转,这就触发了我们接下来的一个属性:transform-origin。我们还是老样子,修改一下上面的的代码来演示这个属性的作用:

		.test{
			width: 40px;
			height: 40px;
			background-color: red;
			transition: transform 2s;
			transform-origin: 0 0;
		}
		.body:hover>.test{
			transform: rotate(360deg);
			background-color: white;
		}

效果如下:

效果.gif
从上面的效果图我们可以发现,该属性是用来更改一个元素变形的原点。 该元素在平面上可以接收两个值,代表变换的中心点(用x-axis和y-axis来表示),其可选用的格式类型有: x-axis:定义视图被置于 X 轴的何处。可能的值: |left|center|right|length|%|默认值50% y-axis:定义视图被置于 Y 轴的何处。可能的值: |top|center|bottom|length|%|默认值50%

四、 矩阵变换(matrix)

最后我们来说一说矩阵变换吧,这是一个比较复杂的章节。

4.1、 矩阵变换的原理

首先matrix函数接收6个参数,我们就用a,b,c,f,e,f来指代,将这6个参数组合成矩阵如下:

矩阵
其中矩阵变换的原理是:
矩阵变换的原理

x,y表示变换前元素某一点在局部坐标系中的横纵坐标。x',y' 表示变换后的坐标。其转化的公式为:

x' = ax + cy + e
y' = bx + dy + f

通过上面的计算方法我们就能计算出a,b,c,d,c,e,f的值 然后填写进去就行了。

4.1、用矩阵变换实现平移变换

问题:我们想让基点为(10px,10px)的元素平移到(30px,30px)。

这里值得我们注意的点就是:让 a=1,b=0,c=0,d=1的情况下,e,f就相当于translate的两个参数。 经过计算 e=20,f=20。

4.2、用矩阵变换实现缩放变换

问题:我们想让元素的宽度成为原来的2倍,宽是原来的3倍? 同样值得我们注意的是:只要让 b = 0,c = 0,e = 0,f = 0,那么 a,d 就相当于scale()的两个参数 经过计算得到 a=2,d=3

4.2、用矩阵变换实现旋转变换

问题:我们想让元素旋转指定度数怎么做? 我们这里的计算公司相当于:

x' =x*cosθ - y*sinθ
y' =  x*sinθ + y*cosθ

值得注意的一点是旋转度数的时候,直接将a = cosθ,b = sinθ,c = - sinθ ,d = cosθ, e = 0,,f = 0

这里值得我们深度深思的是,旋转360度 如何做呢?

4.2、用矩阵变换实现倾斜变换

这个的计算公式相当于 x’ = x + ytanθx y’ = xtanθy + y

值得注意的一点是旋转度数的时候,直接将a = 1,b = tanθy,c = tanθx,d = 1, e = 0,,f = 0

4.3、总结

总的来说呢,关于矩阵变换的最佳记忆方式可以用下面的方式来记忆: a 水平缩放,b 水平倾斜,c 垂直倾斜,d 垂直缩放,e 水平移动,f 垂直移动

说在最后

关于过渡和2d动画这一块,我觉得应该是每个前端工程师必须熟练使用的东西,怎么说呢?现在的app 要想使用户体验更加的友好 最好的方式就是给界面转换、数据加载加上一个缓冲页面 而不是干巴巴的纯数据展示,这样不仅对用户,而且对自己审美也是一种很好的享受。好了 好了,不多说了,终于写完了,都快12点半了,我先睡觉了