Angular Animation 动画

最新推荐文章于 2024-03-19 16:29:29 发布

power0405hf

最新推荐文章于 2024-03-19 16:29:29 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/power0405hf/article/details/79413900

版权

前端专栏收录该内容

47 篇文章

订阅专栏

本文深入探讨Angular的动画机制，包括从一个状态平滑过渡到另一个状态的实现，详细讲解了State、Transition和Animate函数的用法。通过实例展示了项目卡片和任务的动画效果，同时提到了HostBinding和HostListening在动画中的应用。文章还触及了路由动画，并介绍了如何使用Group和Query & Stagger来协调复杂的动画序列，强调内容和动画的平衡，以及如何创建优雅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画：
从一个状态过度到另一个状态
State:定义状态
Transition:定义如何过渡
Animate函数：规定具体如何过渡，如时间，过渡的速度等
animate有多个重载形式

app.module.ts:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

app.component.ts:
port { trigger, state, transition,style } from "@angular/animations";

animations:[
    trigger('square', 
          [state('green',style({'background-color':'green',
                                'height':'100px',
                                // 'transform':translate
        })),
           state('red',style({'background-color':'red','height':'50px'})),
           transition('green => red',animate(1000))
          ])
]  

animate有3个参数：第一个 持续时间 第二个：延迟时间，第三个，缓动函数，
如animate('0.2s 1s')
animate('0.2s cubic-bezier()')
关键帧：物体运动或变化过程中的关键动作所处的那一帧


import { trigger, state, transition,style,animate } from "@angular/animations";
animations:[
    trigger('square', 
          [state('green',style({'background-color':'green',
                                'height':'100px',
                                'transform':'translateY(-100%)'
        })),
           state('red',style({'background-color':'red',
                                'height':'50px',
                                'transform':'translateY(100%)'
          })),
           transition('green => red',animate(1000)),
           transition('red => green',animate('.8s cubic-bezier(.11,.67,1,.58)'))
          ]) 
]  
})
export class AppComponent {
  squareState:String;
  darkTheme = false;

  constructor(private oc:OverlayContainer){

  }

  switchTheme(dark){
    this.darkTheme = dark;
  } 

  onClick(){
    this.squareState = this.squareState === 'red' ? 'green':'red';
  }
}

html:
 <div class="square" 
      [@square]="squareState" 
      (click)="onClick()"
      ></div>

项目卡片和任务动画
localhost://4200/tasklists 把鼠标移到任务任务list上没有变化：widePriority拼错了

HostBinding:可以理解为 html中属性绑定到组件中的成员变量
HostListening：绑定到组件中的事件

3.4 路由动画及高阶动画函数
路由动画需要在host元数据中指定触发器
动画不要过多，内容优先，动画辅助。
Group:用于同时进行一组的动画变换
Query & Stagger：
Query用于父节点寻找子节点
ease-in-out: 开始和结束都缓慢，中间加速
做挂了…

group可以让一组动画同时执行

Uncaught (in promise): Error: The animation trigger "routeAnim" has failed to build due to the following errors:
 - The CSS property "opacity" that exists between the times of "0ms" and "500ms" is also being animated in a parallel animation between the times of "0ms" and "300ms"
Error: The animation trigger "routeAnim" has failed to build due to the following errors:
 - The CSS property "opacity" that exists between the times of "0ms" and "500ms" is also being animated in a parallel animation between the times of "0ms" and "300ms"
 - --->没搞定

query：