当前位置： 正文

鸿蒙 Animation 动画的各种用法教程

4周前 教程 60

前言：

各位同学大家好 ，有段时间没有给大家更新文章了，最近在学习鸿蒙开发 今天要讲的内容是动画。跟安卓里面的动画有点相似但是也有不同的地方 那么我们废话不多说正式开始

准备工作

华为鸿蒙系统开发初体验 ：https://www.jianshu.com/p/f94c847c7fdc

: 效果图

image.png

image.png

image.png

image.png

image.png

image.png

具体实现：

  • 帧动画

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

    1. 在Project窗口，打开“entry > src > main > resources > base > media”，添加一系列图片至media目录下。   image.png
    1. 在graphic目录下，新建“animation_element.xml”文件，在XML文件中使用animation-list标签来配置图片资源，duration用来设置显示时长，单位为毫秒。oneshot表示是否只播放一次。
  • 3 然后我们在AnimationFrameAbilitySlice 中来实现帧动画
package com.example.animation_demo.slice;

import com.example.animation_demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.element.FrameAnimationElement;

public class AnimationFrameAbilitySlice extends AbilitySlice {
    private FrameAnimationElement frameAnimationElement;
    private DirectionalLayout componentContainer;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_animation_frame);
        initAnimator();
        initComponents();
    }
    private void initAnimator() {
        //加载动画资源，生成动画对象。
        frameAnimationElement = new FrameAnimationElement(getContext(), ResourceTable.Graphic_animation_element);
    }
    private void initComponents() {
        componentContainer = (DirectionalLayout) findComponentById(ResourceTable.Id_frame_container);
        Component startButton = findComponentById(ResourceTable.Id_start_animation_button);
        startButton.setClickedListener(this::startAnimation);
        Component component = new Component(getContext());
        component.setWidth(500);
        component.setHeight(500);
        component.setBackground(frameAnimationElement);
        componentContainer.addComponent(component);
    }
    private void startAnimation(Component component) {
        frameAnimationElement.start();
    }
    @Override
    protected void onStop() {
        componentContainer.removeAllComponents();
    }
}

我们通过 FrameAnimationElement来加载动画资源 然后我们通过 DirectionalLayout来装载我们的 component（用来显示动画的组件） 最后我们通过 frameAnimationElement.start(); 开始播放动画
我们需要在stop生命周期方法里面 frameAnimationElement.stop();来停止动画播放

动画效果如图所示：

0000000000011111111.20210729150034.63146485264099158326299374564633.gif

  • 数值动画

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

我们在布局文件中写了一个 Component 用来显示动画的控件和几个button用来测试

布局效果

image.png

我们定义一个方法通过传入 curvyType 动画类型来方便不同数值所显示动画效果类型

 private void startValueAnimator(int curvyType) {
      //创建数值动画对象
        AnimatorValue animator = new AnimatorValue();
       //动画时长 
         animator.setDuration(2000);
        //播放前的延迟时间
        animator.setDelay(0);
       //循环次数
        animator.setLoopedCount(1);
      //动画的播放类型
        animator.setCurveType(curvyType);
     //设置动画过程
        animator.setValueUpdateListener(
                (animatorValue, value) -> valueAnimationImage.setContentPosition((int) (700 * value),
                        valueAnimationImage.getContentPositionY()));
      //开始启动动画
        animator.start();
    }

具体调用

 package com.example.animation_demo.slice;
import com.example.animation_demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.Component;
public class AnimatorValueAbilitySlice extends AbilitySlice {
    private Component valueAnimationImage;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_animator_value);
        initComponents();
    }

    private void initComponents() {
        valueAnimationImage = findComponentById(ResourceTable.Id_value_animation_image);
        Component springButton = findComponentById(ResourceTable.Id_animator_spring_button);
        springButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.SPRING));
        Component anticipateButton = findComponentById(ResourceTable.Id_animator_anticipate_button);
        anticipateButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.ANTICIPATE));
        Component cycleButton = findComponentById(ResourceTable.Id_animator_cycle_button);
        cycleButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.CYCLE));
        Component overshootButton = findComponentById(ResourceTable.Id_animator_overshoot_button);
        overshootButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.OVERSHOOT));
        Component smoothStepButton = findComponentById(ResourceTable.Id_animator_smoothStep_button);
        smoothStepButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.SMOOTH_STEP));
        Component cubicHermit = findComponentById(ResourceTable.Id_animator_cubic_button);
        cubicHermit.setClickedListener(component -> startValueAnimator(Animator.CurveType.CUBIC_HERMITE));
    }

    private void startValueAnimator(int curvyType) {
        AnimatorValue animator = new AnimatorValue();
        animator.setDuration(2000);
        animator.setDelay(0);
        animator.setLoopedCount(1);
        animator.setCurveType(curvyType);
        animator.setValueUpdateListener(
                (animatorValue, value) -> valueAnimationImage.setContentPosition((int) (700 * value),
                        valueAnimationImage.getContentPositionY()));
        animator.start();
    }
}

属性动画

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

布局预览效果

image.png

我们在布局代码中写一个 Component 组件用来处理属性动画显示然后 写了4个button 来触发各种不同动画的展示

  • Scale 效果
    private void startScaleAnimation(Component component) {
        propertyAnimationImage.setScale(1, 1);
        AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
        animator.setCurveType(Animator.CurveType.ANTICIPATE_OVERSHOOT);
        animator.scaleY(0.7f);
        animator.scaleX(1.5f);
        animator.setDuration(2000);
        animator.setLoopedCount(2);
        animator.start();
    }
  • Rotate 效果
    private void startRotateAnimation(Component component) {
        propertyAnimationImage.setRotation(0);
        AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
        animator.setCurveType(Animator.CurveType.ANTICIPATE_OVERSHOOT);
        animator.rotate(360);
        animator.setDuration(2000);
        animator.setLoopedCount(2);
        animator.start();
    }
  • Alpha 效果
    private void startAlphaAnimation(Component component) {
        propertyAnimationImage.setAlpha(1);
        AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
        animator.alpha(0.2f);
        animator.setDuration(1000);
        animator.setLoopedCount(2);
        animator.start();
    }
  • Translate 效果
 private void startTranslateAnimation(Component component) {
        AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
        animator.moveToX(0);
        animator.setDuration(1000);
        animator.setLoopedCount(2);
        animator.start();
    }

动画集合

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

布局效果

image.png

布局代码中我们写了4个 Component 来处理动画集合效果 以及配合写了3个button 来触发不同组合动画的效果

  • 1动画组按照指定添加顺序来执行
    private void startBuilderAnimator(Component component) {
        AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();
        animatorGroupBuilder.addAnimators(targetAnimator1)
                .addAnimators(targetAnimator2, targetAnimator3)
                .addAnimators(targetAnimator4);
        animatorGroup.start();
    }
  • 2动画组里面动画同时执行
    private void startParallelAnimator(Component component) {
        animatorGroup.runParallel(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
        animatorGroup.start();
    }
  • 3动画组里面动画按顺序执行
    private void startSeriallyAnimator(Component component) {
        animatorGroup.runSerially(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
        animatorGroup.start();
    }

完整代码

package com.example.animation_demo.slice;

import com.example.animation_demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorGroup;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.Component;

public class AnimatorGroupAbilitySlice extends AbilitySlice {
    private AnimatorValue targetAnimator1;

    private AnimatorValue targetAnimator2;

    private AnimatorValue targetAnimator3;

    private AnimatorValue targetAnimator4;

    private AnimatorGroup animatorGroup;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_animator_group);
        initComponents();
        animatorGroup = new AnimatorGroup();
    }

    private void initComponents() {
        Component targetImage1 = findComponentById(ResourceTable.Id_target_image1);
        targetAnimator1 = getValueAnimator(targetImage1);
        Component targetImage2 = findComponentById(ResourceTable.Id_target_image2);
        targetAnimator2 = getValueAnimator(targetImage2);
        Component targetImage3 = findComponentById(ResourceTable.Id_target_image3);
        targetAnimator3 = getValueAnimator(targetImage3);
        Component targetImage4 = findComponentById(ResourceTable.Id_target_image4);
        targetAnimator4 = getValueAnimator(targetImage4);

        findComponentById(ResourceTable.Id_serially_animator_button).setClickedListener(this::startSeriallyAnimator);
        findComponentById(ResourceTable.Id_parallel_animator_button).setClickedListener(this::startParallelAnimator);
        findComponentById(ResourceTable.Id_builder_animator_button).setClickedListener(this::startBuilderAnimator);
    }

    private void startBuilderAnimator(Component component) {
        AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();
        animatorGroupBuilder.addAnimators(targetAnimator1)
                .addAnimators(targetAnimator2, targetAnimator3)
                .addAnimators(targetAnimator4);
        animatorGroup.start();
    }

    private void startParallelAnimator(Component component) {
        animatorGroup.runParallel(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
        animatorGroup.start();
    }

    private void startSeriallyAnimator(Component component) {
        animatorGroup.runSerially(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
        animatorGroup.start();
    }

    private AnimatorValue getValueAnimator(Component component) {
        AnimatorValue animator = new AnimatorValue();
        animator.setDuration(2000);
        animator.setLoopedCount(0);
        animator.setCurveType(Animator.CurveType.BOUNCE);
        animator.setValueUpdateListener(
                (animatorValue, value) -> component.setContentPosition(component.getContentPositionX(),
                        (int) (800 * value)));
        return animator;
    }
}

到此鸿蒙的集中常用动画已经讲完了

阅读全文
资源下载
下载价格免费
立即下载
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21634，转载请注明出处。
赏 0

猜你喜欢

4周前 97

4周前 101

4周前 106

4周前 67

4周前 41

4周前 73

评论0

取消

首页 发现 VIP 我的
显示验证码
没有账号？注册  忘记密码？