動畫(過渡動畫 關鍵幀動畫)

2021-07-24 19:40:51 字數 596 閱讀 3955

過渡動畫

寫到css樣式裡

transition

: all  1s

ease-in-out  2s

; 變化曲線的值

ease:預設值,先快再快再慢

ease-in:淡入(動畫剛開始的時候變化慢)

ease-out:淡出(動畫快結束的時候變化慢)

ease-in-out:淡入淡出(開始慢,中間塊,結束慢)

linear:線性(勻速變化)

過渡動畫當失去觸發時機,會恢復到原來的狀態

觸發過渡動畫的時機:

* 1,hover(最常用)

* 2,focus當輸入框獲得焦點時

* 3,checked(選框被選中時)

* 4,媒介查詢

* 5,js

關鍵幀動畫

動畫效果

animation:name 5s ;

由@keyframes決定

1,@keyframes必須寫在css樣式裡面

2,@keyframes中的動畫名要和animation-name的名字一樣

@keyframes 動畫名

百分比 to

}

關鍵幀動畫CAKeyframeAnimation

介紹關鍵幀動畫之前先介紹一下什麼是補間動畫 補間動畫 兩個值發生改變,中間產生的動畫效果叫做部件動畫 關鍵幀動畫與基礎動畫的區別 基礎動畫只能是某個屬性的初始值到另乙個值產生的動畫效果 關鍵幀動畫支援多個值 values 或者乙個路徑 path 關鍵幀動畫的屬性 cakeyframeanimatio...

WPF中的動畫 (五)關鍵幀動畫

與 from to by 動畫類似,關鍵幀動畫以也可以以動畫形式顯示目標屬性值。和from to by 動畫不同的是,from to by 動畫只能控制在兩個狀態之間變化,而關鍵幀動畫則可以在多個狀態之間變化,例如,對於前面那個改變按鈕寬度的例子,如果我們要實現如下效果 雖然我們可以用三個from ...

iOS開發之關鍵幀動畫

cabasicanimation揭示了大多數隱式動畫背後以來的機制,但是顯示的給圖層新增cabasicanimation相較於隱式動畫而言,之恩能夠說是非禮不討好。cakeyframeanimation是一種uikit沒有暴露出來但是功能強大的類。和cabasicanimation類似,cakeyf...