Angular 2 + 折腾记 :(10) 初步了解动画,以及一步一步写个动画效果

前言

过渡动画这东西,在现代开发中是必不可少的,死板和酷炫与之息息相关;

ng2.x动画相关的api是并入@angular/core这个核心模块的,在angular4之后开始独立

但是,写法上差异不大,只是引入变了,引入方式请参考我的这篇文章的: 问题2: 动画已经独立出一个专门的模块


angular2+的过渡动画简介

Angular动画是基于标准的Web动画API(Web Animations API)构建的, 这API比较新,只有较新的浏览器才能支持(具体如下)

Can I Use : Web Animations API

用起来本质上还是css2.1&3,只不过是放在api封装好的对象内,也就是说,css3的基础必须要好!!


过渡动画的相关理论

大体的归纳一下有这么几点

  1. 动画的过渡用于转场之间,转场的状态可以自定义
  2. 默认的转场包括如下(状态样式的生效可以通过传递对应的状态值生效)
    • inactive => active : 待激活到激活
    • void => * : 进场,也可以写成:enter , *是匹配任何动画状态,* => *不会触发转场动画
    • * => void : 离场,也可以写成:leave, void是代表元素还没附加到视图时候的特殊状态

实战

这里拿一个最简单的渐现过渡来演示,如图


渐现代码

import {
  trigger, // 动画封装触发,外部的触发器
  state, // 转场状态控制
  style, // 用来书写基本的样式
  transition, // 用来实现css3的 transition
  animate, // 用来实现css3的animations
  keyframes // 用来实现css3 keyframes的
} from '@angular/animations';


export const fadeIn = trigger('fadeIn', [
  state('in', style({ display: 'none' })), // 默认元素不展开
  transition('void => *', [ // 进场动画
    animate(200, keyframes([
      style({ height: '0', opacity: 0, offset: 0 }), // 元素高度0,元素隐藏(透明度为0),动画帧在0%
      style({ height: '*', opacity: 1, offset: 1 }) // 200ms后高度自适应展开,元素展开(透明度为1),动画帧在100%
    ]))
  ]),
  transition('* => void', [
    animate(200, keyframes([
      style({ height: '*', opacity: 1, offset: 0 }), // 与之对应,让元素从显示到隐藏一个过渡
      style({ height: '0', opacity: 0, offset: 1 })
    ]))
  ]),
]);

如何使用动画?

用法非常简单,在组件内调用即可; 具体有两种;

  1. animations内直接写实现动画,animations接受的是一个数组
  2. 封装好引入 =》 推荐
  • components.ts
// 这是写法2;我是把动画效果独立封装到对应的ts文件内,方便复用
import { fadeIn } from '../../../../../animation/fadeIn';
import { bounceIn } from '../../../../../animation/bounceIn';
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [fadeIn, bounceIn] 
})

// 有人说为什么不直接写在代码内,比如下面这种写法
// 这种写法推荐在独立组件或者模块内,就是给第三方用,组件内部实现一个自己的过渡效果
// 若是对应系统来说,降低耦合度更方便我们维护,也就是我推荐上面那种写法的原因
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [
    trigger('fadeIn', [
      state('in', style({ display: 'none' })), // 默认元素不展开
      transition('void => *', [ // 进场动画
        animate(200, keyframes([
          style({ height: '0', opacity: 0, offset: 0 }), // 元素高度0,元素隐藏(透明度为0),动画帧在0%
          style({ height: '*', opacity: 1, offset: 1 }) // 200ms后高度自适应展开,元素展开(透明度为1),动画帧在100%
        ]))
      ]),
      transition('* => void', [
        animate(200, keyframes([
          style({ height: '*', opacity: 1, offset: 0 }), // 与之对应,让元素从显示到隐藏一个过渡
          style({ height: '0', opacity: 0, offset: 1 })
        ]))
      ]),
    ])]
})
  • html
<!--不传递状态直接调用, 用@符号来引用对应的动画-->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" @fadeIn>暂无相关数据信息!!!</h3>
  </div>


<!--传递状态的,跟常规的绑定一致-->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" [@bounceIn]="list.state">暂无相关数据信息!!!</h3>

总结

  1. 动画应该最大复用化,不然太多动画,虽然效果挺炫的,那打包体积相对也大很多
  2. 对于不支持web-animationsAPI的浏览器,应当引入对应的polyfill来兼容【web-animations】 , 当然兼容也没那么逆天,也仅仅支持较新的浏览器,IE10+

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏姬小光

小鸡君の前端小姜汤【第015期】- 绝对定位

前面我们学过了“表格布局”(回复 007 或 7)的简单栗子,如果大家用心尝试的话,应该已经可以做出一些粗糙的页面了。

8710
来自专栏喵了个咪的博客空间

PhalApi-Image -- 图像处理

#PhalApi-Image -- 图像处理 ? ##前言 因为在工作中遇到了需要按照尺寸压缩上传图片,进过了一番寻找发现ThinkPhP图形处理能够满足大部分...

36270
来自专栏Windows Community

Windows 8.1 应用再出发 - 视图状态的更新

本篇我们来了解一下Windows 8.1 给应用的视图状态带来了哪些变化,以及我们怎么利用这些变化作出更好的界面视图。 首先我们来简单回顾一下Windows 8...

29060
来自专栏编程微刊

6款 jQuery Lightbox图片查看触控插件

偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来。 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www...

55040
来自专栏飞扬的花生

一步一步学习Bootstrap系列--表单布局

前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把...

352100
来自专栏青玉伏案

iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

  在公司做项目一直使用Storyboard,虽然有时会遇到团队合作的Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算的。在之...

22780
来自专栏美丽应用

Simple Control:无需Root为设备添加导航栏

14620
来自专栏云端架构

【云端架构】前端 css print 用法

说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数问题,比如实现只打印网页的某部分内容,调整字体大...

46180
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(六)响应式布局

1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。

14920
来自专栏Google Dart

AngularDart Material Design 弹出框 顶

该组件将自己发布为DropdownHandle,因此其子级可以通过注入来控制其可见性:

20330

扫码关注云+社区

领取腾讯云代金券