• 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/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, 0x409EFF),
28  new MyCurve(' Ease', Curve.Ease, 0x67C23A),
29  new MyCurve(' EaseIn', Curve.EaseIn, 0xE6A23C),
30  new MyCurve(' EaseOut', Curve.EaseOut, 0xF56C6C),
31  new MyCurve(' EaseInOut', Curve.EaseInOut, 0xFFB6C1),
32  new MyCurve(' FastOutSlowIn', Curve.FastOutSlowIn, 0xDC143C),
33  new MyCurve(' LinearOutSlowIn', Curve.LinearOutSlowIn, 0xFF00FF),
34  new MyCurve(' FastOutLinearIn', Curve.FastOutLinearIn, 0x00BFFF),
35  new MyCurve(' ExtremeDeceleration', Curve.ExtremeDeceleration, 0x5F9EA0),
36  new MyCurve(' Sharp', Curve.Sharp, 0x00FFFF),
37  new MyCurve(' Rhythm', Curve.Rhythm, 0x66CDAA),
38  new MyCurve(' Smooth', Curve.Smooth, 0x7CFC00),
39  new MyCurve(' Friction', Curve.Friction, 0xFFA500)
40]
41
42@Entry
43@Component
44export struct CurveDemo {
45  @State dRotate: number = 0; // Rotation angle.
46
47  build() {
48    Column() {
49      // Curve example
50      Grid() {
51        ForEach(myCurves, (item: MyCurve) => {
52          GridItem() {
53            Column() {
54              Row()
55                .width(20)
56                .height(20)
57                .borderRadius(10)
58                .backgroundColor(item.color)
59              Text(item.title)
60                .fontSize(10)
61                .fontColor(0x909399)
62            }
63            .width('100%')
64          }
65        })
66      }
67      .columnsTemplate('1fr 1fr 1fr')
68      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
69      .padding(10)
70      .width('100%')
71      .height(300)
72
73      Stack() {
74        // Swing pipe
75        Row()
76          .width(290)
77          .height(290)
78          .border({
79            width: 10,
80            color: 0xE6E8EB,
81            radius: 145
82          })
83
84        ForEach(myCurves, (item: MyCurve) => {
85          // Balls
86          Column() {
87            Row()
88              .width(20)
89              .height(20)
90              .borderRadius(10)
91              .backgroundColor(item.color)
92          }
93          .width(20)
94          .height(300)
95          .rotate({ angle: this.dRotate })
96          .animation({ duration: 2000, iterations: -1, curve: item.curve, delay: 100 })
97        })
98      }
99      .width('100%')
100      .height(437)
101      .onClick(() => {
102        this.dRotate ? null : this.dRotate = 360;
103      })
104    }
105    .width('100%')
106  }
107}
108```
109
110
111![en-us_image_0000001641260233](figures/en-us_image_0000001641260233.gif)
112