# Flubber

**Repository Path**: hihopeorg/Flubber

## Basic Information

- **Project Name**: Flubber
- **Description**: 制作动画的优雅解决方案
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-02
- **Last Updated**: 2021-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flubber

**本项目是基于开源项目Flubber进行ohos化的移植和开发的，可以通过项目标签以及github地址( https://github.com/Appolica/Flubber  )追踪到原项目版本**

## 项目介绍

- 项目名称：Flubber
- 所属系列：ohos的第三方组件适配移植
- 功能：Flubber是一个制作动画的优雅解决方案。
- 项目移植状态：完成
- 调用差异：无
- 项目作者和维护人：hihope
- 联系方式：hihope@hoperun.com
- 原项目Doc地址：https://github.com/Appolica/Flubber
- 原项目基线版本：v1.0.1, sha1:73c0ede38a4a6268d3352450b276a9c427655f02
- 编程语言：Java
- 外部库依赖：无

## 安装教程

##### 方法一：

1. 下载源码编译har包flubber.har。
2. 启动 DevEco Studio，将编译的har导入工程目录“entry->libs”下。
3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下har/jar包的引用。

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
}
```

4. 在导入的har包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，并点击“OK”即引用成功。

##### 方法二：

  1. 在工程的build.gradle的allprojects中，添加HAR所在的Maven仓地址:

```
 repositories {
     maven {
         url 'http://106.15.92.248:8081/repository/Releases/' 
     }
 }
```

  2. 在应用模块的build.gradle的dependencies闭包中，添加如下代码:

```
 dependencies {
     implementation 'com.appolica.ohos:flubber:1.0.0'
 }
```

## 效果展示

![morph](./gifs/morph.gif)![zoomin](./gifs/zoomin.gif)![zoomout](./gifs/zoomout.gif)  

![wobble](./gifs/wobble.gif)![wobblefadein](./gifs/wobblefadein.gif)![fallshake](./gifs/fallshake.gif)

## 使用说明

Flubber是一个制作动画的优雅解决方案。
该库的灵感来自iOS版的Spring库。它支持Spring中存在的所有动画、曲线和属性。
该库提供了一个名为Spring的插值器，它类似于iOS CASpringAnimation。

#### Example
1. 添加要设置动画的组件: 
```xml
    <Text
        ohos:id="$+id:text"
        ohos:center_in_parent="true"
        ohos:text="Hello World!"
        ohos:text_alignment="center"/>
```

2. 获取组件：
```java
Component component = findComponentById(ResourceTable.Id_text);
```

3. 将flubber动画设置到对应的组件上（点击组件时）:
```java
component.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        Flubber.with()
                .animation(Flubber.AnimationPreset.SLIDE_UP) // Slide up animation
                .repeatCount(1)                              // Repeat once
                .duration(1000)                              // Last for 1000 milliseconds(1 second)
                .createFor(component)                        // Apply it to the view
                .start();                                    // Start it now
    }
});
```

#### `enum AnimationPreset`
目前支持的动画类型枚举，具体如下：

* `SLIDE_LEFT`
* `SLIDE_RIGHT`
* `SLIDE_DOWN`
* `SLIDE_UP`
* `SQUEEZE_LEFT`
* `SQUEEZE_RIGHT`
* `SQUEEZE_DOWN`
* `SQUEEZE_UP`
* `FADE_IN`
* `FADE_OUT`
* `FADE_OUT_IN`
* `FADE_IN_LEFT`
* `FADE_IN_RIGHT`
* `FADE_IN_DOWN`
* `FADE_IN_UP`
* `ZOOM_IN`
* `ZOOM_OUT`
* `FALL`
* `SHAKE`
* `POP`
* `FLIP_X`
* `FLIP_Y`
* `MORPH`
* `SQUEEZE`
* `FLASH`
* `WOBBLE`
* `SWING`
* `ALPHA`
* `ROTATION`
* `TRANSLATION_X`
* `TRANSLATION_Y`
* `SCALE_X`
* `SCALE_Y`

#### `enum Curve`
目前动画支持的曲线，具体如下：

* `BZR_EASE_IN`
* `BZR_EASE_OUT`
* `BZR_EASE_IN_OUT`
* `BZR_LINEAR`
* `BZR_SPRING`
* `BZR_EASE_IN_SINE`
* `BZR_EASE_OUT_SINE`
* `BZR_EASE_IN_OUT_SINE`
* `BZR_EASE_IN_QUAD`
* `BZR_EASE_OUT_QUAD`
* `BZR_EASE_IN_OUT_QUAD`
* `BZR_EASE_IN_CUBIC`
* `BZR_EASE_OUT_CUBIC`
* `BZR_EASE_IN_OUT_CUBIC`
* `BZR_EASE_IN_QUART`
* `BZR_EASE_OUT_QUART`
* `BZR_EASE_IN_OUT_QUART`
* `BZR_EASE_IN_QUINT`
* `BZR_EASE_OUT_QUINT`
* `BZR_EASE_IN_OUT_QUINT`
* `BZR_EASE_IN_EXPO`
* `BZR_EASE_OUT_EXPO`
* `BZR_EASE_IN_OUT_EXPO`
* `BZR_EASE_IN_CIRC`
* `BZR_EASE_OUT_CIRC`
* `BZR_EASE_IN_OUT_CIRC`
* `BZR_EASE_IN_BACK`
* `BZR_EASE_OUT_BACK`
* `BZR_EASE_IN_OUT_BACK`
* `SPRING`
* `LINEAR`

## 版本迭代

- 1.0.0
- 现支持以下功能：
  1. 支持使用不同的动画
  2. 支持使用不同的时间曲线
  3. 动画支持设置duration
  4. 动画支持设置delay
  5. 动画支持设置force值
  6. 动画支持设置velocity
  7. 动画支持设置damping
  8. 动画支持设置scale

## 版权和许可信息

- Apache License 2.0