首页 > 其他分享 >无涯教程-Angular7 - 动画效果

无涯教程-Angular7 - 动画效果

时间:2023-12-08 18:32:02浏览次数:38  
标签:动画 smaller app 无涯 Angular7 state import angular

Animations在html元素之间增加了很多交互,Angular 2可以使用动画,从Angular 4开始,动画不再是@angular/core库的一部分,而是一个单独的程序包,需要将其导入app.module.ts中。

首先,我们需要使用下面的代码行导入库-

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

需要将 BrowserAnimationsModule 添加到 app.module.ts 中的导入数组,如下所示-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

在 app.component.html 中,我们添加了要进行动画处理的html元素。

<div> 
   <button (click)="animate()">Click Me</button> 
   <div [@myanimation]="state" class="rotate"> 
      <img src="assets/images/img.png" width="100" height="100">
   </div> 
</div>

对于主div,我们添加了一个按钮和一个带有图片的div,有一个click事件,将为其调用animate函数,对于div,将添加@myanimation指令并将其值指定为state。

现在让我们看一下定义动画的 app.component.ts 。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div {
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate {
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})
export class AppComponent {
   state: string="smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

我们必须导入要在.ts文件中使用的动画函数,如上所示。

import { trigger, state, style, transition, animate } from '@angular/animations';

在这里,我们从@angular/animations导入了trigger,state,style,transition和animate。

现在,我们将把animations属性添加到@Component()装饰器中-

animations: [ 
   trigger('myanimation',[
      state('smaller',style({ 
         transform : 'translateY(100px)' })), 
      state('larger',style({
         transform : 'translateY(0px)' })), 
         transition('smaller <=> larger',animate('300ms ease-in')) 
   ]) 
]

触发器定义动画的开始。它的第一个参数是要赋予动画标签的html标签的动画名称。第二个参数是我们导入的函数-状态(state),转换(transition)等。

状态函数涉及动画步骤,元素将在其中进行转换。现在,我们定义了两个状态,smaller和larger。对于smaller的状态,我们给出了 transform:translateY(100px)和 transform:translateY(100px)样式。

现在让我们看一下.html文件,看看过渡动画如何工作-

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation]="state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

@component指令中添加了一个样式属性,该属性使div居中对齐。

styles:[` 
   div{  
      margin: 0 auto; 
      text-align: center; 
      width:200px; 
   } 
   .rotate{ 
      width:100px; 
      height:100px; 
      border:solid 1px red;
   } 
`],

在这里,使用特殊字符[``]将样式添加到html元素(如果有)。对于div,我们给了 app.component.ts 文件中定义的动画名称。

单击按钮后,它将调用动画函数,该函数在 app.component.ts 文件中定义如下:

export class AppComponent {
   state: string="smaller"; 
   animate() { 
      this.state=this.state == ‘larger'? 'smaller' : 'larger'; 
   } 
}

定义了状态变量,并给其默认值较小(smaller)。动画函数会更改点击状态。如果状态较大,它将转换为较小状态。如果较小,它将转换为较大的。

这就是浏览器(http://localhost:4200 /)中的输出看起来像-

Click Me

单击 Click Me 按钮后,图像的位置将更改,如以下屏幕截图所示-

Click Me Position

变换函数沿y方向应用,当我们单击"Click Me"按钮时,该函数从0变为100px。图像存储在 assets/images 文件夹中。

参考链接

https://www.learnfk.com/angular7/angular7-animations.html

标签:动画,smaller,app,无涯,Angular7,state,import,angular
From: https://blog.51cto.com/u_14033984/8741246

相关文章

  • 在vue3中使用openlayers3实现track轨迹动画
    网上太多资料代码,抄来抄去,而且版本也是OL2的,部分API已经弃用基础知识不多说,直接讲重点三个关键变量//记录开始动画的时间conststartTime=ref(0);//轨迹分割的颗粒度,数值越小分的越细constparticle=20;//轨迹动画的速度,数值越大位移越快constspeed=10;根......
  • 无涯教程-Angular7 - Http Client
    HttpClient将帮助我们提供POST,GET相关方法,使用时需要导入http模块。我们需要将模块导入app.module.ts中,如下所示-import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppRoutingModule,RoutingComponent}from......
  • 用html+css+js做canvas烟花模拟网页动画代码
    圣诞节、元旦就要到了,本案例我们将用html+css+js做canvas烟花模拟网页动画代码,程序员的浪漫这不就来了嘛,与家人朋友一起看烟花吧!   附源码<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"/> <title>烟花模拟器</title> <metaname="viewport"......
  • 无涯教程-Angular7 - 路由(Routing)
    路由(Routing)基本上意味着在页面之间导航,现在让我们创建一个组件,看看如何在其上使用路由。如下所示-app.module.tsimport{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppRoutingModule}from'./app-routin......
  • 无涯教程-Angular7 - 事件绑定
    在本章中,无涯教程将讨论事件绑定在Angular7中的工作方式,当用户以键盘移动,鼠标单击或鼠标悬停的形式与应用程序交互时,它将生成一个事件。需要处理这些事件以执行某种操作,让无涯教程考虑一个示例以更好地理解这一点。app.component.html<!--Thecontentbelowisonlyaplace......
  • 无涯教程-Angular7 - 简介
    Angular7是一个开放源代码JavaScript框架,用于在JavaScript, html 和Typescript(JavaScript的超集)中构建Web应用程序和应用程序。Angular为animation,httpservice和materials提供了内置功能,这些功能又具有auto-complete,naigation,toolbar,menus等功能。代码以Typescript编写......
  • 十套充满逼格的css动画交互设计!UI看了都自愧不如
    大家好,欢迎来到程序视点!对于网页设计师和开发工程师而言,创建一款极具趣味性和实用性的CSS网页动画,能让网站美观不少!CSS动画,就是通过CSS代码搭建网页动画。允许设计师和开发人员,通过编辑网站的CSS代码来添加页面动画,轻松提高网站兼容性的同时,提升网页加载速度。今天就带来了十......
  • 无涯教程-Erlang - is_alive函数
    如果本地节点处于活动状态并且可以是分布式系统的一部分,则返回true。否则,它返回false。is_alive-语法is_alive()is_alive-返回值如果本地节点处于活动状态并且可以是分布式系统的一部分,则返回true。否则,它返回false。-module(helloLearnfk).-export([start/0]).sta......
  • 无涯教程-Erlang - spawn函数
    这用于创建新进程并对其进行初始化。spawn-语法spawn(Function)Function - 需要产生的功能。spawn-返回值此方法返回一个进程ID。-module(helloLearnfk).-export([start/0]).start()->spawn(fun()->server("Hello")end).server(Message)->io:f......
  • 无涯教程-Erlang - unregister函数
    这用于注销系统中的进程。unregister-语法unregister(atom)atom-这是要赋予该过程的注册名称。unregister-示例-module(helloLearnfk).-export([start/0,call/2]).call(Arg1,Arg2)->io:fwrite("~p~n",[Arg1]).start()->Pid=spawn(?MODULE,cal......