Skip to content

Commit 8368167

Browse files
committed
Update README.md
1 parent 299c13e commit 8368167

File tree

1 file changed

+60
-8
lines changed

1 file changed

+60
-8
lines changed

README.md

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ Circle based animations for Android (min. API 11)
88
Currently implemented:
99
- Circular reveal
1010
- Circular transform
11+
- <a href="http://material-design.storage.googleapis.com/videos/animation-responsive-interation-radialReact-example_large_xhdpi.webm">Radial reaction</a>
1112

12-
Planned:
13-
- <a href="http://material-design.storage.googleapis.com/videos/animation-responsive-interation-radialReact-example_large_xhdpi.webm">Radial action</a>
14-
15-
|**Reveal:**<a href="https://youtu.be/g83nwbi33c0">YouTube</a>|**Transform:**<a href="https://youtu.be/96eBHwWxTiA">YouTube</a>|
16-
|---------------|-----------|
17-
|<img src="http://i.imgur.com/pT0UqHA.gif" alt="Reveal DEMO" width="240" height="400" border="10" />|<img src="http://i.imgur.com/QeaoLpD.gif" alt="Transform DEMO" width="240" height="400" border="10" />|
13+
|**Reveal:**<a href="https://youtu.be/g83nwbi33c0">YouTube</a>|**Transform:**<a href="https://youtu.be/96eBHwWxTiA">YouTube</a>|**Radial reaction:**<a href="https://youtu.be/jv6fs12UJHo">YouTube</a>|
14+
|---------------|-----------|-----------|
15+
|<img src="http://i.imgur.com/pT0UqHA.gif" alt="Reveal DEMO" width="240" height="400" border="10" />|<img src="http://i.imgur.com/QeaoLpD.gif" alt="Transform DEMO" width="240" height="400" border="10" />|<img src="http://i.imgur.com/XkPNT4V.gif" alt="Radial reaction DEMO" width="240" height="400" border="10" />|
1816

1917

2018
Sample
@@ -29,6 +27,7 @@ Note
2927

3028
Limitations
3129
-----------
30+
**For reveal and transform:**
3231
- it will never use the native `ViewAnimationUtils.createCircularReveal` method
3332
- currently there is an issue: views with elevation cannot be animated correctly on Lollipop and above.
3433
- workaround A: set the LayerType of the target (or source) view to LayerType.SOFTWARE
@@ -40,6 +39,11 @@ Limitations
4039
| **Reveal** | Software | Hardware |
4140
| **Transform** | Software | Hardware |
4241

42+
**For radial reaction**
43+
- only one reaction can be animated at the same time, in the same `RadialReactionParent`
44+
- only one layout implemented yet: a LinearLayout.
45+
- once an affectedView is reached, it will be removed from the list in the `RadialReactionParent`. If you want to animate multiple times, you have to add the views again. See demo for details.
46+
4347
Usage
4448
------
4549

@@ -51,7 +55,7 @@ For reveal and transform you have to wrap your animated views with a `CircularFr
5155
android:layout_width="match_parent"
5256
android:layout_height="match_parent">
5357

54-
<!-- Put any child views here if you want, it's stock frame layout -->
58+
<!-- Put any child views here if you want, it's stock FrameLayout -->
5559

5660
</hu.aut.utillib.circular.widget.CircularFrameLayout>
5761
```
@@ -85,6 +89,54 @@ animator.start();
8589

8690
```
8791

92+
For radial reaction you have to wrap your views -that are affected by the radial reaction- with a `RadialReactionParent`.
93+
- Wrap your view
94+
- Add a listener to it (this listener will be notified when the invisible circle reaches an affected view)
95+
- Add views to the parent's watchlist by calling `addAffectedView(View v)`
96+
- Create animation and start it
97+
- Get notified when the radial reaction's invisible circle reaches one of the affected view
98+
99+
```xml
100+
<hu.aut.utillib.circular.widget.RadialReactionLinearLayout
101+
android:id="@+id/reaction_parent"
102+
android:layout_width="match_parent"
103+
android:layout_height="match_parent">
104+
105+
<FrameLayout
106+
android:id="@+id/child_1"
107+
android:layout_width="80dp"
108+
android:layout_height="80dp"
109+
android:layout_alignParentTop="true"
110+
android:layout_margin="10dp"
111+
android:background="@color/material_deep_teal_500"
112+
android:visibility="invisible" />
113+
114+
<!-- Put any child views here if you want, it's stock LinearLayout -->
115+
116+
</hu.aut.utillib.circular.widget.RadialReactionLinearLayout>
117+
```
118+
**Radial reaction:**
119+
```java
120+
reactionParent = (RadialReactionParent) view.findViewById(R.id.reaction_parent);
121+
reactionParent.addListener(this);
122+
123+
//add views
124+
reactionParent.addAffectedView(child1);
125+
126+
ObjectAnimator animator = CircularAnimationUtils.createRadialReaction(reactionParent, fab, "action");
127+
animator.setInterpolator(new AccelerateDecelerateInterpolator());
128+
animator.setDuration(1500);
129+
animator.start();
130+
131+
...
132+
133+
@Override
134+
public void onRadialReaction(View affectedView, String action) {
135+
//Do what you want with the view
136+
}
137+
138+
```
139+
88140
How to add dependency
89141
=====================
90142

@@ -104,7 +156,7 @@ then add a library dependency
104156

105157
```groovy
106158
dependencies {
107-
compile 'com.github.AutSoft:CircularTools:1.0.1'
159+
compile 'com.github.AutSoft:CircularTools:1.1.0'
108160
}
109161
```
110162

0 commit comments

Comments
 (0)