Angular练习之animations动画

发布时间:2019-07-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular练习之animations动画脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

返回目录

前言

文章基于Angular的练手项目。文章目录

本文实现效果

Angular 动画

让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器(animation triggers)来定义一系列状态和变换属性。我们也可以用CSS样式来改写实现我们想要的效果
主要的原则是开始和结尾的动画样式由我们自定义,中间变换的计算过程交给工具本身
当然,可以通过设置时间来设置中间动画,比如1s,1.2s,200ms。其他的就是大家熟悉的CSS动画的速度属性比如ease、liner和ease-in-out。
而Angular 4.2以上的版本里我们可以用顺序(sequence)和组合(group)来让动画一个接一个执行还是同时执行;查询(query)可以操作子元素而交错(stagger)可以创造一个很棒的连锁效果。
这些事件将触发一个动画:
或者从视图里装载或者卸载一个元素
改变已绑定触发器的状态 比如:[@routerTransITion]="home"
在路由转换的前后关系中,要注意,组件正在被移除并作为导航的一部分被添加到视图中的过程。

练习开始

创建了新模块或组件包含视图,需要注入到主模块和添加路由。这里就不介绍了,主要练习动画。

引入动画模块

在主模块AppModule.ts文件中引入运动的模块browserAnimationsModule,

import {BrowserAnimationsModule} From '@angular/platform-browser/animations';
  imports: [
    BrowserModule,
    RouterModule,
    BrowserAnimationsModule
  ],

创建自己动画模块

练习使用angular的动画模块,我们单独创建一个模块练习。

ng g module my-animations

创建例子1组件

ng g component my-animations/exp1

定义动画样式

在my-animations模块中添加animations.ts文件,并写入动画样式。这个文件里定义的动画便是核心内容。需要有一定的css动画基础才能写出漂亮的动画效果。

/**定义动画的ts文件**/
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

// 定义一个鼠标点击运动的动画box样式的元素会向左向右移动。
export const boxAnimate = trigger('box', [
  // 定义一个状态left
  state('left', style({ transform: 'translate3d(0,0,0)' })),
  // 定义另外一个状态right
  state('right', style({ transform: 'translate3d(200%,0,0)' })),
  // 定义运动过程(从left到right状态)
  transition('left=>right', animate(@H_777_141@2000, keyframes([
    style({ transform: 'translate3d(300%,0,0)' })
  ]))),
  // 定义运动过程(从right到left)
  transition('right=>left', animate(1000, keyframes([
    style({ transform: 'translate3d(-100%,0,0)' }),
  ]))),
]);

创建动画载体

在exp1.COMponent.htML文件中添加元素

<h1>动画实例1</h1>
<div style="height: 100px;width: 100px;background-color: black" (click)="start()" [@box]="boxState"></div>

修改exp1.component.ts文件如下

import { Component, OnInit } from '@angular/core';
import {boxAnimate} from "../animations"
@Component({
  selector: 'app-exp1',
  templateUrl: './exp1.component.html',
  animations: [
    boxAnimate
  ]
})
export class Exp1Component implements OnInit {

  // 定义开始的状态
  PRivate boxState: String = 'left';
  private _isTrue: Boolean = true;
  constructor() { }

  ngOnInit() {
  }
  start(): void {
    console.LOG('开始运动');
    if (this._isTrue) {
      this.boxState = 'right';
    } else {
      this.boxState = 'left';
    }
    this._isTrue = !this._isTrue;
  }

}

查看效果

总结

实现一个动画效果大致分为下面几步

  • 引入BrowserAnimationsModule
  • 创建动画效果。即一个trigger实例
  • 使用

动画效果的核心是一个trigger实例,可以参考官方api来使用不过都是外文,看起来真费劲。不过通过以上例子大致我们也能明白动画实现的机制。

  • 动画载体的[@box]绑定的状态发生变化时,触发我们定义的动画行为。

https://github.com/yiershan/A...

脚本宝典总结

以上是脚本宝典为你收集整理的Angular练习之animations动画全部内容,希望文章能够帮你解决Angular练习之animations动画所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。