HarmonyOS - 基于ArkUI（JS）实现信件弹出效果

<div class="wrap" >
    <div class="letter">
        <image class="envelopeHead" id="envelopeHead" src="common/images/before.png" style="bottom: {{headerBottom}}px"></image>
        <image class="envelope"  id="envelope" src="common/images/after.png" style="bottom: {{envelopeBottom}}px"></image>
        <div class="paper" id="paper"  onclick="fold" style="bottom: {{paperBottom}}px;height:{{paperHeight}}px">
            <text class="title">{{ title }}</text>
           <text class="content">{{content}}</text>
        </div>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

.wrap {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #dce6f2;
}
.letter{
    height: 450px;
    position: relative;
    top: 0px;
}
/*信封口样式*/
.envelopeHead {
    position: absolute;
    bottom: 250px;
    left: 15px;
    width: 330px;
    height: 200px;
    z-index: 1;
}
/*信封样式*/
.envelope{
    bottom: 150px;
    position: absolute;
    left: 15px;
    width: 330px;
    height: 200px;
    z-index: 3;
}
/*信纸样式*/
.paper{
    position: absolute;
    width: 290px;
    left: 35px;
    justify-content: flex-start;
    background-color: #f7f2ec;
    bottom: 150px;
    z-index: 2;
    flex-direction: column;
    padding: 0 10px;
}
/* 称呼*/
.title{
    font-size: 26px;
    text-shadow: 0 1px 0 #ede8d9;
    height:60px;
    width: 100%;
}
/*信件内容*/
.content{
    font-size: 26px;
    text-shadow: 0 1px 0 #ede8d9;
    width: 100%;
    line-height:40px;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

import prompt from '@system.prompt';
export default {
    data: {
        title: "致各位小伙伴:",
        content: "",
        message: "展信悦！欢迎大家来到Harmony OS社区！",
        headerBottom: 240,
        paperBottom: 150,
        envelopeBottom: 150,
        paperHeight: 170,
        animation: '',
        animation2: '',
        animation3: '',
        number: 1
    },
    onInit() {
    },
    onShow() {
        var options = {
            duration: 150,
            easing: 'ease-in-out',
            delay: 0,
            fill: 'forwards',
            iterations: 2,
            direction: 'normal',
        };
        var frames = [
            {
                transform: {
                    translate: '0px 120px'
                },
                opacity: 1.0,
                offset: 1.0,
                height: '350px',
                'bottom': 0
            }];
        var framesHead = [
            {
                transform: {
                    translate: '0px 120px'
                },
                opacity: 1.0,
                offset: 1.0,
            }];
        var framesEnvelope = [
            {
                transform: {
                    translate: '0px 120px'
                },
                opacity: 1.0,
                offset: 1.0,
            }
        ];
        this.animationPaper = this.$element('paper').animate(frames, options);
        this.animationHead = this.$element('envelopeHead').animate(framesHead, options);
        this.animationEnvelope = this.$element('envelope').animate(framesEnvelope, options);
    },
    fold() {
        // 判断是否是展开信纸
        if (this.number % 2 === 1) {
            // 展开信纸
            this.animationPaper.play();
            this.animationHead.play();
            this.animationEnvelope.play();
            for (var index = 0; index < 8; index++) {
                this.content += " "
            }
            var num = 0
            var timer = setInterval(() => {
                if (num < this.message.length) {
                    this.content += this.message[num]
                    num++
                }else{
                    this.timer = null;
                }
            }, 150)
        } else {
            // 收回信纸
            this.animationPaper.cancel();
            this.animationHead.cancel();
            this.animationEnvelope.cancel();
            this.content = "";
        }
        this.number++
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.