css3+html5 實現變形與動畫教程

本文是我們詳細介紹一下 css3+html5實現動畫的原理及實例的圖解教程,css3制作動畫的幾個屬性:變形(transform),過渡(transition)和動畫(animation)等。

transform變形。

transform英文意思:改變,變形。

css3中transform注意包括以下幾種:旋轉(rotate),扭曲(skew),縮放(scale)、移動(translate)和矩陣變形matrix。

語法:

transform : none | [ ]*

transform: rotate | scale | skew | translate |matrix;

none就是默認值,不進行變形。

:表示一個或多個變換函數,以空格分開。即可同時對一個元素進行transform的多種屬性操作,例如同時用rotate,scale和translate三種。

rotate( [ ])

skewX()

skewY()

scale( [])

translate( [])

matrix( )

一、旋轉rotate

rotate() :通過指定的角度參數對元素指定一個2D rotation(2D旋轉),需先有transform-origin屬性的定義。

transform-origin定義的是旋轉的基點,其中angle是指選擇角度,正順時針旋轉,負逆時針旋轉。


css3+html5 實現變形與動畫教程

二、translate平移

translate()函數可以把元素從原來的位置移動,而不影響在x,y軸上的任何web組件,類似于position:relative。

translate()分三種情況:

1、translate(x,y)水平和垂直方向同時移動。

Note:translate移動的基點默認爲元素中心點,可以根據transform-origin改變基點。

如果第二個值沒設置,默認爲0。


css3+html5 實現變形與動畫教程

2、translateX(x)僅水平方向移動。

相當于translate(x,0,)的簡寫,基點爲元素中心點。


css3+html5 實現變形與動畫教程

3、translateY(y)僅垂直方向移動。

相當于translate(0,y)的簡寫,基點爲元素在中心。


css3+html5 實現變形與動畫教程

三、scale縮放

scale縮放和translate移動非常相似,也有三種情況。

縮放中心點:即元素的中心位置

基數:縮放就是既可以縮小,也可以放大;縮放基數爲1,大于1放大,小于1縮小。

1、scale(x,y)元素在水平和垂直方向同時縮放。

Note:第二個參數未提供則取與第一個一樣的值。


css3+html5 實現變形與動畫教程

2、scaleX(x)x軸縮放。


css3+html5 實現變形與動畫教程

3、scaleY(y)y軸縮放。


css3+html5 實現變形與動畫教程

scale可以取負值,負值會讓元素翻轉並縮放。


css3+html5 實現變形與動畫教程


css3+html5 實現變形與動畫教程

Scale(-1.5)


css3+html5 實現變形與動畫教程


四、skew切變

skew和translate、scale一樣有三種情況。

1、skew(x,y):x軸和y軸上的skew transformation(斜切變換)。

即x軸和y軸同時按照一定的角度值進行扭曲變形。

如果第二個參數未提供,則值爲0,也就是y軸無斜切。


2、 skewX(x):按給定角度沿x軸指定一個skew transformation(斜切變換)。


3、skewY(y):按給定的角度沿Y軸指定一個skew transformation(斜切變換)。


五、矩陣matrix

matrix(, , , , , ):以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換,相當于直接應用一個[a,b,c,d,e,f]變換矩陣。就是基于水平方向和垂直方向重新定位元素。

SVG,css3,html5的canvas中都有矩陣變換,接下來簡單說說。

一個元素渲染後就可以得到一張位圖,然後對這個位圖上每一點進行變換,就可以得到新的一張位圖,從而産生平移,縮放,旋轉,切變及鏡像反射燈效果。

1、幾個概念

矩陣乘法中,首先要確認兩個矩陣是否可以相乘:只有第一個矩陣的列數等于第二個矩陣的行數,這樣的兩個矩陣才能相乘。

左乘【前乘】:即乘在左邊,A左乘E即AE。

一個m*n的矩陣左乘一個n*p的矩陣,將得到一個m*p的矩陣。

2D矩陣變換都提供6個參數a,b,c,d,e,f,基本公式爲:


其中,x和y是元素最開始的坐標,x'和y'是矩陣變換後得到的新坐標。

Note:變換矩陣中a,b,c,d,e,f6個參數是豎著排的。

x'=ax+cy+e

y'=bx+dy+f

2、矩陣變換和transform的關系

a、矩陣和translate平移

x'=ax+ cy+e,我們設a=1,c=0,則x'=x+e,

y'=bx+dy+f,同樣設b=0,d=1,則y'=y+f。

這就是translate(e,f)了。

所以說translate(e,f)就是簡化了的變換矩陣matrix(1,0,0,1,e,f),

(x,y)平移(tx,ty),就意味著做了一個【1 0 0 1 tx,ty】的矩陣變換。

b、矩陣和scale縮放

x'=ax+cy+e,我們設c=0,e=0,則x'=ax,

y'=bx+dy+f,我們設b=0,f=0,則y'=dy。

這就是scale(a,d)了。

所以說scale(a,d)就是簡化了的變換矩陣matrix(a,0,0,d,0,0)。

(x,y)縮放(sx,sy),就意味著做了一個【sx 0 0 sy 0 0】的矩陣變換。

c、矩陣和rotate旋轉

rotate(a deg)等價于【cons(a) sin(a) -sin(a) cons(a) 0 0】矩陣變換。

d、矩陣和skew切變

skewX(a deg)等價于【1 0 tan(a) 1 0 0】的矩陣變換。

skewY(a deg)等價于【1 tan(a) 0 1 0 0】的矩陣變換。

所以說Matrix就是將所有的2D效果全部組合在了一起使用。

六、transform-origin

前面說了,元素默認的基點是其中心位置,可用transform-origin改變其基點。

使用:

transform-origin(x,y):用來設置元素的基點(參考點)。默認點是元素的中心點。x,y的值可以是百分比,em,px,其中x也可以是left,center,right,y可以是top,center,bottom,這點和background-position一樣。



例子

先通過一個例子感性認識一下transition的動畫效果。

滑鼠放上去,div寬度從100px增大到200px。

<style type="text/css">
  div{
    width: 100px;
    height: 100px;
    background-color: red;
  }
  div:hover{
    width: 200px;
  }
</style>
<div></div>

這效果其實也算是動畫,但是非常變化非常快,不平滑。

如果想讓滑鼠放上去後div寬度在5s內平滑過渡到200px。只需要加一行代碼;

div:hover{
width: 200px;
transition:width 5s ease-in;
}

這裏用到的就是transition屬性,它就是用來實現屬性值平滑過渡,視覺上産生動畫效果。

上面用的transition是縮寫,包含四個屬性:transition-property,transition-duration,transition-timing-function,transition-delay,下面會一一介紹。


transition

css3新增transition屬性,可以在事件觸發元素的樣式變化時,讓效果更加細膩平滑。

transition用來描述如何讓css屬性值在一段時間內平滑的從一個值過渡到另一個值。這種過渡效果可以在滑鼠點擊、獲得焦點、被點擊或對元素任何改變中觸發。

語法:

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition有四個屬性值:

transition-property:執行過渡的屬性。

transition-duration:指定完成過渡需要的時間。

transition-timing-function,在延續時間段,過渡變換的速率變化,簡單理解就是指定過渡函數。

transition-delay:過渡延遲時間。

1、transition-property

transition-property用來指定哪個屬性使用過渡動畫效果。

語法:

transition-property : none | all | [ ] [ ',' ]*

none:所有屬性都不應用過渡效果。

all:默認值。當值爲all時,元素産生任何屬性值變化時都將執行transition效果。

ident:元素屬性名。通過ident指定具體哪些屬性。如果指定的多個屬性中有某個屬性不能應用過渡效果,其他屬性還是生效的。

過渡屬性只有具備一個中點值的屬性(需要産生動畫的屬性)才能具備過渡效果。在w3c中列出了所有可以實現transition效果的css屬性值以及值的類型,點這裏查看。


Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer

Note:並不是什麽屬性改變都會觸發transiton動畫效果,比如頁面的自適應寬度,當浏覽器改變寬度時,並不會觸發transition的效果。但上述表格所示的屬性類型改變都會觸發一個transition動作效果。

舉例:可以同時給幾個屬性設置動畫效果,比如給height和line-height同時設置動畫效果,實現div變高文字仍然垂直居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>變形與動畫</title>
  <style type="text/css">
div {
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background-color: orange;
  margin: 20px auto;
  -webkit-transition-property: height line-height;
  transition-property: height line-height;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  height: 100px;
  line-height: 100px;
}
</style>
</head>
<body>
  <div>文字垂直居中</div>
</body>
</html>


2、transition-duration

transition-duration用來設置從舊屬性過渡到新屬性需要的時間,即持續時間。

3、transition-timing-function

語法:

= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(, , , )

transition-timing-function屬性指的是過渡的“緩動函數”。通過這個函數會建立一條加速度曲線,因此在整個transition變化過程中,變化速度可以不斷改變。主要包括以下幾種函數。

ease:默認值,元素樣式從初始狀態過渡到終止狀態速度由快到慢,逐漸變慢。

linear:意思是線性過渡,即過渡過程恒速。

ease-in:速度越來越快,呈現加速狀態,通常稱爲“漸顯效果”。

ease-out:速度越來越慢,呈現減速狀態,通常稱爲“漸隱效果”。

ease-in-out速度先加速後減速,稱爲“漸顯漸隱效果”。

舉例:滑鼠經過問號,幫助信息漸顯漸隱。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>transition-demo by starof</title>
  <style>
#help{
  width:20px;
  height:20px;
  border-radius:10px;
  color:#fff;
  background:#000;
  text-align:center;
  position:relative;
  margin:50px 20px;
  cursor:pointer;
}
#help .tips{
  position:absolute;
  width:300px;
  height:100px;
  background:#000;
  top:-30px;
  left:35px;
  border-radius:10px;
  opacity:0;
  /*漸隱效果*/
  transition: opacity .8s ease-in-out;
  -moz-transition: opacity .8s ease-in-out;
  -webkit-transition: opacity .8s ease-in-out;
}
.tips:before{
  content:"";
  border-width:10px;
  border-style:solid;
  border-color:transparent #000 transparent transparent;
  position:absolute;
  left:-20px;
  top:30px;
}
#help:hover .tips{
  opacity:0.5;
  /*漸顯效果*/
  transition: opacity .8s ease-in-out;
  -moz-transition: opacity .8s ease-in-out;
  -webkit-transition: opacity .8s ease-in-out;
}
</style>
</head>
<body>
  <div id="help">
    ?
    <div class="tips">幫助信息</div>
  </div>
</body>
</html>



4、transition-delay

transition-delay設置改變屬性值後多長時間開始執行動畫。

5、屬性簡寫

在改變多個css屬性的transition效果時,把幾個transition聲明用逗號隔開,然後每個屬性就都有各自的過渡時間和效果。

Note:第一個時間是時長,第二個是延時。

a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

貝塞爾曲線和transition

transition的數學模型就是貝塞爾曲線,下面介紹。

曲線其實就是兩點之間插值的效果,貝塞爾曲線是一種插值算法,比線性插值複雜一點。

貝塞爾曲線:起始點,終止點(也稱錨點),控制點。通過調整控制點,貝塞爾曲線的形狀發生變化。

k階貝塞爾插值算法需要k+1個控制點。

一階貝塞爾曲線(線段):意思就是從P0到P1的連續點,用來描述一段線段。一次貝塞爾插值就是線性插值。



二階貝塞爾曲線(抛物線):P0-P1是曲線在P0處的切線。



三階貝塞爾曲線:



transition用到的就是三階貝塞爾插值算法,如下圖。

時間在0,1區間,待變換屬性也認爲是0,1區間。P0和P3的坐標一直是(0,0)和(1,1)。transition-timing-function屬性用來確定P1和P2的坐標。


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]

step-start steps(1,start)

step-end steps(1,end)

cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]

四、其他相關資料

canvas畫貝塞爾曲線:查看來源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>bezier demo</title>
</head>
<body>
<div style="width:800px;height:600px;background-color:#fac0c0;">
<canvas id="cvs" width="800" height="600">騷瑞,您的浏覽器不支持canvas</canvas>
</div>
<script type="text/javascript">
var cvs=document.getElementById("cvs"),
context=cvs.getContext("2d"),
points=[];
function getXY(node){
var x=0,
y=0;
if (node.offsetParent) {
while (node.offsetParent) {
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
}
else {
node.x && (x += node.x);
node.y && (y += node.y);
}
return [x,y];
}
function drawPoint(x,y,c,b) {
!b && (b=2);
context.fillStyle=c || "red";
context.fillRect(x,y,b,b);
}
function bezier(points,t){
var i,
n=points.length-1,
x=0,
y=0;
function fn(p,n,i,t){
return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i);
}
for(i=0;i<n+1;i++){
x+=fn(points[i][0],n,i,t);
y+=fn(points[i][1],n,i,t);
}
return [x,y];
}
function factorial(n){
if(isNaN(n) || n<=0 || Math.floor(n)!==n){
return 1;
}
var s=1;
while(n){
s*=n--;
}
return s;
}
function arrangement(n,r){
return factorial(n)/(factorial(r)*factorial(n-r));
}
cvs.addEventListener("click",function(event){
var i,
point=getXY(this),
x=event.clientX-point[0]+(document.documentElement.scrollLeft || document.body.scrollLeft),
y=event.clientY-point[1]+(document.documentElement.scrollTop || document.body.scrollTop);
points.push([x,y]);
context.clearRect(0,0,screen.width,screen.height);
context.beginPath();
//points
for(i=0;i<points.length;i++){
drawPoint(points[i][0],points[i][1],"blue",4);
}
//bezier
for (i = 0; i < 1; i += 0.001) {
drawPoint.apply(this, bezier(points,i));
}
//line
if(points.length==1){
context.moveTo(points[0][0],points[0][1]);
}else if (points.length>1){
for(i=0;i<points.length;i++){
context.lineTo(points[i][0],points[i][1]);
}
context.lineWidth=0.2;
context.stroke();
context.closePath();
}
},true);
</script>
</body>
</html>




更多相關文章
  • rsync是一款同步軟件本人只要windows系統中使用過,它沒能實現及時自動同步了,我們一般是結合windows計劃任務來進行定時同步數據,但如果你在linux中利用lsyncd+rsync就能實現自動的及時文件同步了,下面我們一起來看具體配置方法一.rsync是類unix系統下的數據鏡像備份工具
  • css3實現的switch滑動開關按鈕的效果
    開關按鈕效果現在的智能手機都是這種做法了,我們現在的css3也具備這種功能了,下面我們就一
  • python實現手機APP自動簽到
    現在的app在應用已經到達了頂峰狀態了,一個小小的企業網站有時也要做一個app了,下文我們
  • 本文我們來講講在iOS開發中比較常用的特效無限滾動,這個滾動是使用UIScrollView組件實現,本文提供了三個實例分析,還有實現原理.實例一 iOS開發中UIScrollView支持無限滾動默認的UIScrollView滑動到底之後(假設往右),就無法繼續往右滑了,但爲了更好的用戶體驗,我們繼續
  • Android使用BitmapShader圖形渲染實現圓形、圓角和橢圓自定義圖片View
    圓角圖片在Android開發中比較常用,現在我們來介紹在Android如何實現圓形.圓角和橢圓自定義圖片View,這時主要是使用BitmapShader圖形渲染.一.概述Android實現圓角矩形,圓形或者橢圓等圖形,一般主要是個自定義View加上使用Xfermode實現的.實現圓角圖片的方法其實不 ...
  • 下面來看一個關于解決jQuery/CSS3 transition與動畫沖突的文章,如果各位有碰到過可以看看本文是如何解決的吧.作爲一個逗比,昨天在設置了transition之後想要click事件添加動畫,結果fadeIn/fadeOut發現沒有用啊……太奇怪了.結果其實是因爲,fadeIn/fade ...
  • jQuery circliful插件實現圓形統計圖百分比
    circliful插件是一個基于jquery一個不錯的圓形統計圖(百分比)的插件了,我們如果要做到數據走向我們就可以使用circliful插件來實現了,下面一起來看一個例子.今天我給大家介紹一款圓形統計圖circliful,它基于HTML5的畫布和jQuery,無需使用圖像輕松實現圓形統計圖,而且有
  • Shadowsocks + ChnRoute 實現 OpenWRT 路由器自動翻牆配置
    翻牆對于想看看外面的世界的朋友都希望來翻牆了,下面我們介紹一篇Shadowsocks + ChnRoute 實現 OpenWRT 路由器自動翻牆的配置教程這篇文章介紹的方法基于aa65535的shadowsocks-spec for openwrt,介紹了如何在OpenWRT下配置自動翻牆,新版本支
一周排行