1# Traditional Curve
2
3Traditional curves are mathematically described curves. A typical representative is the cubic Bezier curve. You define the curve shape with a set of control points, to bring out the expected animation effect, such as ease in and ease out. As aforementioned, a traditional curve is not based on the real-world behavior. This means that it does not change its shape to respond to user behavior, and lacks the natural and engaging feel given by a physics-based curve. When creating animations, prioritize physics-based curves and use traditional curves only in rare cases.
4
5
6ArkUI provides APIs for traditional curves such as Bezier and step curves. For details, see [Interpolation Calculation](../reference/apis-arkui/js-apis-curve.md).
7
8
9The following is an example of a traditional curve.
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; // Rotation angle.
39
40  build() {
41    Column() {
42      // Curve example
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        // Swing pipe
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          // Balls
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![en-us_image_0000001641260233](figures/en-us_image_0000001641260233.gif)
105