How to trigger other effects using hoverEffect?

I’m facing an issue while using CustomHoverEffect. In my view, there is a long title, which causes the title to be truncated. When the user hovers over it, the title should scroll. Although I have already implemented the scrolling effect, I am unsure how to trigger the scroll on hover. How should I approach this?

Answered by Vision Pro Engineer in 824546022

Actually, @Liangmu, I think I misunderstood your question. 

With CustomHoverEffect, you can create a hover effect that applies a marquee animation! Here's an example of such an effect (you may have already written something like this):


private struct ScrollEffect: CustomHoverEffect {
    let offset: CGFloat
    func body(content: Content) -> some CustomHoverEffect {
        content.hoverEffect { effect, isActive, proxy in
            effect.animation(.linear(duration: 2).repeatForever(autoreverses: false)) {
                $0.offset(x: isActive ? 0 : offset)
            }
        }
    }
}




Here, offset is the width of your text and may need to be adjusted for your context and desired scroll amount. You can apply this to your label configuration with .hoverEffect(ScrollEffect(offset: yourOffset))

Let me know if you have any questions!

Hello @Liangmu

For privacy reasons, there is no API that exposes an event when the user is hovering over an object in visionOS (i.e., when they are looking at an object). CustomHoverEffect allows you to configure a visual effect when the user hovers over an object, but it does not expose sensitive information like where and when the user is looking at an object.



Please file an enhancement request via Feedback Assistant. Thank you!

Accepted Answer

Actually, @Liangmu, I think I misunderstood your question. 

With CustomHoverEffect, you can create a hover effect that applies a marquee animation! Here's an example of such an effect (you may have already written something like this):


private struct ScrollEffect: CustomHoverEffect {
    let offset: CGFloat
    func body(content: Content) -> some CustomHoverEffect {
        content.hoverEffect { effect, isActive, proxy in
            effect.animation(.linear(duration: 2).repeatForever(autoreverses: false)) {
                $0.offset(x: isActive ? 0 : offset)
            }
        }
    }
}




Here, offset is the width of your text and may need to be adjusted for your context and desired scroll amount. You can apply this to your label configuration with .hoverEffect(ScrollEffect(offset: yourOffset))

Let me know if you have any questions!

How to trigger other effects using hoverEffect?
 
 
Q