1. Toy模板网首页
  2. > Toy博客

HarmonyOS学习路之开发篇—Java UI框架(动画开发)

9月前 作者：爱吃土豆丝的打工人 分类：Toy博客 阅读(49) 违法举报

这篇具有很好参考价值的文章主要介绍了HarmonyOS学习路之开发篇—Java UI框架(动画开发)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

动画开发

动画是组件的基础特性之一，精心设计的动画使UI变化更直观，有助于改进应用程序的外观并改善用户体验。Java UI框架提供了帧动画、数值动画和属性动画，并提供了将多个动画同时操作的动画集合。

帧动画

帧动画是利用视觉暂留现象，将一系列静止的图片按序播放，给用户产生动画的效果。

1. 在Project窗口，打开“entry > src > main > resources > base > media”，添加一系列图片至media目录下。

HarmonyOS学习路之开发篇—Java UI框架(动画开发)

2. 在graphic目录下，新建“animation_element.xml”文件，在XML文件中使用animation-list标签来配置图片资源，duration用来设置显示时长，单位为毫秒。oneshot表示是否只播放一次。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:ohos="http://schemas.huawei.com/res/ohos"
                ohos:oneshot="false">
    <item ohos:element="$media:01" ohos:duration="100"/>
    <item ohos:element="$media:02" ohos:duration="100"/>
    <item ohos:element="$media:03" ohos:duration="100"/>
    <item ohos:element="$media:04" ohos:duration="100"/>
    <item ohos:element="$media:05" ohos:duration="100"/>
    <item ohos:element="$media:06" ohos:duration="100"/>
    <item ohos:element="$media:07" ohos:duration="100"/>
    <item ohos:element="$media:08" ohos:duration="100"/>
    <item ohos:element="$media:09" ohos:duration="100"/>
    <item ohos:element="$media:10" ohos:duration="100"/>
    <item ohos:element="$media:11" ohos:duration="100"/>
    <item ohos:element="$media:12" ohos:duration="100"/>
</animation-list>

3. 在MainAbilitySlice.java中实现动画播放的相关功能。

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;
import ohos.agp.components.element.FrameAnimationElement;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //加载动画资源，生成动画对象。
        FrameAnimationElement frameAnimationElement = new FrameAnimationElement(getContext(), ResourceTable.Graphic_animation_element);
        //创建播放动画的组件
        Image image = new Image(getContext());
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(500, 500));
        image.setBackground(frameAnimationElement);
        DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
        directionalLayout.addComponent(image);
        super.setUIContent(directionalLayout);
        //开始播放动画
        frameAnimationElement.start();
    }
}

动画效果如图所示：

HarmonyOS学习路之开发篇—Java UI框架(动画开发)

数值动画

AnimatorValue数值从0到1变化，本身与Component无关。开发者可以设置0到1变化过程的属性，例如：时长、变化曲线、重复次数等，并通过值的变化改变组件的属性，实现组件的动画效果。

  • Java代码方式

MainAbilitySlice.java的示例代码如下：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建播放动画的组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_icon);
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(200, 200));
        DirectionalLayout layout = new DirectionalLayout(getContext());
        layout.setLayoutConfig(new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT
        ));
        layout.addComponent(image);
        super.setUIContent(layout);
        //创建数值动画对象
        AnimatorValue animatorValue = new AnimatorValue();
        //动画时长
        animatorValue.setDuration(3000);
        //播放前的延迟时间
        animatorValue.setDelay(1000);
        //循环次数
        animatorValue.setLoopedCount(AnimatorValue.INFINITE);
        //动画的播放类型
        animatorValue.setCurveType(Animator.CurveType.BOUNCE);
        //设置动画过程
        animatorValue.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
            @Override
            public void onUpdate(AnimatorValue animatorValue, float value) {
                image.setContentPosition((int) (800 * value), image.getContentPositionY());
            }
        });
        //开始启动动画
        animatorValue.start();
    }
}
  • XML方式

在resources/base/animation目录下创建名为“animator_value.xml”XML文件。目前XML方式只支持delay和duration属性。

animator_value.xml的示例代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<animator xmlns:ohos="http://schemas.huawei.com/res/ohos"
          ohos:delay="1000"
          ohos:duration="3000"/>

MainAbilitySlice.java的示例代码如下：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorProperty;
import ohos.agp.animation.AnimatorScatter;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建播放动画的组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_icon);
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(200, 200));
        DirectionalLayout layout = new DirectionalLayout(getContext());
        layout.setLayoutConfig(new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT
        ));
        layout.addComponent(image);
        super.setUIContent(layout);
        //创建数值动画对象
        AnimatorScatter scatter = AnimatorScatter.getInstance(getContext());
        Animator animator = scatter.parse(ResourceTable.Animation_animator_value);
        if (animator instanceof AnimatorValue) {
            AnimatorValue animatorValue = (AnimatorValue) animator;
            //循环次数
            animatorValue.setLoopedCount(AnimatorValue.INFINITE);
            //动画的播放类型
            animatorValue.setCurveType(Animator.CurveType.BOUNCE);
            //设置动画过程
            animatorValue.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
                @Override
                public void onUpdate(AnimatorValue animatorValue, float value) {
                    image.setContentPosition((int) (800 * value), image.getContentPositionY());
                }
            });
            //开始启动动画
            animatorValue.start();
        }
    }
}

动画效果如图所示：

HarmonyOS学习路之开发篇—Java UI框架(动画开发)

属性动画

为Component的属性设置动画是常见的需求，Java UI框架可以为Component设置某个属性或多个属性的动画。

  • Java方式

MainAbilitySlice.java的示例代码如下

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorProperty;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    private boolean started = false;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建播放动画的组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_icon);
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(200, 200));
        DirectionalLayout layout = new DirectionalLayout(getContext());
        layout.setLayoutConfig(new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT
        ));
        layout.addComponent(image);
        super.setUIContent(layout);
        //创建属性动画对象
        AnimatorProperty animatorProperty = new AnimatorProperty();
        animatorProperty.setTarget(image);
        animatorProperty
                //x轴从100移动到800位置
                .moveFromX(100).moveToX(800)
                //透明度从0.5变化到1.0
                .alphaFrom(0.5f).alpha(1.0f)
                //旋转720度
                .rotate(720)
                //时长3秒
                .setDuration(3000)
                //延迟1秒
                .setDelay(1000)
                //无限循环
                .setLoopedCount(AnimatorValue.INFINITE)
                //反弹力效果
                .setCurveType(Animator.CurveType.BOUNCE);
        //点击图片开始/停止动画
        image.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (!started) {
                    //开始动画
                    animatorProperty.start();
                } else {
                    //停止动画
                    animatorProperty.stop();
                }
                started = !started;
            }
        });
    }
}
  • XML方式

在resources/base/animation文件夹下创建名为“animator_property.xml”的XML文件。目前XML方式只支持delay和duration属性。

animator_property.xml的示例代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<animatorProperty xmlns:ohos="http://schemas.huawei.com/res/ohos"
                  ohos:delay="1000"
                  ohos:duration="3000"/>

MainAbilitySlice.java的示例代码如下：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorProperty;
import ohos.agp.animation.AnimatorScatter;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    private boolean started = false;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建播放动画的组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_icon);
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(200, 200));
        DirectionalLayout layout = new DirectionalLayout(getContext());
        layout.setLayoutConfig(new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT
        ));
        layout.addComponent(image);
        super.setUIContent(layout);
        //创建属性动画对象
        AnimatorScatter scatter = AnimatorScatter.getInstance(getContext());
        Animator animator = scatter.parse(ResourceTable.Animation_animator_property);
        if (animator instanceof AnimatorProperty) {
            AnimatorProperty animatorProperty = (AnimatorProperty) animator;
            animatorProperty.setTarget(image);
            animatorProperty
                    //x轴从100移动到800位置
                    .moveFromX(100).moveToX(800)
                    //透明度从0.5变化到1.0
                    .alphaFrom(0.5f).alpha(1.0f)
                    //旋转720度
                    .rotate(720)
                    //无限循环
                    .setLoopedCount(AnimatorValue.INFINITE)
                    //反弹力效果
                    .setCurveType(Animator.CurveType.BOUNCE);
            //点击图片开始/停止动画
            image.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    if (!started) {
                        //开始动画
                        animatorProperty.start();
                    } else {
                        //停止动画
                        animatorProperty.stop();
                    }
                    started = !started;
                }
            });
        }
    }
}

点击图片开始动画，效果如图所示：

HarmonyOS学习路之开发篇—Java UI框架(动画开发)

动画集合

如果需要使用一个组合动画，可以把多个动画对象进行组合，并添加到使用AnimatorGroup中。AnimatorGroup提供了两个方法：runSerially() 和 runParallel()，分别表示动画按顺序开始和动画同时开始。

说明:

动画集合暂不支持使用XML方式。

多个动画同时开始

同时执行动画1和动画2。

  • 动画1：沿x轴从100移动到800位置。
  • 动画2：沿y轴从100移动到800位置。

MainAbilitySlice.java的示例代码如下：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorGroup;
import ohos.agp.animation.AnimatorProperty;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    private boolean started =false;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建播放动画的组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_icon);
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(200, 200));
        DirectionalLayout layout = new DirectionalLayout(getContext());
        layout.setLayoutConfig(new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT
        ));
        layout.addComponent(image);
        super.setUIContent(layout);
        //创建动画组对象
        AnimatorGroup animatorGroup = new AnimatorGroup();
        //动画1 - 沿x轴从100移动到800位置
        AnimatorProperty action1 = new AnimatorProperty();
        action1.setTarget(image);
        action1.moveFromX(0).moveToX(800);
        //动画2 - 沿y轴从100移动到800位置
        AnimatorProperty action2 = new AnimatorProperty();
        action2.setTarget(image);
        action2.moveFromY(0).moveToY(800);
        //同时执行动画1和动画2
        animatorGroup.runParallel(action1, action2);
        //无限循环
        animatorGroup.setLoopedCount(Animator.INFINITE);
        //时长
        animatorGroup.setDuration(1500);
        //点击图片开始/停止动画
        image.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (!started) {
                    //启动动画组
                    animatorGroup.start();
                } else {
                    //停止动画组
                    animatorGroup.stop();
                }
                started = !started;
            }
        });
    }
}

点击图片开始动画，多个动画同时开始的效果图如下：

HarmonyOS学习路之开发篇—Java UI框架(动画开发)

多个动画按顺序逐个执行

先执行动画1，然后执行动画2。

  • 动画1：沿x轴从100移动到800位置。
  • 动画2：沿y轴从100移动到800位置。

MainAbilitySlice.java的示例代码如下：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorGroup;
import ohos.agp.animation.AnimatorProperty;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    private boolean started =false;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建播放动画的组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_icon);
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(200, 200));
        DirectionalLayout layout = new DirectionalLayout(getContext());
        layout.setLayoutConfig(new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT
        ));
        layout.addComponent(image);
        super.setUIContent(layout);
        //创建动画组对象
        AnimatorGroup animatorGroup = new AnimatorGroup();
        //动画1 - 沿x轴从100移动到800位置
        AnimatorProperty action1 = new AnimatorProperty();
        action1.setTarget(image);
        action1.moveFromX(0).moveToX(800);
        //动画2 - 沿y轴从100移动到800位置
        AnimatorProperty action2 = new AnimatorProperty();
        action2.setTarget(image);
        action2.moveFromY(0).moveToY(800);
        //先动画1后动画2
        animatorGroup.runSerially(action1, action2);
        //无限循环
        animatorGroup.setLoopedCount(Animator.INFINITE);
        //时长
        animatorGroup.setDuration(1500);
        //点击图片开始/停止动画
        image.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (!started) {
                    //启动动画组
                    animatorGroup.start();
                } else {
                    //停止动画组
                    animatorGroup.stop();
                }
                started = !started;
            }
        });
    }
}

点击图片开始动画，多个动画按顺序逐个执行的效果图如下：

HarmonyOS学习路之开发篇—Java UI框架(动画开发)

多个动画顺序执行和同时执行并存

为了更加灵活处理多个动画的播放顺序，例如一些动画顺序播放、一些动画同时播放，Java UI框架提供了更方便的动画Builder接口。

先同时执行动画1和动画2，然后同时执行动画3和动画4。

  • 动画1：沿x轴从100移动到800位置。
  • 动画2：沿y轴从100移动到800位置。
  • 动画3：沿y轴从0.3放大到1.0。
  • 动画4：沿x轴从0.3放大到1.0。

MainAbilitySlice.java的示例代码如下：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorGroup;
import ohos.agp.animation.AnimatorProperty;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    private boolean started =false;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建播放动画的组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_icon);
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(200, 200));
        DirectionalLayout layout = new DirectionalLayout(getContext());
        layout.setLayoutConfig(new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT
        ));
        layout.addComponent(image);
        super.setUIContent(layout);
        //创建动画组对象
        AnimatorGroup animatorGroup = new AnimatorGroup();
        //动画1 - 沿x轴从100移动到800位置
        AnimatorProperty action1 = new AnimatorProperty();
        action1.setTarget(image);
        action1.moveFromX(0).moveToX(800);
        //动画2 - 沿y轴从100移动到800位置
        AnimatorProperty action2 = new AnimatorProperty();
        action2.setTarget(image);
        action2.moveFromY(0).moveToY(800);
        //动画3 - 沿y轴从0.3放大到1.0
        AnimatorProperty action3 = new AnimatorProperty();
        action3.setTarget(image);
        action3.scaleYFrom(0.3f).scaleY(1.0f);
        //动画4 - 沿x轴从0.3放大到1.0
        AnimatorProperty action4 = new AnimatorProperty();
        action4.setTarget(image);
        action4.scaleXFrom(0.3f).scaleX(1.0f);

        //先同时执行动画1和动画2，然后同时执行动画3和动画4
        AnimatorGroup.Builder builder = animatorGroup.build();
        builder.addAnimators(action1,action2).addAnimators(action3,action4);
        //无限循环
        animatorGroup.setLoopedCount(Animator.INFINITE);
        //时长
        animatorGroup.setDuration(1500);
        //点击图片开始/停止动画
        image.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (!started) {
                    //启动动画组
                    animatorGroup.start();
                } else {
                    //停止动画组
                    animatorGroup.stop();
                }
                started = !started;
            }
        });
    }
}

点击图片开始动画，动画集合的效果图如下：

HarmonyOS学习路之开发篇—Java UI框架(动画开发)文章来源地址https://www.toymoban.com/news/detail-493495.html

到了这里，关于HarmonyOS学习路之开发篇—Java UI框架(动画开发)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS学习路之方舟开发框架—方舟开发框架（ArkUI）概述

    HarmonyOS学习路之方舟开发框架—方舟开发框架（ArkUI）概述

    方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。 UI： 即用户界面。开发者可以将应用的用户界面设计为多个功能

    2024年02月16日
    浏览(45)

  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 四）

    当创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量

    2024年02月17日
    浏览(53)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 五）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 五）

    如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器@Styles。 @Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位

    2024年02月17日
    浏览(54)

  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 二）

    在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成

    2024年02月04日
    浏览(53)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 三）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 三）

    在开始之前，先明确自定义组件和页面的关系： 自定义组件： @Component 装饰的 UI 单元，可以组合多个系统组件实现 UI 的复用。 页面：即应用的 UI 页面。可以由一个或者多个自定义组件组成， @Entry 装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有

    2024年02月16日
    浏览(59)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 二）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 二）

    @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。 @Prop装饰的变量和父组件建立单向的同步关系： @Prop变量允许在本地修改，但修改后的变化不会同步回父组件。 当父组件中的数据源更改时，与之相关的@Prop装饰的变

    2024年02月14日
    浏览(45)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 六）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 六）

    AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。 和LocalStorage不同的是，LocalStorage是页面级的，通常应用于页面内的数据共享。而对于AppStorage，是应用级的全局状态共享。 AppStorage是在应用启动

    2024年02月20日
    浏览(51)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 一）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 一）

    ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在 TypeScript （简称 TS ）生态基础上做了进一步扩展，继承了 TS 的所有特性，是 TS 的超集。因此，在学习 ArkTS 语言之前，建议开发者具备 TS 语言开发能力。 当前， ArkTS 在 TS 的基础上主要扩展了如下能力： 基本语法：

    2024年02月16日
    浏览(68)

  • HarmonyOS鸿蒙基于Java开发: Java UI 动画开发指导

    目录 帧动画 数值动画 属性动画 动画集合 多个动画同时开始 多个动画按顺序逐个执行 多个动画顺序执行和同时执行并存 动画是组件的基础特性之一，精心设计的动画使UI变化更直观，有助于改进应用程序的外观并改善用户体验。

    2024年02月21日
    浏览(48)
  • HarmonyOS学习路之开发篇—流转

    HarmonyOS学习路之开发篇—流转

    随着全场景多设备生活方式的不断深入，用户拥有的设备越来越多，每个设备都能在适合的场景下提供良好的体验，例如：手表可以提供及时的信息查看能力，电视可以带来沉浸的观影体验。但是，每个设备也有使用场景的局限，例如：在电视上输入文本相对手机来说是非常

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包