文档章节

Ionic常用animation动画及使用分析

Simon_ITer
 Simon_ITer
发布于 2016/01/18 22:14
字数 910
阅读 2734
收藏 3

动画下载地址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;
}

 

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

 

 

 

 

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


© 著作权归作者所有

Simon_ITer
粉丝 73
博文 41
码字总数 27876
作品 0
上海
前端工程师
私信 提问
ionic技术总结-$ionicModal自定义动画效果

.slide-in-right {-webkit-transform: translateX(100%);transform: translateX(100%);}.slide-in-right.ng-enter, .slide-in-right > .ng-enter {-webkit-transition: all cubic-bezier(0.1......

FrostD
2016/02/29
4.8K
0
angular.animation的使用

overview angular-animate.js插件可以对,,,,,,,,,,等指令提供CSS3或者JS动画效果,这些指令分别两个梯队: 梯队一:DOM节点会被remove的梯队:if,view,repeat,include,switch 梯队二:DOM节点...

前端届的科比
2015/11/15
0
1
iOS 动画总结 --IOSAnimationDemo

一、简介 IOS 动画主要是指Core Animation框架。官方使用文档地址为:Core Animation Guide。 CoreAnimation是IOS和OS X平台上负责图形渲染与动画的基础框架。CoreAnimation可以作用与动画视...

匿名
2016/01/19
528
0
5 个可以立刻在你的 Ionic App 中用上的动画包

原文地址:5 Animation Packages You Can Immediately Use Inside Your Ionic App 原文作者:devdactic.com 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:lsvih 校...

lsvih
01/30
0
0
Flutter学习之旅(四)Flutter动画(1)动画基础介绍

转载于:https://blog.csdn.net/qq17470165/article/details/81006513 前言 本篇将介绍Flutter中动画。首先来看下Flutter的动画基础概念和相关类 Animation:Flutter中动画的核心类 Animatio...

飞翔的熊blabla
2018/11/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python猫荐书系列之七:Python入门书籍有哪些?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/ArN-6mLPzPT8Zoq0Na_tsg 最近,猫哥的 Python 技术学习群里进来了几位比较特殊的同学:一...

豌豆花下猫
8分钟前
0
0
一、容器(Containers)

在容器模型中,容器大致类似于VM。他们的主要不同之处在于,每个容器不需要自己完整的操作系统。事实上,所有单个主机上的容器共享整个操作系统。这就释放了大量的系统资源,如CPU、RAM和存储...

倪伟伟
17分钟前
0
0
Guava RateLimiter限流源码解析和实例应用

在开发高并发系统时有三把利器用来保护系统:缓存、降级和限流 缓存 缓存的目的是提升系统访问速度和增大系统处理容量 降级 降级是当服务出现问题或者影响到核心流程时,需要暂时屏蔽掉,待高...

算法之名
20分钟前
0
0
国产达梦数据库与MySQL的区别

背景 由于项目上的需要,把项目实现国产化,把底层的MySQL数据库替换为国产的达梦数据库,花了一周的时间研究了国产的数据库-达梦数据库,它和MySQL有一定的区别,SQL的写法也有一些区别。 ...

TSMYK
30分钟前
0
0
老也有错?35岁程序员是一道坎,横亘在每个技术职场人的心中

随着互联网的高速发展变革,大龄恐惧症越来越多地在技术圈被人讨论。很多程序员在工作5-10年以后,都会开始思考5年、10年甚至更久以后的自己,会是怎样一种生活工作状态,以及是否会被时代抛...

我最喜欢三大框架
36分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部