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