Traditional curve

#harmonyosnext

Traditional Curve Examples and Effects

Code Explanation and Example

The following code demonstrates how to create a visual representation of different animation curves using ArkUI. Each curve is represented by a rotating ball that follows a specific curve pattern.

Curve Class Definition

class MyCurve {
  public title: string;
  public curve: Curve;
  public color: Color | string;

  constructor(title: string, curve: Curve, color: Color | string = '') {
    this.title = title;
    this.curve = curve;
    this.color = color;
  }
}

Curve Instances

const myCurves: MyCurve[] = [
  new MyCurve('Linear', Curve.Linear, '#317AF7'),
  new MyCurve('Ease', Curve.Ease, '#D94838'),
  new MyCurve('EaseIn', Curve.EaseIn, '#DB6B42'),
  new MyCurve('EaseOut', Curve.EaseOut, '#5BA854'),
  new MyCurve('EaseInOut', Curve.EaseInOut, '#317AF7'),
  new MyCurve('FastOutSlowIn', Curve.FastOutSlowIn, '#D94838')
];

CurveDemo Component

@Entry
@Component
export struct CurveDemo {
  @State dRotate: number = 0; // Rotation angle

  build() {
    Column() {
      // Curve legend
      Grid() {
        ForEach(myCurves, (item: MyCurve) => {
          GridItem() {
            Column() {
              Row()
                .width(30)
                .height(30)
                .borderRadius(15)
                .backgroundColor(item.color)
              Text(item.title)
                .fontSize(15)
                .fontColor(0x909399)
            }
            .width('100%')
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .padding(10)
      .width('100%')
      .height(300)
      .margin({ top: 50 })

      Stack() {
        // Swinging pipe
        Row()
          .width(290)
          .height(290)
          .border({
            width: 15,
            color: 0xE6E8EB,
            radius: 145
          })

        ForEach(myCurves, (item: MyCurve) => {
          // Ball
          Column() {
            Row()
              .width(30)
              .height(30)
              .borderRadius(15)
              .backgroundColor(item.color)
          }
          .width(20)
          .height(300)
          .rotate({ angle: this.dRotate })
          .animation({
            duration: 2000,
            iterations: -1,
            curve: item.curve,
            delay: 100
          })
        })
      }
      .width('100%')
      .height(200)
      .onClick(() => {
        this.dRotate ? null : this.dRotate = 360;
      })
    }
    .width('100%')
  }
}

Explanation

MyCurve Class: This class encapsulates the title, curve type, and color for each curve.
myCurves Array: An array of MyCurve instances, each representing a different animation curve with a unique color.
CurveDemo Component: This component visualizes the curves by rotating balls along a circular path. Each ball follows a different curve pattern.
- Grid: Displays a legend for each curve, showing the curve name and color.
- Stack: Contains a rotating pipe and balls that demonstrate the different curves.
- ForEach: Iterates over the myCurves array to create a ball for each curve, applying the respective curve to the rotation animation.
- onClick: Starts the rotation animation when the component is clicked.

DEV Community