• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 传统曲线
2
3传统曲线基于数学公式，创造形状符合开发者预期的动画曲线。以三阶贝塞尔曲线为代表，通过调整曲线控制点，可以改变曲线形状，从而带来缓入、缓出等动画效果。对于同一条传统曲线，由于不具备物理含义，其形状不会因为用户行为发生任何改变，缺少物理动画的自然感和生动感。建议优先采用物理曲线创建动画，将传统曲线作为辅助用于极少数必要场景中。
4
5
6ArkUI提供了贝塞尔曲线、阶梯曲线等传统曲线接口，开发者可参照[插值计算](../reference/apis-arkui/js-apis-curve.md)进行查阅。
7
8
9传统曲线的示例和效果如下：
10
11
12
13```ts
14class MyCurve {
15  public title: string;
16  public curve: Curve;
17  public color: Color | string;
18
19  constructor(title: string, curve: Curve, color: Color | string = '') {
20    this.title = title;
21    this.curve = curve;
22    this.color = color;
23  }
24}
25
26const myCurves: MyCurve[] = [
27  new MyCurve(' Linear', Curve.Linear, '#317AF7'),
28  new MyCurve(' Ease', Curve.Ease, '#D94838'),
29  new MyCurve(' EaseIn', Curve.EaseIn, '#DB6B42'),
30  new MyCurve(' EaseOut', Curve.EaseOut, '#5BA854'),
31  new MyCurve(' EaseInOut', Curve.EaseInOut, '#317AF7'),
32  new MyCurve(' FastOutSlowIn', Curve.FastOutSlowIn, '#D94838')
33]
34
35@Entry
36@Component
37export struct CurveDemo {
38  @State dRotate: number = 0; // 旋转角度
39
40  build() {
41    Column() {
42      // 曲线图例
43      Grid() {
44        ForEach(myCurves, (item: MyCurve) => {
45          GridItem() {
46            Column() {
47              Row()
48                .width(30)
49                .height(30)
50                .borderRadius(15)
51                .backgroundColor(item.color)
52              Text(item.title)
53                .fontSize(15)
54                .fontColor(0x909399)
55            }
56            .width('100%')
57          }
58        })
59      }
60      .columnsTemplate('1fr 1fr 1fr')
61      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
62      .padding(10)
63      .width('100%')
64      .height(300)
65      .margin({ top: 50 })
66
67      Stack() {
68        // 摆动管道
69        Row()
70          .width(290)
71          .height(290)
72          .border({
73            width: 15,
74            color: 0xE6E8EB,
75            radius: 145
76          })
77
78        ForEach(myCurves, (item: MyCurve) => {
79          // 小球
80          Column() {
81            Row()
82              .width(30)
83              .height(30)
84              .borderRadius(15)
85              .backgroundColor(item.color)
86          }
87          .width(20)
88          .height(300)
89          .rotate({ angle: this.dRotate })
90          .animation({
91            duration: 2000,
92            iterations: -1,
93            curve: item.curve,
94            delay: 100
95          })
96        })
97      }
98      .width('100%')
99      .height(200)
100      .onClick(() => {
101        this.dRotate ? null : this.dRotate = 360;
102      })
103    }
104    .width('100%')
105  }
106}
107```
108
109
110![zh-cn_image_0000001641260233](figures/zh-cn_image_0000001641260233.gif)
111
112