Angular动画实现的2种方式以及添加购物车动画实例代码

前言

在前端应用中，动画是一个常见的场景。在使用了一系列的动画库之后，终于需要自己来实现一个动画了。这次的动画则是基于 angular 框架。我的场景是一个类似于添加购物车的动画。在这个场景里，需要两个动画，一个是购物车数量的增加动画，一个则是折叠页面元素的动画。

在实现的过程上，我采用了两种不同的 angular 动画的方式：

• 使用 typescript 控制动画
• 使用 @component 中的 animations

angular 动画基础

如 angular 官网中的示例那样，要在 angular 应用中添加动画是比较简单的一件事——前提是我们懂得添加的法则。如下是官网的示例：

@component({
 selector: 'app-hero-list-basic',
 template: `
 <ul>
 <li *ngfor="let hero of heroes"
  [@herostate]="hero.state"
  (click)="hero.togglestate()">
 {{hero.name}}
 </li>
 </ul>
 `,
 styleurls: ['./hero-list.component.css'],
 animations: [
 trigger('herostate', [
 state('inactive', style({
 backgroundcolor: '#eee',
 transform: 'scale(1)'
 })),
 state('active', style({
 backgroundcolor: '#cfd8dc',
 transform: 'scale(1.1)'
 })),
 transition('inactive => active', animate('100ms ease-in')),
 transition('active => inactive', animate('100ms ease-out'))
 ])
 ]
})

要使用动画，需要在模板中使用 [@herostate]语法，这里的 herostate 对应着 @component 中的 herostate 相关的动画。

• 在这个 trigger 中，我们定义了 inactive 和 active 两个不同的 state。即当模板中的 hero.state 发生变化的时候，我们就会找到对应的 state 的样式等等的内容。
• 在这个 trigger 中，我们还定义了两个 transition，即当我们的 state 从 inactive => active 或者 active => inactive 时，我们就会执行后面的动画。

原理上，大概就是这么多了。然后，我就开始了我的动画之旅。

购物车数量增加动画

对于我的场景来说，要添加这个动画并不难。无非就是上一个值淡出，新的值淡入：

 trigger('count', [
 transition('void => current', [
 animate(
 '400ms 150ms',
 keyframes([
  style({ opacity: 0.6, transform: 'translatey(0)', offset: 0 }),
  style({ opacity: 0.3, transform: 'translatey(-15px)', offset: 0.5 }),
  style({ opacity: 0, transform: 'translatey(-30px)', offset: 1 })
 ])
 )
 ]),
 transition('void => last', [
 animate(
 250,
 keyframes([
  style({ opacity: 0, transform: 'translatey(100%)', offset: 0 }),
  style({ opacity: 0.3, transform: 'translatey(15px)', offset: 0.5 }),
  style({ opacity: 0.8, transform: 'translatey(0)', offset: 1.0 })
 ])
 )
 ])
 ])

代码就是这么简单，这里用到了关键帧 keyframes，来进行一些简单的动画转换。

页面缩放动画

随后，我需要做的就是对页面的元素进行缩放等效果，这个时候就需要用到 animationbuilder 来实现了：

 const myanimation = this.animationbuilder.build([
 animate(
 1000,
 keyframes([
  style({ opacity: 0.8, transform: 'scale(0.8)', offset: 0.3 }),
  style({ opacity: 0.3, transform: 'scale(0.3)', offset: 0.5 }),
  style({ opacity: 0.2, transform: 'scale(0.2) translate(12000px, 8000px)', offset: 1 })
 ])
 )
 ]);

 const player = myanimation.create(forkformcomponent);
 player.play();
 player.ondone(() => {
 const nativeelement = this.cartcontainer.nativeelement;
 nativeelement.removechild(nativeelement.childnodes[0]);
 this.renderer.setstyle(nativeelement, 'display', 'none');
 });

在那之前，我先复制了页面元素：

const formelement = this.formelement.nativeelement;

const forkformcomponent = this.cartcontainer.nativeelement;
forkformcomponent.appendchild(formelement.clonenode(true));

this.renderer.setstyle(forkformcomponent, 'display', 'block');
this.renderer.setstyle(forkformcomponent, 'position', 'absolute');
this.renderer.setstyle(forkformcomponent, 'top', '-300px');
this.renderer.setstyle(forkformcomponent, 'left', '0');

这样一来，就能复制页面的 dom，然后实现缩放效果了。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。