android粒子特效,GitHub - heyl1989/Grav: Configurable animations based on points(Android 粒子动画效果,做个有逼格的 Ap...

Grav

68747470733a2f2f6170692e62696e747261792e636f6d2f7061636b616765732f676c6f6d61647269616e2f6d6176656e2f526f616452756e6e65722f696d616765732f646f776e6c6f61642e737667

68747470733a2f2f696d672e736869656c64732e696f2f686578706d2f6c2f706c75672e73766768747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d616e64726f69642d677265656e2e737667

grav.png%20

Grav is a library for android which allow you to make multiple animations based

on points.

wave.gif%20

login.gif%20

path.gif%20

falcon.gif%20

grav.gif%20

robot.gif%20

How to use it

The library is composed of generators, each generator takes care of one thing.

Composing different generators you can obtain different results.

There are different kind of generators:

Point generator

Grav generator

Color generator

Animation generator

Point generator

The point generator is the class that creates the locations of the points that will be drawn using a Grav Generator.

In order to use it you need to set the attribute:

app:pointGenerator="classname"

The first thing you need is a Point generator, the are 3 generators available:

Regular point generator

Generate points based on a cell and a variance.

app:pointGenerator="com.github.glomadrian.grav.generator.point.RegularPointGenerator"

app:regular_cell_size="200"

app:regular_variance="20"

(Using in combination with GravBallGeneartor)

regular_generator.png%20

Circular point generator

Generate points based on a cell and a variance in a circular shape.

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

app:regular_cell_size="200"

app:regular_variance="200"

(Using in combination with GravBallGeneartor)

circular_generator.png

Percent point generator

Generate the points based on percent locations array.

app:pointGenerator="com.github.glomadrian.grav.generator.point.PercentPointGenerator"

app:percent_points_array="@array/walla_points_percent_points"

Inside arrays.xml each pair of items represents a point in the view, which is defined by a width percent and a height percent.

10

60

8

30

25

10

(Using in combination with GravBallGeneartor)

percent_generator.png%20

Grav Generator

Grav generator is the piece in charge of draw every point previously generated.

To use you need to set the attribute:

app:gravGenerator="classname"

There are two Grav Generator available

Ball generator

Draws a ball.

Ball sizes can be generated randomly within a range using the following attributes:

app:gravGenerator="com.github.glomadrian.grav.generator.grav.BallGenerator"

app:ball_from_size="3dp"

app:ball_to_size="16dp"

ball_size_range.png%20

Rectangle generator

Draws rectangles.

Size of the rectangles can be changed using the following attributes:

app:gravGenerator="com.github.glomadrian.grav.generator.grav.RectangleGenerator"

app:rectangle_width="15dp"

app:rectangle_height="10dp"

rectangle_grav.png%20

Color generator

Decides how the Grav is painted.

To use you need to set the attribute:

appcolorGenerator="classname"

There are two Color Generator available.

Single color generator

Paint in one single color.

app:colorGenerator="com.github.glomadrian.grav.generator.paint.SingleColorGenerator"

app:single_color="@color/colorPrimary"

Array color generator

Paint using array of colors

app:colorGenerator="com.github.glomadrian.grav.generator.paint.ArrayColorGenerator"

app:array_colors="@array/Spectral"

ball_color.png%20

Animation generator

The animation generator takes care of the position, size and properties animation. The animation generator can be one or an array of animation generators.

Single animation generator

To use you need to set the attribute:

app:animationGenerator="classname"

Array animation generator

To use you need to set the attribute:

app:animationGenerators="@array/array_reference"

com.github.glomadrian.grav.generator.animation.PathAnimator

com.github.glomadrian.grav.generator.animation.BallSizeAnimator

Shake animator

Moves the Grav within a range of values.

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"

shake_anim.gif%20

Side to side animator

Aniamtes the translation of the Grav to a different side.

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"

Also you can use a interpolator.

side_to_side_interpolator="interpolator class"

side_to_side.gif%20

Alpha animator

Applies an alpha animation to a Grav.

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

Animates the size of the ball.

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"

size_to_size.gif%20

Path animator

The path animator moves the grav following a path.

The path (sample)

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

1062

1062

Using 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"

path_animator.gif%20

XML Samples

The full samples can be found in the demo app source code.

wave.gif%20

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"

/>

login.gif%20

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"

/>

falcon.gif%20

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"

/>

robot.gif%20

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"

/>

Attributions

Thanks to @manolovn for Trianglify where I obtained the point generators.

Thanks to @jlmd for the corrections made to this Readme

For Gradle

Add repository

repositories {

maven {

url "http://dl.bintray.com/glomadrian/maven"

}

}

Add dependency

compile 'com.github.glomadrian:Grav:1.1'

Developed By

Adrián García Lomas - glomadrian@gmail.com

License

Copyright 2017 Adrián García Lomas

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值