Skip to content

Commit cac2868

Browse files
SmartToolFactorySmartToolFactory
committed
add more AVD samples
1 parent ad59c38 commit cac2868

File tree

12 files changed

+929
-11
lines changed

12 files changed

+929
-11
lines changed

‎README.md‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,43 @@ fragment transitions and image to ViewPager transitions and more.
1515
| Ch2-7 Gradient | Ch2-8 Counter TextViews | Ch2-9 Counter SurfaceView |
1616
| ----------|----------------| --------|
1717
| <img src="./screenshots/chapter2_7gradient.gif"/> | <img src="./screenshots/chapter2_8counter_textview.gif"/> | <img src="./screenshots/chapter2_9_counter_surfaceview.gif"/> |
18+
1819
| Ch3-1 Physics | Ch3-2 Scale and Chained | Ch3-3 Fling |
1920
| ----------|----------------| --------|
2021
| <img src="./screenshots/chapter3_1physics_basics.gif"/> | <img src="./screenshots/chapter3_2scale_and_chain.gif"/> | <img src="./screenshots/chapter3_fling_animation.gif"/> |
2122

22-
23+
<br>
2324

2425
* [Tutorial2-1Animated Vector Drawables](https://github.com/SmartToolFactory/Animation-Tutorials/tree/master/Tutorial2-1AnimatedVectorDrawables)
2526
* Tutorials about Vector drawables, AnimatedVectorDrawables, and animation transitions for Animated Drawables
2627

27-
## Coverage
28+
| Ch1-1 Animated Vector Drawables | Ch1-2 State Change | Ch1-3 BottomNavigationBar Icons |
29+
| ----------|----------------| --------|
30+
| <img src="./screenshots/avd_chapter1_1.gif"/> | <img src="./screenshots/avd_chapter1_1.gif"/> | <img src="./screenshots/avd_chapter1_1.gif"/> |
31+
32+
33+
## Physics Based Animations
34+
Physics-based motion is driven by force. Spring force is one such force that guides interactivity and motion. A spring force has the following properties: damping and stiffness. In a spring-based animation, the value and the velocity are calculated based on the spring force that are applied on each frame.
35+
36+
If you'd like your app's animations to slow down in only one direction, consider using a friction-based fling animation instead.
2837

38+
### Build a spring animation
39+
The general steps for building a spring animation for your application are as follows:
2940

30-
## Animations
31-
This section includes different type of animations.
41+
* Add the support library You must add the support library to your project to use the spring animation classes.
42+
* Create a spring animation: The primary step is to create an instance of the SpringAnimation class and set the motion behavior parameters.
43+
* (Optional) Register listeners: Register listeners to watch for animation lifecycle changes and animation value updates.
3244

33-
### Physic Base Animations
45+
**Note:** Update listener should be registered only if you need per-frame update on the animation value changes. An update listener prevents the animation from potentially running on a separate thread.
3446

47+
* (Optional) Remove listeners: Remove listeners that are no longer in use.
48+
* (Optional) Set a start value: Customize the animation start value.
49+
* (Optional) Set a value range: Set the animation value range to restrain values within the minimum and the maximum range.
50+
* (Optional) Set start velocity: Set the start velocity for the animation.
51+
* (Optional) Set spring properties: Set the damping ratio and the stiffness on the spring.
52+
* (Optional) Create a custom spring: Create a custom spring in case you do not intend to use the default spring or want to use a common spring throughout the animation.
53+
* Start animation: Start the spring animation.
54+
* (Optional) Cancel animation: Cancel the animation in case the user abruptly exits the app or the view becomes invisble.
3555

3656
## Drawable Animations
3757

@@ -59,20 +79,24 @@ A VectorDrawable can be represented in xml with
5979

6080
where width and height are the actual dimensions of while viewportWidth, and viewportHeight are used for drawing coordinates.
6181

62-
**M** represents move to a coordinate
63-
**L** means draw a line from previous coordinate to coordinates after *L*
64-
**C** is contour
65-
**Z** closes/ends the drawing shape
82+
**M**(x,y) Begin a new subpath by moving to (x,y).
6683

67-
**<group>** tag is used for grouping sections of drawable to be able to be animated together. And some animations such as
84+
**L**(x,y) Draw a line to (x,y).
85+
86+
**C** (x1,y1 x2,y2 x,y) Draw a cubic bezier curve to (x,y) using control points (x1,y1) and (x2,y2).
87+
88+
**Z** Close the path by drawing a line back to the beginning of the current subpath
89+
90+
**'<group>'** tag is used for grouping sections of drawable to be able to be animated together. And some animations such as
6891
rotation, and translation can only be applied to groups.
6992

7093
Animations can be performed on the animatable attributes in android.graphics.drawable.VectorDrawable.
7194
These attributes will be animated by android.animation.ObjectAnimator.
7295
The ObjectAnimator's target can be the root element, a group element or a path element.
7396
The targeted elements need to be named uniquely within the same VectorDrawable.
7497
Elements without animation do not need to be named.
75-
98+
99+
For more details you check out [here](https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html)
76100

77101
### XML for AnimatedVectorDrawable
78102
An AnimatedVectorDrawable element has a VectorDrawable attribute, and one or more target element(s).

‎Tutorial2-1AnimatedVectorDrawables/src/main/java/com/smarttoolfactory/tutorial2_1animatedvectordrawables/Activity1_1Basics.kt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,18 @@ class Activity1_1Basics : AppCompatActivity() {
9797
add(AVDModel(R.drawable.avd_add_to_comment))
9898
add(AVDModel(R.drawable.avd_comment_to_add))
9999
add(AVDModel(R.drawable.avd_profile))
100+
add(AVDModel(R.drawable.avd_notifications_ring))
101+
100102
add(HeaderModel("Seekable Vector Drawable"))
101103
add(SeekableVDModel(R.drawable.avd_compass_rotation))
102104
add(SeekableVDModel(R.drawable.avd_views))
103105
add(SeekableVDModel(R.drawable.avd_hourglass))
104106

107+
add(HeaderModel("Clocks"))
108+
add(AVDModel(R.drawable.avd_clock_alarm))
109+
add(AVDModel(R.drawable.avd_clock_clock))
110+
add(AVDModel(R.drawable.avd_clock_stopwatch))
111+
105112
}
106113

107114
return data.toList()

‎Tutorial2-1AnimatedVectorDrawables/src/main/res/drawable/avd_clock_alarm.xml‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<animated-vector
2+
xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:aapt="http://schemas.android.com/aapt"
4+
android:drawable="@drawable/vd_clock_alarm">
5+
6+
<target android:name="button">
7+
<aapt:attr name="android:animation">
8+
<set android:ordering="sequentially">
9+
<objectAnimator
10+
android:duration="33"
11+
android:interpolator="@android:interpolator/fast_out_slow_in"
12+
android:propertyName="rotation"
13+
android:valueFrom="0"
14+
android:valueTo="8"/>
15+
<objectAnimator
16+
android:duration="67"
17+
android:interpolator="@android:interpolator/fast_out_slow_in"
18+
android:propertyName="rotation"
19+
android:valueFrom="8"
20+
android:valueTo="-8"/>
21+
<objectAnimator
22+
android:duration="67"
23+
android:interpolator="@android:interpolator/fast_out_slow_in"
24+
android:propertyName="rotation"
25+
android:valueFrom="-8"
26+
android:valueTo="8"/>
27+
<objectAnimator
28+
android:duration="67"
29+
android:interpolator="@android:interpolator/fast_out_slow_in"
30+
android:propertyName="rotation"
31+
android:valueFrom="8"
32+
android:valueTo="-8"/>
33+
<objectAnimator
34+
android:duration="67"
35+
android:interpolator="@android:interpolator/fast_out_slow_in"
36+
android:propertyName="rotation"
37+
android:valueFrom="-8"
38+
android:valueTo="8"/>
39+
<objectAnimator
40+
android:duration="67"
41+
android:interpolator="@android:interpolator/fast_out_slow_in"
42+
android:propertyName="rotation"
43+
android:valueFrom="8"
44+
android:valueTo="-8"/>
45+
<objectAnimator
46+
android:duration="67"
47+
android:interpolator="@android:interpolator/fast_out_slow_in"
48+
android:propertyName="rotation"
49+
android:valueFrom="-8"
50+
android:valueTo="8"/>
51+
<objectAnimator
52+
android:duration="67"
53+
android:interpolator="@android:interpolator/fast_out_slow_in"
54+
android:propertyName="rotation"
55+
android:valueFrom="8"
56+
android:valueTo="-8"/>
57+
<objectAnimator
58+
android:duration="33"
59+
android:interpolator="@android:interpolator/fast_out_slow_in"
60+
android:propertyName="rotation"
61+
android:valueFrom="-8"
62+
android:valueTo="0"/>
63+
</set>
64+
</aapt:attr>
65+
</target>
66+
67+
</animated-vector>

0 commit comments

Comments
 (0)