Ionic經常使用animation動畫及使用分析

動畫下載地址http://pan.baidu.com/s/1ntFjwAt

引言

在很長的一段時間內，咱們使用ionic開發的項目都不多用到動畫，使得畫面有些生硬。在新版本的ionic中拋棄了animate，須要咱們本身去引入這個css文件，其中包含較多的動畫效果，這些動畫都是使用CSS3的@keyframes進行編寫，可是有些在安卓上面會有一些卡頓，在通過一番測試以後，總結如下幾個較爲經常使用的動畫。

 

動畫樣式

FadeIn

咱們知道，從ionic中的tab頁跳轉到另外一個view的時候是沒有動畫的，也就是說是直接展現另外一個界面而沒有任何過渡，這樣給人的體驗就不是很好，畫面過於生硬，這個時候咱們就可使用fadeIn淡入動畫，在跳轉的時候讓跳轉頁面有一個緩慢載入的動畫，這樣看起來效果要好不少。

 

使用方法

寫在須要展現模塊的class裏面，這裏咱們是做用於整個頁面，因此寫在view的class裏面：

<ion-view view-title="員工信息" class="animated fadeIn contact">

 

CSS代碼：

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
 
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

 

Bounce

這個動畫能夠分爲多種彈跳樣式，如bounceInUp(從上彈出)、bounceInDown(從下彈出) 、bounceInLeft(從左彈出) 、bounceInRight(從右彈出)等

 

對不一樣的div模塊設置不一樣的彈出效果就能夠實現從四面八方包圍的效果，如華潤水泥的主頁動畫

 

在諾亞財富項目中也使用了這個動畫，是在整個模塊的div上使用了bounceInUp動畫，只要頁面加載，即只要你看到這個頁面，無論是否有緩存，動畫都會執行。

 

使用方法

使用方法和上面同樣，都是加在class中

<div class="main animated bounceInUp">

 

CSS代碼（這裏只貼出bounceInUp，具體看animate.css）

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
 
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
 
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
 
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
 
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
 
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
 
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
 
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
 
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
 
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
 
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
 
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
 
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

 

 

列表加載淡入動畫

這個沒有具體的css樣式，須要本身寫css，先來看一下效果：

能夠看到最後一條數據尚未加載出來，這裏的效果就是列表數據開始加載時，從第一條數據開始慢慢向下加載，一條一條的淡入動畫。

 

 

使用方法

 

由於是列表，因此通常使用ng-repeat或者collection-repeat來展現數據，那麼就在repeat的div上面加上一個自定義class，如：own-list-animation，接着對這個class進行css樣式的封裝：

 

.own-list-animation.ng-enter {
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn .5s;
}
 
.own-list-animation.ng-enter-stagger {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
  /* override to make sure it's not inherited from other styles */
  -webkit-animation-duration: 0;
  animation-duration: 0;
}

 

這樣便可實現列表的淡入展現效果。

 

 

 

 

較經常使用的效果不錯而且在安卓機不卡頓的動畫效果大概就這些，但願對你們有幫助。