HarmonyOS鸿蒙Next中如何实现RevealTextWithIcon?

HarmonyOS鸿蒙Next中如何实现RevealTextWithIcon? 我的 app 中有一个比较丝滑的动画.

它的视觉效果如下:

1_UxeKUwXZlG_FuYvzis6nDQ.gif

一张图片向左划出, 之后显示隐藏在后面的文本. 我把这个组件叫作 RevealTextWithIcon.

其中图片和文本都是可以自由修改的.

作为 HarmonyOS NEXT 新手, 我表示一时理解不了其中都应用了哪些知识点.

不知道是否有大佬可以指导一下, 我应该从哪些方面入手?


更多关于HarmonyOS鸿蒙Next中如何实现RevealTextWithIcon?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

鸿蒙目前没有关于这个的现成的三方件，但是我理解的可以通过动画和拖动事件，转场效果等方式自己实现，或者可以参考lottie:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/4_16_u52a8_u753b-V5

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-events-drag-drop-V5

https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-fair-use-animation-V5

更多关于HarmonyOS鸿蒙Next中如何实现RevealTextWithIcon?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，RevealTextWithIcon可以通过使用Text和Image组件结合动画效果来实现。首先，创建一个包含文本和图标的布局，然后使用Animator或Transition来实现揭示效果。

  1. 布局定义：在ability_main.xml中定义Text和Image组件。

    <DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:reveal_text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Reveal Text"/>
    <Image
        ohos:id="$+id:reveal_icon"
        ohos:width="50vp"
        ohos:height="50vp"
        ohos:visibility="invisible"
        ohos:image_src="$media:icon"/>
</DirectionalLayout>

  2. 动画实现：在MainAbilitySlice.java中实现动画效果。

    import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.Text;
import ohos.agp.components.Image;
import ohos.agp.utils.Color;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        Text revealText = (Text) findComponentById(ResourceTable.Id_reveal_text);
        Image revealIcon = (Image) findComponentById(ResourceTable.Id_reveal_icon);

        AnimatorValue animator = new AnimatorValue();
        animator.setDuration(1000);
        animator.setCurveType(Animator.CurveType.LINEAR);
        animator.setValueUpdateListener((animatorValue, v) -> {
            revealText.setTextColor(Color.getIntColor((int) (v * 255), 0, 0, 0));
            if (v >= 0.5f) {
                revealIcon.setVisibility(Component.VISIBLE);
            }
        });
        animator.start();
    }
}

  3. 运行效果：文本颜色逐渐变化，图标在动画进行到一半时显示。

在HarmonyOS鸿蒙Next中，可以通过Text和Image组件组合实现RevealTextWithIcon效果。首先，使用Text组件显示文本，然后通过Image组件添加图标。通过Column或Row布局组件将它们排列在一起，并使用onClick事件处理点击交互，实现文本和图标的同时显示与隐藏。

回到顶部