Angular7 开红包动画

开篇说明

以上红包样式有没有觉得很熟悉，是不是和某信红包很像，嘘嘘嘘嘘！！！某信的红包样式故为好看，但是我们想百度参考一些红包样式，却发现相关的文章少之又少，重点大多数还不是免费。在我们现在面向百度开发的时代，怎么能少了学习资源，好了，废话不多说，下面直接上代码

红包布局

(在本例中为app/app.component.html)

<div class="hongbao-container">
  <div class="hongbao">
    <div class="top-content">
      <div class="avatar">
        <img src="../favicon.ico" alt="">
      </div>
      <span class="from-username">Angular</span>
      <div class="hongbao-message">恭喜发财, 大吉大利</div>
    </div>
    <div class="open-hongbao"
      [@openHongbaoAnm]="openState"
      (@openHongbaoAnm.done)="openHongbaoAnmDone($event)"
      (click)="openHongbao()">
      <span>開</span>
    </div>
    <span class="see-detail">看看大家的手气></span>
  </div>
</div>

红包样式

(在本例中为app/app.component.scss)

.hongbao-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .65);
}

.hongbao {
  text-align: center;
  height: 480px;
  background: #f05a49;
  width: 300px;
  left: 0;
  top: 0;
  border-radius: 10px;
  margin: 0 auto;
}

.top-content {
  height: 380px;
  border: 1px solid #e05e44;
  background-color: #ee614f;
  border-radius: 10px 10px 50% 50% / 10px 10px 12% 12%;
  box-shadow: 0px 2px 0px -1px rgba(0, 0, 0, 0.2);
}

.avatar {
  position: relative;
  img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20%;
  }
}

.from-username {
  font-size: 14px;
  color: #e6cc9b;
}

.hongbao-message {
  padding: 0 30px;
  margin: 15px 0;
  font-size: 20px;
  color: #e6cc9b;
  letter-spacing: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-hongbao {
  margin: -55px auto 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 36px;
  width: 100px;
  height: 100px;
  border: 1px solid #f5c68b;
  background-color: #e6cc9b;
  border-radius: 50%;
  color: #000;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
  span {
    margin: 0 auto;
    display: inline-block;
  }
}

.see-detail {
  display: block;
  margin-top: 20px;
  color: #e6cc9b;
  font-size: 12px;
  letter-spacing: 1px;
}

开红包动画

1、引入angular的animation模块

// 在app.module.ts中引入
import {
  BrowserAnimationsModule
} from '@angular/platform-browser/animations';

然后在app.module.ts的imports中引入此模块

2、组件component对应的ts代码

(在本例中为app/app.component.ts)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('openHongbaoAnm', [
      state('inactive', style({ transform: 'rotateY(0)' })), // 无动作状态
      state('active', style({ transform: 'rotateY(360deg)' })), // 有动作状态(翻转360度)
      transition('inactive => active', animate('0.8s ease-out')) // 无动作到有动作的动画时间以及过渡方式
    ])
  ]
})
export class AppComponent {
  public loading = false;  // 数据加载loading
  public openState = 'inactive';  // 动画状态

  // 开红包动画完成事件
  public openHongbaoAnmDone(e) {
    /**
     * 说明: 当前状态为inactive时, 若数据数据还处于loading, 则切换至有动画的active状态
     * active状态完成后切换回无状态inactive,这时候又会进入下一轮inactive判断
     * 视为无限播放动画, 直到有数据返回时, 即loading为true, 停止动画
     */
    switch (e.toState) {
      case 'inactive':
        return this.openState = (this.loading) ? 'active' : 'inactive';
      case 'active':
        return this.openState = 'inactive';
    }
  }

  // 开红包
  public openHongbao() {
    this.loading = true;
    this.openState = 'active'  // 开始动画

    // 2秒后停止动画
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  }

}

补充

通过以上的代码，组织起来就能实现点击红包按钮旋转的动画效果了。
angular的animation实际上就是把动画效果通过状态来管理，不同的状态实现不同的动画，笔者认为这样更清晰的把控我们的动画效果
其他地方其实都算很好理解，和原生的写法大同小异。唯一一个困扰的地方就是，原生的写法可以通过 animation-iteration-count 来控制动画无限播放，笔者也在此处困扰很久，发现angular的animation好像没有直接这样的参数。
经过一番资料搜索，发现可以通过另外一种变通的方式来实现动画循环，也就是通过监听动画每个状态结束的钩子函数，根据我们的实际情况是否需要切换动画状态，从而实现动态的控制动画是否循环。
关于angular的animation的用法此篇文章不做过多的说明，笔者提供几个专门讲解该模块的文章，讲的都很全面
https://www.jianshu.com/p/3f96acf572d4
https://www.jianshu.com/p/38f54081b10c
https://www.jianshu.com/p/8b6f418755c0
有兴趣深入的小伙伴可以看看以上3篇文章的讲解，个人觉得还是很不错的。

附上本人简单的demo: weixin-hongbao 运行demo的方式在项目的README.md中