# MarqueeView

**Repository Path**: herotculb/MarqueeView

## Basic Information

- **Project Name**: MarqueeView
- **Description**: No description available
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-04-25
- **Last Updated**: 2021-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MarqueeView
## 项目介绍
- 项目名称：MarqueeView
- 所属系列：openharmony的第三方组件适配移植
- 功能：
1. 可以给任何view设置跑马灯效果
2. 支持各种动画，从上而下，从左而右 等，设置动画时长。
3. 支持自定义动画
- 基线版本：release 0.1.20
- 项目移植状态：已完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio2.2 Beta1

## 编程语言

- 编程语言：Java

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

## 安装教程

1.在项目根目录下的build.gradle文件中，
 ```
 allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/snapshots/'
        }
    }
 }
```
2.在entry模块的build.gradle文件中，
 ```
 dependencies {
    implementation('com.gitee.chinasoft_ohos:MarqueeView:0.0.2-SNAPSHOT')
    ......  
 }
```

在sdk6，DevEco Studio2.2 Beta1下项目可直接运行 如无法运行，删除项目.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功能与原组件基本无差异


## 版本迭代
0.0.2-SNAPSHOT