HarmonyOS 鸿蒙Next animateto动画问题

我这边在退出界面的时候给背景加了一个渐变的动画，但是实际效果却不太对，如果我给图片添加.visibility(this.imgaAlpha ==0?Visibility.None:Visibility.Visible)，动画有了缩放效果，如果移除这个，动画又会展示两次的感觉，详情见demo
// xxx.ets
import { router } from ‘@kit.ArkUI’

@Entry
@Component
struct HitTestBehaviorExample {
@State hitTestMode: HitTestMode = HitTestMode.Transparent
touchFirst = true
@State @Watch(“alphachange”) imgaAlpha: number = 100

alphachange(){
console.error(“watch_imgaAlpha=”+this.imgaAlpha)
}
build() {
Column() {
Button(‘outer button’)
.margin({ top: 50 }).width(“50%”).height(60)
.onClick((event) => {
console.info(‘sssssssssssssss_change’)
this.exitAnim()
})

Image($r(“app.media.test”))
.width(“100%”)
.height(“100%”)
.opacity(this.imgaAlpha/100)
// .visibility(this.imgaAlpha ==0?Visibility.None:Visibility.Visible)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
}

exitAnim() {
//开始动画
animateTo({
duration: 6000, // 动画时长
delay: 0, // 延迟时长
curve: Curve.Smooth,
onFinish: () => {
// 状态2：正在刷新
router.back()
}
}, () => {
// this.mytranslateY = 70
// this.alpha = 0
this.imgaAlpha = 0
})
}
}

yuanlaile 1楼•23 天前作者

你好，透明度的值变化没必要计算，设置1-0，中间的变化交给动画方法

// xxx.ets
import { router } from '[@kit](/user/kit).ArkUI'
@Entry
@Component
struct HitTestBehaviorExample {
@State hitTestMode: HitTestMode = HitTestMode.Transparent
touchFirst = true
@State @Watch(“alphachange”) imgaAlpha: number = 1
alphachange(){
console.error(“watch_imgaAlpha=”+this.imgaAlpha)
}
build() {
Column() {
Button(‘outer button’)
.margin({ top: 50 }).width(“50%”).height(60)
.onClick((event) => {
console.info(‘sssssssssssssss_change’)
this.exitAnim()
})
  Image("")
    .backgroundColor(Color.Yellow)
    .width("100%")
    .height("100%")
    .opacity(this.imgaAlpha)
      // .visibility(this.imgaAlpha ==0?Visibility.None:Visibility.Visible)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
}
exitAnim() {
//开始动画
animateTo({
duration: 6000, // 动画时长
delay: 0, // 延迟时长
curve: Curve.FastOutLinearIn,
playMode: PlayMode.Normal,
onFinish: () => {
// 状态2：正在刷新
router.back()
}
}, () => {
// this.mytranslateY = 70
// this.alpha = 0
this.imgaAlpha = 0
})
}
}

yibo5220 2楼•23 天前

关于HarmonyOS 鸿蒙Next中animateTo动画问题，以下是一些可能的解决方案和说明：

确保动画属性设置正确：在使用animateTo方法时，需要确保动画属性（如duration、curve、iterations等）设置正确，并且符合你的动画需求。
注意动画触发时机：animateTo动画的触发时机很重要，如果在组件的aboutToAppear等生命周期方法中调用animateTo但无动画效果，可能是因为动画在组件渲染完成前就已经执行完毕。此时，可以尝试在组件的onAppear等生命周期方法中调用animateTo，或者确保动画在组件渲染完成后执行。
检查动画目标状态：animateTo动画是通过改变目标状态来实现动画效果的，因此需要确保动画的目标状态是有效的，并且与动画属性相匹配。
API版本兼容性：animateTo方法在不同版本的HarmonyOS中可能有不同的行为表现，请确保你的开发环境与你所使用的HarmonyOS版本兼容。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。