HarmonyOS 平移动画问题
代码如下:
@Entry
@Component
struct TranslateAnimatePage {
@State isPresent: boolean = false;
private tagList: string[] = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii"];
private showFilterHeight: number = 400;
private duration: number = 1500;
build() {
Column() {
Row()
.width("100%")
.height(200)
.backgroundColor('#ED5151')
.onClick(() => {
this.isPresent = !this.isPresent;
});
Stack({ alignContent: Alignment.Top }) {
Row() {
Text('周三五折即将开始')
.fontColor('#ED5151')
.borderColor('#ED5151')
.height(24)
.fontSize(12)
.borderWidth(0.7)
.padding({ left: 10, right: 10 })
.borderRadius(4);
Blank()
.layoutWeight(1);
Text('分类')
.fontColor('#ED5151')
.height(24)
.fontSize(12)
.padding({ left: 10, right: 10 })
.onClick(() => {
this.isPresent = !this.isPresent;
});
}.padding({ top: 6, left: 15, bottom: 6 })
.backgroundColor(Color.White);
if (this.isPresent) {
Stack({ alignContent: Alignment.Top }) {
List() {
ForEach(this.tagList, (item: string) => {
ListItem() {
Text(item)
.fontSize(14)
.fontColor('#ED5151')
.height(36)
.width('100%')
.textAlign(TextAlign.Center)
.borderRadius(14)
.padding({ left: 10, right: 10 });
}
}, (item: string) => {
return item;
})
}
.height(this.showFilterHeight)
.width('100%')
.backgroundColor('#F5F5F5')
.borderRadius({ bottomLeft: 8, bottomRight: 8 })
.transition(TransitionEffect.translate({ y: -this.showFilterHeight })
.animation({ duration: this.duration }));
}
.height('100%')
.width('100%')
.backgroundColor("#7F202020")
.transition(TransitionEffect.opacity(0.5).animation({ duration: this.duration }))
.margin({
top: 36
});
}
}
}.height('100%')
.width('100%')
.backgroundColor('#F5F5F5')
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 平移动画
1028浏览 • 1回复 待解决
HarmonyOS position设置x,y值的更改,没有平移动画
637浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙项目中使用JS插值器动画实现元素的平移动画效果?
1077浏览 • 1回复 待解决
Tabs组件选中下划线需要平移动效
2479浏览 • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题
1241浏览 • 1回复 待解决
HarmonyOS 组件旋转后,平移方向出错
753浏览 • 1回复 待解决
HarmonyOS 移动上XComponent注册问题
1453浏览 • 1回复 待解决
数值动画如何设置后固定在原地或者继续移动?
8399浏览 • 1回复 待解决
在鸿蒙开发中,如何实现组件的动画效果,如淡入淡出、旋转和平移?
501浏览 • 0回复 待解决
HarmonyOS 缩放动画问题
660浏览 • 1回复 待解决
HarmonyOS 动画使用问题
807浏览 • 1回复 待解决
HarmonyOS customDialog有方案修改消失的动画效果吗?比如去掉消失时的缩放效果,改成向下平移效果
815浏览 • 1回复 待解决
HarmonyOS 组件动画问题
868浏览 • 1回复 待解决
HarmonyOS Grid拖拽动画问题
1176浏览 • 1回复 待解决
HarmonyOS 路径动画相关问题
1508浏览 • 1回复 待解决
HarmonyOS Naviagtion动画问题咨询
985浏览 • 1回复 待解决
HarmonyOS PAG动画使用问题
801浏览 • 1回复 待解决
HarmonyOS 动画执行时机问题
1129浏览 • 1回复 待解决
#鸿蒙通关秘籍#在HarmonyOS Next地图组件中如何使用动画来移动相机位置?
1171浏览 • 1回复 待解决
HarmonyOS Tabs 官方示例9,支持在BarMode.Fixed下,下划线支持动画移动到点击的tab下。但是没有支持BarMode.Scrollable模式下,下划线动画移动交互
820浏览 • 1回复 待解决
关于属性动画的问题?
11210浏览 • 3回复 待解决
HarmonyOS 复用转场动画示例3问题
987浏览 • 1回复 待解决
HarmonyOS list编辑移动效果
871浏览 • 1回复 待解决
我想要上下平移的动画,从下方插入元素,从上方移出元素,但是元素为什么总是从左右方进入和移出?
546浏览 • 1回复 已解决
自定义扫码界面,扫描线上下移动动画如何实现?
418浏览 • 0回复 待解决
加上
对组件进行裁剪、遮罩处理:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5#示例1