1# 传统曲线 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9传统曲线基于数学公式，创造形状符合开发者预期的动画曲线。以三阶贝塞尔曲线为代表，通过调整曲线控制点，可以改变曲线形状，从而带来缓入、缓出等动画效果。对于同一条传统曲线，由于不具备物理含义，其形状不会因为用户行为发生任何改变，缺少物理动画的自然感和生动感。建议优先采用物理曲线创建动画，将传统曲线作为辅助用于极少数必要场景中。 10 11 12ArkUI提供了贝塞尔曲线、阶梯曲线等传统曲线接口，开发者可参照[插值计算](../reference/apis-arkui/js-apis-curve.md)进行查阅。 13 14 15传统曲线的示例和效果如下： 16 17 18 19```ts 20class MyCurve { 21 public title: string; 22 public curve: Curve; 23 public color: Color | string; 24 25 constructor(title: string, curve: Curve, color: Color | string = '') { 26 this.title = title; 27 this.curve = curve; 28 this.color = color; 29 } 30} 31 32const myCurves: MyCurve[] = [ 33 new MyCurve(' Linear', Curve.Linear, '#317AF7'), 34 new MyCurve(' Ease', Curve.Ease, '#D94838'), 35 new MyCurve(' EaseIn', Curve.EaseIn, '#DB6B42'), 36 new MyCurve(' EaseOut', Curve.EaseOut, '#5BA854'), 37 new MyCurve(' EaseInOut', Curve.EaseInOut, '#317AF7'), 38 new MyCurve(' FastOutSlowIn', Curve.FastOutSlowIn, '#D94838') 39] 40 41@Entry 42@Component 43struct CurveDemo { 44 @State dRotate: number = 0; // 旋转角度 45 46 build() { 47 Column() { 48 // 曲线图例 49 Grid() { 50 ForEach(myCurves, (item: MyCurve) => { 51 GridItem() { 52 Column() { 53 Row() 54 .width(30) 55 .height(30) 56 .borderRadius(15) 57 .backgroundColor(item.color) 58 Text(item.title) 59 .fontSize(15) 60 .fontColor(0x909399) 61 } 62 .width('100%') 63 } 64 }) 65 } 66 .columnsTemplate('1fr 1fr 1fr') 67 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 68 .padding(10) 69 .width('100%') 70 .height(300) 71 .margin({ top: 50 }) 72 73 Stack() { 74 // 摆动管道 75 Row() 76 .width(290) 77 .height(290) 78 .border({ 79 width: 15, 80 color: 0xE6E8EB, 81 radius: 145 82 }) 83 84 ForEach(myCurves, (item: MyCurve) => { 85 // 小球 86 Column() { 87 Row() 88 .width(30) 89 .height(30) 90 .borderRadius(15) 91 .backgroundColor(item.color) 92 } 93 .width(20) 94 .height(300) 95 .rotate({ angle: this.dRotate }) 96 .animation({ 97 duration: 2000, 98 iterations: -1, 99 curve: item.curve, 100 delay: 100 101 }) 102 }) 103 } 104 .width('100%') 105 .height(200) 106 .onClick(() => { 107 this.dRotate ? null : this.dRotate = 360; 108 }) 109 } 110 .width('100%') 111 } 112} 113``` 114 115 116 117 118
