当前位置:Gxlcms > html代码 > Ionic常用animation动画及使用分析_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:23人阅读

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


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

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

人气教程排行