Grav：各种各样的粒子动画

编辑推荐：稀土掘金，这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎，想成为全栈工程师的朋友不要错过！

Grav是一个可以实现各种各样粒子动画的库，地址：https://github.com/glomadrian/Grav 。

下面是其文档的简单翻译。

这个库由几个generator组成，每个generator负责一件事情。不同的generator组合可以做出不同的效果。

有以下几个generator：

• Point generator

• Grav generator

• Color generator

• Animation generator

Point generator

point generator制造出粒子的分布位置，通过如下属性设置point generator：

app:pointGenerator="classname"

有三种point generator可用：

Regular point generator

基于单位和方差生成粒子。

app:pointGenerator="com.github.glomadrian.grav.generator.point.RegularPointGenerator"
app:regular_cell_size="200"
app:regular_variance="20"

(和 GravBallGeneartor一起使用)

Circular point generator

基于一个圆内的单位和方差生成粒子。

app:pointGenerator="com.github.glomadrian.grav.generator.point.CircularPointGenerator"
app:regular_cell_size="200"
app:regular_variance="200"

(和 GravBallGeneartor一起使用)

Percent point generator

根据百分比数组产生粒子。

app:pointGenerator="com.github.glomadrian.grav.generator.point.PercentPointGenerator"
app:percent_points_array="@array/walla_points_percent_points"

arrays.xml中每组item代表一个点，其中一个item定义宽度上的百分比，另一个定义高度上的百分比：

<integer-array name="sample_points_percent_points">
   <item>10</item>
   <item>60</item>
 
   <item>8</item>
   <item>30</item>
 
   <item>25</item>
   <item>10</item>
 </integer-array>

(和GravBallGeneartor一起使用)

Grav Generator

Grav generator负责绘制每个点。通过设置如下属性来使用它：

app:gravGenerator="classname"

有两种Grav Generator可用

Ball generator

绘制一个球。

可以使用下面的属性让球的大小在一个范围内随机生成：

app:gravGenerator="com.github.glomadrian.grav.generator.grav.BallGenerator"
app:ball_from_size="3dp"
app:ball_to_size="16dp"

Rectangle generator

绘制矩形。

可以使用下面的属性来改变矩形的大小：

app:gravGenerator="com.github.glomadrian.grav.generator.grav.RectangleGenerator"
app:rectangle_width="15dp"
app:rectangle_height="10dp"

Color generator

定义Grav是如何涂色的。

你需要设置如下属性来使用它：

appcolorGenerator="classname"

有两种 Color Generator可用。

Single color generator

绘制单一的颜色。

app:colorGenerator="com.github.glomadrian.grav.generator.paint.SingleColorGenerator"
app:single_color="@color/colorPrimary"

Array color generator

使用颜色数组涂色

app:colorGenerator="com.github.glomadrian.grav.generator.paint.ArrayColorGenerator"
app:array_colors="@array/Spectral"

Animation generator

 animation generator负责位置，大小以及属性的动画。 animation generator 可以是一个animation generator或者animation generator数组。

Single animation generator

通过下面的属性设置：

app:animationGenerator="classname"

Array animation generator

通过下面的属性设置：

app:animationGenerators="@array/array_reference"
 
<string-array name="array_reference">
  <item>com.github.glomadrian.grav.generator.animation.PathAnimator</item>
  <item>com.github.glomadrian.grav.generator.animation.BallSizeAnimator</item>
</string-array>

Shake animator

在一个区间内移动

app:animationGenerator=" com.github.glomadrian.grav.generator.animation.ShakeAnimator"
//Min animation duration
app:shake_min_duration="1000"
//Max animation duration
app:shake_max_duration="3000"
//Direction horizontal or vertical
app:shake_direction="horizontal"
//The size of the movement
app:shake_variance="15dp"

Side to side animator

单位的移动从一边到另一边

app:animationGenerator="com.github.glomadrian.grav.generator.animation.SideToSideAnimator"
//Min animation duration
app:side_to_side_min_duration="1000"
//Max animation duration
app:side_to_side_max_duration="3000"
//Direction leftToRight | rightToLeft | upToDown | downToUp
app:side_to_side_direction="leftToRight"

你也可以设置一个插值器

side_to_side_interpolator="interpolator class"

Alpha animator

对单位使用渐变动画

app:animationGenerator="com.github.glomadrian.grav.generator.animation.AlphaAnimator"
//Min animation duration
app:alpha_min_duration="1000"
//Max animation duration
app:alpha_max_duration="3000"
//From and to in a range (0-255)
app:alpha_from="0"
app:alpha_to="255"

Ball size animator

对球的大小进行动画。

app:animationGenerator="com.github.glomadrian.grav.generator.animation.BallSizeAnimator"
//Min animation duration
app:ball_size_min_duration="1000"
//Max animation duration
app:ball_size_max_duration="3000"
app:ball_size_from_size="3dp"
app:ball_size_to_size="8dp"

Path animator

按照一个路径移动单位。

The path (sample)

<string name="circle">
M527.023,71.8233 C780.213,71.8233,985.464,277.075,985.464,530.265
C985.464,783.455,780.213,988.707,527.023,988.707
C273.832,988.707,68.5809,783.455,68.5809,530.265
C68.5809,277.075,273.832,71.8233,527.023,71.8233 Z
</string>
<integer name="circle_original_width">1062</integer>
<integer name="circle_original_height">1062</integer>

使用 path animator

app:animationGenerator="com.github.glomadrian.grav.generator.animation.PathAnimator"
//Variance is the random margin given to the grav
app:path_variance_from="1dp"
app:path_variance_to="20dp"
//Min animation duration
app:path_min_duration="2000"
//Max animation duration
app:path_max_duration="2300"
//String that define the path
app:path="@string/circle"
app:path_original_width="@integer/circle_original_width"
app:path_original_height="@integer/circle_original_height"

XML 示例

完整的例子可以在源码的demo app中找到。

<com.github.glomadrian.grav.GravView
     android:id="@+id/grav"
     android:layout_centerInParent="true"
     android:layout_width="400dp"
     android:layout_height="400dp"
     app:colorGenerator="com.github.glomadrian.grav.generator.paint.ArrayColorGenerator"
     app:array_colors="@array/red"
     app:pointGenerator="com.github.glomadrian.grav.generator.point.RegularPointGenerator"
     app:regular_cell_size="150"
     app:regular_variance="100"
     app:gravGenerator="com.github.glomadrian.grav.generator.grav.BallGenerator"
     app:ball_size_from_size="3dp"
     app:ball_size_to_size="6dp"
     app:animationGenerators="@array/path"
     app:path_variance_from="-10dp"
     app:path_variance_to="12dp"
     app:path="@string/circle"
     app:path_original_width="@integer/circle_original_width"
     app:path_original_height="@integer/circle_original_height"
     app:path_min_duration="5000"
     app:path_max_duration="6000"
     />

<com.github.glomadrian.grav.GravView
     android:id="@+id/grav"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_centerInParent="true"
     app:colorGenerator="com.github.glomadrian.grav.generator.paint.ArrayColorGenerator"
     app:array_colors="@array/bubble"
     app:pointGenerator="com.github.glomadrian.grav.generator.point.RegularPointGenerator"
     app:regular_cell_size="300"
     app:regular_variance="200"
     app:gravGenerator="com.github.glomadrian.grav.generator.grav.BallGenerator"
     app:ball_from_size="10dp"
     app:ball_to_size="20dp"
     app:animationGenerators="@array/BubbleAnimations"
     app:side_to_side_min_duration="10000"
     app:side_to_side_max_duration="10000"
     app:side_to_side_direction="leftToRight"
     app:shake_direction="vertical"
     app:shake_min_duration="10000"
     app:shake_max_duration="20000"
     app:shake_variance="500dp"
    />

<com.github.glomadrian.grav.GravView
      android:id="@+id/grav"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:colorGenerator="com.github.glomadrian.grav.generator.paint.ArrayColorGenerator"
      app:array_colors="@array/falcon"
      app:pointGenerator="com.github.glomadrian.grav.generator.point.RegularPointGenerator"
      app:regular_cell_size="100"
      app:regular_variance="200"
      app:gravGenerator="com.github.glomadrian.grav.generator.grav.RectangleGenerator"
      app:rectangle_width="15dp"
      app:rectangle_height="2dp"
      app:animationGenerators="@array/FalconAnimations"
      app:side_to_side_min_duration="400"
      app:side_to_side_max_duration="800"
      app:side_to_side_direction="rightToLeft"
      app:shake_variance="5dp"
      app:shake_direction="vertical"
      />

<com.github.glomadrian.grav.GravView
    android:id="@+id/grav"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:colorGenerator="com.github.glomadrian.grav.generator.paint.OneColorGenerator"
    app:single_color="#FFF"
    app:pointGenerator="com.github.glomadrian.grav.generator.point.PercentPointGenerator"
    app:ball_from_size="2dp"
    app:ball_to_size="5dp"
    app:animationGenerators="@array/WallaIcon"
    app:alpha_from="100"
    app:alpha_to="200"
    app:alpha_min_duration="1600"
    app:alpha_max_duration="3000"
    app:shake_direction="vertical"
    app:shake_variance="3dp"
    app:shake_min_duration="1100"
    app:shake_max_duration="3500"
    app:percent_points_array="@array/walla_points_percent_points"
    app:gravGenerator="com.github.glomadrian.grav.generator.grav.BallGenerator"
    />