• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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)
65      .margin({ top: 50 })
66
67      Stack() {
68        // Swing pipe
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          // Balls
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![en-us_image_0000001641260233](figures/en-us_image_0000001641260233.gif)
111