# MarqueeView

**Repository Path**: licq_workspace/MarqueeView

## Basic Information

- **Project Name**: MarqueeView
- **Description**: 支持各种布局，实现上下左右跑马灯效果
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-04-13
- **Last Updated**: 2021-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MarqueeView
**本项目基于开源项目MarqueeView进行鸿蒙化的移植和开发，可以通过项目标签以及github地址（<https://github.com/gdutxiaoxu/MarqueeView>）追踪到原安卓项目版本**
## 项目介绍
- 项目名称：MarqueeView跑马灯
- 所属系列：鸿蒙的第三方组件适配移植
- 功能：
1. 可以给任何view设置跑马灯效果
2. 支持各种动画，从上而下，从左而右 等，设置动画时长。
3. 支持自定义动画
- 基线版本：release Master
- 项目移植状态：已完成
- 调用差异：无
- 开发版本：sdk5，DevEco Studio2.1 beta3
- 项目作者和维护人：何兴彦
- 联系方式： <hexingyan056@chinasoftinc.com>
- 原项目Doc地址：<https://github.com/gdutxiaoxu/MarqueeView/blob/master/README.md>

## 编程语言

- 编程语言：Java

## 效果图
<img src="image/image.gif"></img>

## 安装教程
1. 下载library的har包library.har（位于 https://gitee.com/chinasoft_ohos/MarqueeView/releases/v0.0.1_alpha ）。
1. 启动 DevEco Studio，将下载的har包，导入工程目录“demo->libs”下。
1. 在moudle级别下的build.gradle文件中添加依赖，在dependencies标签中增加对libs目录下jar包的引用。

```
dependencies {
  implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
}
```
在sdk5，DevEco Studio2.1 beta3下项目可直接运行 如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件， 并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下
## 使用说明
该开源库可以给任何view添加跑马灯效果，您可以随便定义您的view样式，例如：

```xml
        <DirectionalLayout
            ohos:id="$+id:dir_up_and_down"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:alignment="center"
            ohos:orientation="horizontal"
            >
            <Image
                ohos:id="$+id:iv_one"
                ohos:height="25vp"
                ohos:width="25vp"
                ohos:image_src="$media:notice"
                ohos:scale_mode="zoom_center"
                ohos:layout_alignment="vertical_center"
                ohos:left_margin="10vp"/>
            <Text
                ohos:id="$+id:text_one"
                ohos:height="match_parent"
                ohos:width="match_content"
                ohos:left_margin="10vp"
                ohos:text_color="#FFFFFF"
                ohos:text_size="50px"
                />
        </DirectionalLayout>
```
然后在MainAbilitySlice中给该布局绑定动画属性，如下：
```java
  /**
     * 从上进入，从下退出
     */
    private void startUpAnimator() {
        if (upAnimatorGroup != null) {
            upAnimatorGroup.stop();
            upAnimatorGroup = null;
        }
        upAnimatorGroup = AnimationUtils.setAnimator(AnimationUtils.getUpInAnimator(dirUpandDown),
                AnimationUtils.getDownOutAnimator(dirUpandDown));
        upAnimatorGroup.setLoopedListener(new Animator.LoopedListener() {
            @Override
            public void onRepeat(Animator animator) {
                pos1++;
                if (pos1 >= tips1.size()) {
                    pos1 = 0;
                }
                setData(textOne, tips1.get(pos1));
            }
        });
        upAnimatorGroup.start();
    }
```
这样就实现了给某一个view绑定了动画跑马灯效果。
动画工具类的具体实现方式，是在AnimationUtils中，具体代码如下，如果需要根据业务扩展动画，可以在该工具类中编写：

```java
/**
 * 动画工具类
 * 列表项

 *  * @author:Hexy
 * @since 2021-03-24
 */
public class AnimationUtils {
    /**
     * 进入时间
     */
    public static final int ENTRY_TIME = 300;

    /**
     * 停留保持时间
     */
    public static final int MAINTAIN_TIME = 3000;

    /**
     * 持续时间
     */
    public static final int DURATION_TIME = 200;

    /**
     * 起止位置1
     */
    public static final int START_STOP_POSITION1 = 50;

    /**
     * 起止位置2
     */
    public static final int START_STOP_POSITION2 = 100;

    private static AnimatorProperty upInAnimator;
    private static AnimatorProperty downOutAnimator;

    private static AnimatorProperty downInAnimator;
    private static AnimatorProperty upOutAnimator;

    private static AnimatorProperty leftInAnimator;
    private static AnimatorProperty rightOutAnimator;

    private static AnimatorProperty rightInAnimator;
    private static AnimatorProperty leftOutAnimator;

    private AnimationUtils() {
    }

    /**
     * 从上进入
     *
     * @param component
     * @return 进入动画
     */
    public static AnimatorProperty getUpInAnimator(Component component) {
        upInAnimator = component.createAnimatorProperty();
        return upInAnimator.moveFromY(-START_STOP_POSITION1).moveToY(0).alphaFrom(0).alpha(1)
                .setDelay(ENTRY_TIME).setDuration(DURATION_TIME);
    }

    /**
     * 从下退出
     *
     * @param component
     * @return 退出动画
     */
    public static AnimatorProperty getDownOutAnimator(Component component) {
        downOutAnimator = component.createAnimatorProperty();
        return downOutAnimator.moveFromY(0).moveToY(START_STOP_POSITION1).alphaFrom(1).alpha(0)
                .setDelay(MAINTAIN_TIME).setDuration(DURATION_TIME);
    }

    /**
     * 从下进入
     *
     * @param component
     * @return 返回从下进入的动画
     */
    public static AnimatorProperty getDownInAnimator(Component component) {
        downInAnimator = component.createAnimatorProperty();
        return downInAnimator.moveFromY(START_STOP_POSITION1).moveToY(0).alphaFrom(0).alpha(1)
                .setDelay(ENTRY_TIME).setDuration(DURATION_TIME);
    }

    /**
     * 从上退出
     *
     * @param component
     * @return 返回从上退出的动画
     */
    public static AnimatorProperty getUpOutAnimator(Component component) {
        upOutAnimator = component.createAnimatorProperty();
        return upOutAnimator.moveFromY(0).moveToY(-START_STOP_POSITION1).alphaFrom(1).alpha(0)
                .setDelay(MAINTAIN_TIME).setDuration(DURATION_TIME);
    }

    /**
     * 从左进入
     *
     * @param component
     * @return 返回从左进入的动画
     */
    public static AnimatorProperty getLeftInAnimator(Component component) {
        leftInAnimator = component.createAnimatorProperty();
        return leftInAnimator.moveFromX(-START_STOP_POSITION2).moveToX(0).alphaFrom(0).alpha(1)
                .setDelay(ENTRY_TIME).setDuration(DURATION_TIME);
    }

    /**
     * 从右退出
     *
     * @param component
     * @return 返回从右退出的动画
     */
    public static AnimatorProperty getRightOutAnimator(Component component) {
        rightOutAnimator = component.createAnimatorProperty();
        return rightOutAnimator.moveFromX(0).moveToX(START_STOP_POSITION2).alphaFrom(1).alpha(0)
                .setDelay(MAINTAIN_TIME).setDuration(DURATION_TIME);
    }

    /**
     * 从右进入
     *
     * @param component
     * @return 返回从右进入的动画
     */
    public static AnimatorProperty getRightInAnimator(Component component) {
        rightInAnimator = component.createAnimatorProperty();
        return rightInAnimator.moveFromX(START_STOP_POSITION2).moveToX(0).alphaFrom(0).alpha(1)
                .setDelay(ENTRY_TIME).setDuration(DURATION_TIME);
    }

    /**
     * 从左退出
     *
     * @param component
     * @return 返回从左退出的动画
     */
    public static AnimatorProperty getLeftOutAnimator(Component component) {
        leftOutAnimator = component.createAnimatorProperty();
        return leftOutAnimator.moveFromX(0).moveToX(-START_STOP_POSITION2).alphaFrom(1).alpha(0)
                .setDelay(MAINTAIN_TIME).setDuration(DURATION_TIME);
    }

    /**
     * 设置动画组（进入动画，退出动画）
     *
     * @param animators
     * @return 动画组
     */
    public static AnimatorGroup setAnimator(Animator... animators) {
        AnimatorGroup set = new AnimatorGroup();
        set.runSerially(animators);
        set.setLoopedCount(AnimatorGroup.INFINITE);
        return set;
    }
}
```
## 测试信息

 * CodeCheck代码测试无异常

 * CloudTest代码测试无异常

 * 火绒安全病毒安全检测通过

 * 当前版本demo功能与安卓原组件基本无差异

 * 测试员：李姗姗

## 版本迭代
- v0.0.1_alpha

## 版权和许可信息
-  Apache License 2.0