HarmonyOS 鸿蒙Next点击礼物的动画效果

楼主你好，可以参考下面demo：

@Entry
@Component
struct Index {
data: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
@State length: number = 60
@State fIndex: number = 0
@State isChange: boolean = false
@State nLength: number = 60
@State fontSizeInfo01: number = 10
@State fontSizeInfo02: number = 15
@State valueInfo: number = 0
@State count: number = 1
@State fontSizeInfo03: number = 18
uiContext: UIContext | undefined = undefined;

aboutToAppear(): void {
this.uiContext = this.getUIContext?.();
}

onPageShow(): void {
if (this.fIndex === 0) {
this.length = 60
setTimeout(() => {
this.length = 70
}, 50)
}
}

build() {
Column({ space: 20 }) {
Grid() {
ForEach(this.data, (item: number, index: number) => {
GridItem() {
Column() {
Column() {
if (this.fIndex === index && this.isChange) {
Column() {
Row(){
Text("X")
.fontColor(Color.Black)
.fontWeight(700)
.fontSize(13)
Text(this.count.toString())
.fontColor(Color.Black)
.fontWeight(700)
.fontSize(this.fontSizeInfo03)
}
Stack() {
Column() {
Text("长按").fontSize(this.fontSizeInfo01).fontColor(Color.White).margin({ top: 12 })
Text("点击").fontSize(this.fontSizeInfo02).fontColor(Color.White).margin({ top: 5 })
}
.opacity(0.8)
.width(this.nLength)
.height(this.nLength)
.borderRadius(this.nLength / 2)
.backgroundColor(Color.Orange)
Column() {
Progress({ value: this.valueInfo, total: 100, type: ProgressType.Ring })
.width(this.nLength)
.height(this.nLength)
.color(Color.Blue)
.style({ strokeWidth: 5 })
.onTouch((event: TouchEvent) => {
console.log("OnTouch + " + JSON.stringify(event.type));
if (TouchType.Up == event.type) {
console.log("message == up");
this.nLength = 60
this.fontSizeInfo01 = 10
this.fontSizeInfo02 = 15
this.fontSizeInfo03 = 15
this.valueInfo = 0
if (!this.uiContext) {
console.info("no uiContext, keyframe failed");
return;
}
// 设置关键帧动画整体播放3次
this.uiContext.keyframeAnimateTo({ iterations: -1 }, [
{
duration: 100, event: () => {
this.valueInfo = 0
}
},
{
duration: 1000, event: () => {
this.valueInfo = 100;
}
}
]);
} else if (TouchType.Down == event.type) {
console.log("message == down");
this.nLength = 50
this.fontSizeInfo01 = 7
this.fontSizeInfo02 = 10
this.fontSizeInfo03 = 18
this.valueInfo = 0
++this.count
if (!this.uiContext) {
console.info("no uiContext, keyframe failed");
return;
}
// 设置关键帧动画整体播放3次
this.uiContext.keyframeAnimateTo({ iterations: -1 }, [
{
duration: 100, event: () => {
this.valueInfo = 0
}
},
{
duration: 10000, event: () => {
this.valueInfo = 100;
}
}
]);
} else if (TouchType.Cancel == event.type) {
this.nLength = 60
console.log("message == cancel");
}
})
}.width(60)
.height(60)
.justifyContent(FlexAlign.Center)
}
}
.width(60)
.height(60)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
} else {
if (this.fIndex !== index) {
Column() {
Text('N' + item).height(60)
}
.justifyContent(FlexAlign.Center)
.width(60)
.height(60)
.borderRadius(30)
.backgroundColor(Color.Pink)
} else {
Column() {
Text('N' + item).height(60)
}
.width(this.length)
.height(this.length)
.borderRadius(this.length / 2)
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.Pink)
.animation({
duration: 600,
curve: Curve.Friction,
delay: 0,
iterations: -1, // 设置-1表示动画无限循环
playMode: PlayMode.Alternate,
})
}
}
}
.height(120)
.width(80)
.justifyContent(FlexAlign.Center)
.border({ color: Color.Green, width: 2 })
.onClick(() => {
this.isChange = true
if (!this.uiContext) {
console.info("no uiContext, keyframe failed");
return;
}
// 设置关键帧动画整体播放3次
this.uiContext.keyframeAnimateTo({ iterations: -1 }, [
{
duration: 100, event: () => {
this.valueInfo = 0
}
},
{
duration: 10000, event: () => {
this.valueInfo = 100;
}
}
]);
})
Text("点击选中")
.fontColor(this.fIndex === index ? Color.Green : Color.Black)
.id(index.toString())
.fontSize(14)
.fontWeight(700)
.backgroundColor(this.fIndex === index ? Color.Orange : Color.Grey)
.width(70)
.height(20)
.onClick(() => {
this.count = 1
this.fIndex = index
this.isChange = false
if (this.fIndex === index) {
this.length = 60
setTimeout(() => {
this.length = 70
}, 100)
}
console.info("index = " + index + ", fIndex = " + this.fIndex)
})
}
.width(100)
.height(150)
.border({ color: Color.Black, width: 2 })
}
})
}
.width('90%')
.border({ width: 1, color: Color.Black })
.columnsTemplate('repeat(auto-fill, 80)')
.columnsGap(25)
.rowsGap(20)
.height(450)
}
.width('100%')
.height('100%')
}
}