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;
}

 

这样便可实现列表的淡入展现效果。

 

 

 

 

较经常使用的效果不错而且在安卓机不卡顿的动画效果大概就这些，但愿对你们有帮助。