• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import curves from '@ohos.curves'
17import router from '@ohos.router'
18
19@Entry
20@Component
21struct Logo {
22  @State opacityValue: number = 0
23  @State scaleValue: number = 0
24  private rightPath: string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
25  private rightBottomPath: string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
26
27  build() {
28    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
29      Shape() {
30        Path()
31          .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
32          .fill(Color.White)
33
34        Path()
35          .commands(this.rightPath)
36          .fill('none')
37          .linearGradient({ angle: 30, colors: [['#C4FFA0', 0], ['#ffffff', 1]] })
38          .clip(new Path().commands(this.rightPath))
39
40        Path()
41          .commands(this.rightBottomPath)
42          .fill('none')
43          .linearGradient({ angle: 50, colors: [['#8CC36A', 0.1], ['#B3EB90', 0.4], ['#ffffff', 0.7]] })
44          .clip(new Path().commands(this.rightBottomPath))
45      }
46      .height(210)
47      .width(210)
48      .scale({ x: this.scaleValue, y: this.scaleValue })
49      .opacity(this.opacityValue)
50      .onAppear(() => {
51        animateTo({
52          duration: 1000,
53          curve: curves.cubicBezier(0.4, 0, 1, 1),
54          delay: 100,
55          onFinish: () => {
56            setTimeout(() => {
57              router.replace({ url: 'pages/Home' })
58            }, 1000)
59          }
60        }, () => {
61          this.opacityValue = 1
62          this.scaleValue = 1
63        })
64      })
65
66      Text($r("app.string.healthy_diet"))
67        .fontSize(26)
68        .fontColor(Color.White)
69        .margin({ top: 300 })
70
71      Text($r("app.string.logo_description"))
72        .fontSize(17)
73        .fontColor(Color.White)
74        .margin({ top: 4 })
75    }
76    .width('100%')
77    .height('100%')
78    .linearGradient({ angle: 180, colors: [['#BDE895', 0.1], ['#95DE7F', 0.6], ['#7AB967', 1]] })
79  }
80}