大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

angular状态和动画是什么

本篇内容主要讲解“angular状态和动画是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“angular状态和动画是什么”吧!

创新互联建站企业建站,10多年网站建设经验,专注于网站建设技术,精于网页设计,有多年建站和网站代运营经验,设计师为客户打造网络企业风格,提供周到的建站售前咨询和贴心的售后服务。对于网站制作、成都网站设计中不同领域进行深入了解和探索,创新互联在网站建设中充分了解客户行业的需求,以灵动的思维在网页中充分展现,通过对客户行业精准市场调研,为客户提供的解决方案。

状态

1、什么是状态

状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。

angular状态和动画是什么

2、状态的种类

在 Angular 中,有三种类型的状态,分别为:void*custom
angular状态和动画是什么
void:当元素在内存中创建好但尚未被添加到 DOM 中或将元素从 DOM 中删除时会发生此状态 

*:元素被插入到 DOM 树之后的状态,或者是已经在DOM树中的元素的状态,也叫默认状态

custom:自定义状态,元素默认就在页面之中,从一个状态运动到另一个状态,比如面板的折叠和展开。

3、进出场动画

进场动画是指元素被创建后以动画的形式出现在用户面前,进场动画的状态用 void => * 表示,别名为 :enter

angular状态和动画是什么
出场动画是指元素在被删除前执行的一段告别动画,出场动画的状态用 * => void,别名为 :leave

angular状态和动画是什么

快速上手

1、在使用动画功能之前,需要引入动画模块,即 BrowserAnimationsModule

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

@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule {}

2、默认代码解析,todo 之删除任务和添加任务



  

Todos

          
              {{ item }}        
import { Component } from "@angular/core"

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: []
})
export class AppComponent {
  // todo 列表
  todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
	// 添加 todo
  addItem(input: HTMLInputElement) {
    this.todos.push(input.value)
    input.value = ""
  }
	// 删除 todo
  removeItem(index: number) {
    this.todos.splice(index, 1)
  }
}

3、创建动画

@Component({
  animations: [
    // 创建动画, 动画名称为 slide
    trigger("slide", [
      // 指定入场动画 注意: 字符串两边不能有空格, 箭头两边可以有也可以没有空格
      // void => * 可以替换为 :enter
      transition("void => *", [
        // 指定元素未入场前的样式
        style({ opacity: 0, transform: "translateY(40px)" }),
        // 指定元素入场后的样式及运动参数
        animate(250, style({ opacity: 1, transform: "translateY(0)" }))
      ]),
      // 指定出场动画
      // * => void 可以替换为 :leave
      transition("* => void", [
        // 指定元素出场后的样式和运动参数
        animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
      ])
    ])
  ]
})

注意:入场动画中可以不指定元素的默认状态,Angular 会将 void 状态清空作为默认状态

trigger("slide", [
  transition(":enter", [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate(250)
  ]),
  transition(":leave", [
 		animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
  ])
])

注意:要设置动画的运动参数,需要将 animate 方法的一个参数更改为字符串类型

// 动画执行总时间 延迟时间 (可选) 运动形式 (可选)
animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))

关键帧动画

关键帧动画使用 keyframes 方法定义

transition(":leave", [
  animate(
    600,
    keyframes([
      style({ offset: 0.3, transform: "translateX(-80px)" }),
      style({ offset: 1, transform: "translateX(100%)" })
    ])
  )
])

动画回调

Angular 提供了和动画相关的两个回调函数,分别为动画开始执行时和动画执行完成后

import { AnimationEvent } from "@angular/animations"

start(event: AnimationEvent) {
  console.log(event)
}
done(event: AnimationEvent) {
  console.log(event)
}

创建可重用动画

1、将动画的定义放置在单独的文件中,方便多组件调用。

import { animate, keyframes, style, transition, trigger } from "@angular/animations"

export const slide = trigger("slide", [
  transition(":enter", [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate(250)
  ]),
  transition(":leave", [
    animate(
      600,
      keyframes([
        style({ offset: 0.3, transform: "translateX(-80px)" }),
        style({ offset: 1, transform: "translateX(100%)" })
      ])
    )
  ])
])
import { slide } from "./animations"

@Component({
  animations: [slide]
})

2、抽取具体的动画定义,方便多动画调用。

import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@angular/animations"

export const slideInUp = animation([
  style({ opacity: 0, transform: "translateY(40px)" }),
  animate(250)
])

export const slideOutLeft = animation([
  animate(
    600,
    keyframes([
      style({ offset: 0.3, transform: "translateX(-80px)" }),
      style({ offset: 1, transform: "translateX(100%)" })
    ])
  )
])

export const slide = trigger("slide", [
  transition(":enter", useAnimation(slideInUp)),
  transition(":leave", useAnimation(slideOutLeft))
])

3、调用动画时传递运动总时间,延迟时间,运动形式

export const slideInUp = animation(
  [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate("{{ duration }} {{ delay }} {{ easing }}")
  ],
  {
    params: {
      duration: "400ms",
      delay: "0s",
      easing: "ease-out"
    }
  }
)
transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}}))

查询元素执行动画

Angular 中提供了 query 方法查找元素并为元素创建动画

import { slide } from "./animations"

animations: [
  slide,
  trigger("todoAnimations", [
    transition(":enter", [
      query("h3", [
        style({ transform: "translateY(-30px)" }),
        animate(300)
      ]),
      // 查询子级动画 使其执行
      query("@slide", animateChild())
    ])
  ])
]

  

Todos

       
  •       {{ item }}     
  •   

    默认情况下,父级动画和子级动画按照顺序执行,先执行父级动画,再执行子级动画,可以使用 group 方法让其并行

    trigger("todoAnimations", [
      transition(":enter", [
        group([
          query("h3", [
            style({ transform: "translateY(-30px)" }),
            animate(300)
          ]),
          query("@slide", animateChild())
        ])
      ])
    ])

    交错动画

    Angular 提供了 stagger 方法,在多个元素同时执行同一个动画时,让每个元素动画的执行依次延迟。

    transition(":enter", [
      group([
        query("h3", [
          style({ transform: "translateY(-30px)" }),
          animate(300)
        ]),
        query("@slide", stagger(200, animateChild()))
      ])
    ])

    注意:stagger 方法只能在 query 方法内部使用

    自定义状态动画

    Angular 提供了 state 方法用于定义状态。

    angular状态和动画是什么

    1、默认代码解析

    
      
        
          一套框架, 多种平台, 移动端 & 桌面端
        
               

            使用简单的声明式模板,快速实现各种特性。使用自定义组件和大量现有组件,扩展模板语言。在几乎所有的         IDE 中获得针对 Angular         的即时帮助和反馈。所有这一切,都是为了帮助你编写漂亮的应用,而不是绞尽脑汁的让代码“能用”。       

          

            从原型到全球部署,Angular 都能带给你支撑 Google         大型应用的那些高延展性基础设施与技术。       

          

            通过 Web Worker 和服务端渲染,达到在如今(以及未来)的 Web         平台上所能达到的最高速度。 Angular 让你有效掌控可伸缩性。基于         RxJS、Immutable.js 和其它推送模型,能适应海量数据需求。       

          

            学会用 Angular         构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 ——         Web、移动 Web、移动应用、原生应用和桌面原生应用。       

           
    import { Component } from "@angular/core"
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styles: []
    })
    export class AppComponent {
      isExpended: boolean = false
      toggle() {
        this.isExpended = !this.isExpended
      }
    }

    2、创建动画

    trigger("expandCollapse", [
      // 使用 state 方法定义折叠状态元素对应的样式
      state(
        "collapsed",
        style({
          height: 0,
          overflow: "hidden",
          paddingTop: 0,
          paddingBottom: 0
        })
      ),
      // 使用 state 方法定义展开状态元素对应的样式
      state("expanded", style({ height: "*", overflow: "auto" })),
      // 定义展开动画
      transition("collapsed => expanded", animate("400ms ease-out")),
      // 定义折叠动画
      transition("expanded => collapsed", animate("400ms ease-in"))
    ])

    路由动画

    angular状态和动画是什么

    1、为路由添加状态标识,此标识即为路由执行动画时的自定义状态

    const routes: Routes = [
      {
        path: "",
        component: HomeComponent,
        pathMatch: "full",
        data: {
          animation: "one" 
        }
      },
      {
        path: "about",
        component: AboutComponent,
        data: {
          animation: "two"
        }
      },
      {
        path: "news",
        component: NewsComponent,
        data: {
          animation: "three"
        }
      }
    ]

    2、通过路由插座对象获取路由状态标识,并将标识传递给动画的调用者,让动画执行当前要执行的状态是什么

    
      
    
    import { RouterOutlet } from "@angular/router"
    
    export class AppComponent {
      prepareRoute(outlet: RouterOutlet) {
        return (
          outlet &&
          outlet.activatedRouteData &&
          outlet.activatedRouteData.animation
        )
      }
    }

    3、将 routerContainer 设置为相对定位,将它的直接一级子元素设置成绝对定位

    /* styles.css */
    .routerContainer {
      position: relative;
    }
    
    .routerContainer > * {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }

    4、创建动画

    trigger("routerAnimations", [
      transition("one => two, one => three, two => three", [
        query(":enter", style({ transform: "translateX(100%)", opacity: 0 })),
        group([
          query(
            ":enter",
            animate(
              "0.4s ease-in",
              style({ transform: "translateX(0)", opacity: 1 })
            )
          ),
          query(
            ":leave",
            animate(
              "0.4s ease-out",
              style({
                transform: "translateX(-100%)",
                opacity: 0
              })
            )
          )
        ])
      ]),
      transition("three => two, three => one, two => one", [
        query(
          ":enter",
          style({ transform: "translateX(-100%)", opacity: 0 })
        ),
        group([
          query(
            ":enter",
            animate(
              "0.4s ease-in",
              style({ transform: "translateX(0)", opacity: 1 })
            )
          ),
          query(
            ":leave",
            animate(
              "0.4s ease-out",
              style({
                transform: "translateX(100%)",
                opacity: 0
              })
            )
          )
        ])
      ])
    ])

    到此,相信大家对“angular状态和动画是什么”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


    本文标题:angular状态和动画是什么
    浏览路径:http://dzwzjz.com/article/pdchdo.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP