Ionic常用animation动画及使用分析_html/css_WEB-ITnose

ionic动画 引言

在很长的一段时间内，我们使用ionic开发的项目都很少用到动画，使得画面有些生硬。在新版本的ionic中抛弃了animate，需要我们自己去引入这个css文件，其中包含较多的动画效果，这些动画都是使用CSS3的@keyframes进行编写，但是有些在安卓上面会有一些卡顿，在经过一番测试之后，总结以下几个较为常用的动画。

 

动画样式

FadeIn

我们知道，从ionic中的tab页跳转到另一个view的时候是没有动画的，也就是说是直接展示另一个界面而没有任何过渡，这样给人的体验就不是很好，画面过于生硬，这个时候我们就可以使用fadeIn淡入动画，在跳转的时候让跳转页面有一个缓慢载入的动画，这样看起来效果要好很多。

 

使用方法

写在需要展示模块的class里面，这里我们是作用于整个页面，所以写在view的class里面：

 

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中

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

 

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

 

 

 

 

较常用的效果不错并且在安卓机不卡顿的动画效果大概就这些，希望对大家有帮助。

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn