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).margin({top:50})
65
66      Stack() {
67        // 摆动管道
68        Row()
69          .width(290)
70          .height(290)
71          .border({
72            width: 15,
73            color: 0xE6E8EB,
74            radius: 145
75          })
76
77        ForEach(myCurves, (item: MyCurve) => {
78          // 小球
79          Column() {
80            Row()
81              .width(30)
82              .height(30)
83              .borderRadius(15)
84              .backgroundColor(item.color)
85          }
86          .width(20)
87          .height(300)
88          .rotate({ angle: this.dRotate })
89          .animation({ duration: 2000, iterations: -1, curve: item.curve, delay: 100 })
90        })
91      }
92      .width('100%')
93      .height(200)
94      .onClick(() => {
95        this.dRotate ? null : this.dRotate = 360;
96      })
97    }
98    .width('100%')
99  }
100}
101```
102
103
104![zh-cn_image_0000001641260233](figures/zh-cn_image_0000001641260233.gif)
105
106