Skip to content

Commit 0ea264d

Browse files
SmartToolFactorySmartToolFactory
committed
add translation, rotation and position anim tutorial
1 parent 8246185 commit 0ea264d

File tree

9 files changed

+270
-13
lines changed

9 files changed

+270
-13
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ fragment transitions and image to ViewPager transitions and more.
2929
| ----------|----------------| --------|
3030
| <img src="./screenshots/avd_chapter1_1.gif"/> | <img src="./screenshots/avd_chapter1_2.gif"/> | <img src="./screenshots/avd_chapter1_3.gif"/> |
3131

32+
* [Tutorial3-1Shared Transitions](https://github.com/SmartToolFactory/Animation-Tutorials/tree/master/Tutorial3-1Transitions)
3233

3334
## Physics Based Animations
3435
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.

‎Tutorial1-1Basics/src/main/AndroidManifest.xml‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,19 @@
1818
</activity>
1919
<activity android:name=".chapter1_basics.Activity1_1Basics" />
2020
<activity android:name=".chapter1_basics.Activity1_2AnimatorInflater" />
21+
<activity android:name=".chapter1_basics.Activity1_3TranslationVsPosition" />
22+
<activity android:name=".chapter1_basics.Activity1_4RotationTranslationPosition" />
23+
2124
<activity android:name=".chapter2_animate_views.Activity2_1PulseView" />
2225
<activity android:name=".chapter2_animate_views.Activity2_2RevealHideCrossFade" />
2326
<activity android:name=".chapter2_animate_views.Activity2_3CircularReveal" />
2427
<activity android:name=".chapter2_animate_views.Activity2_4CardFlipAnimation" />
2528
<activity android:name=".chapter2_animate_views.Activity2_5CurvedMotionAnimation" />
2629
<activity android:name=".chapter2_animate_views.Activity2_6ZoomAnimation" />
27-
<activity android:name=".chapter2_animate_views.Activity2_7GradientAnimation" />
28-
<activity android:name=".chapter2_animate_views.Activity2_8AnimationDrawableGradient" />
2930
<activity android:name=".chapter2_animate_views.Activity2_7GradientAnimations" />
3031
<activity android:name=".chapter2_animate_views.Activity2_8CounterAnimation" />
31-
<activity android:name=".chapter1_basics.Activity1_3TranslationVsPosition" />
3232
<activity android:name=".chapter2_animate_views.Activity2_9CounterSurfaceView" />
33+
3334
<activity android:name=".chapter3_physics.Activity3_1PhysicsBasics" />
3435
<activity android:name=".chapter3_physics.Activity3_2ScaleAndChainedAnimations" />
3536
<activity android:name=".chapter3_physics.Activity3_3FlingAnimation" />

‎Tutorial1-1Basics/src/main/java/com/example/tutorial1_1basics/MainActivity.kt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import com.example.tutorial1_1basics.adapter_chapter_selection.BaseAdapter
1616
import com.example.tutorial1_1basics.adapter_chapter_selection.ChapterSelectionAdapter
1717
import com.example.tutorial1_1basics.databinding.ActivityMainBinding
1818
import com.example.tutorial1_1basics.adapter_chapter_selection.model.ActivityClassModel
19+
import com.example.tutorial1_1basics.chapter1_basics.Activity1_4RotationTranslationPosition
1920
import com.example.tutorial1_1basics.chapter3_physics.Activity3_1PhysicsBasics
2021
import com.example.tutorial1_1basics.chapter3_physics.Activity3_2ScaleAndChainedAnimations
2122
import com.example.tutorial1_1basics.chapter3_physics.Activity3_3FlingAnimation
@@ -84,6 +85,13 @@ class MainActivity : AppCompatActivity(), BaseAdapter.OnRecyclerViewItemClickLis
8485
)
8586
)
8687

88+
activityClassModels.add(
89+
ActivityClassModel(
90+
Activity1_4RotationTranslationPosition::class.java,
91+
getString(R.string.activity1_4)
92+
)
93+
)
94+
8795

8896
activityClassModels.add(
8997
ActivityClassModel(

‎Tutorial1-1Basics/src/main/java/com/example/tutorial1_1basics/chapter1_basics/Activity1_4RotationTranslationPosition.kt‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
package com.example.tutorial1_1basics.chapter1_basics
2+
3+
import android.os.Bundle
4+
import androidx.appcompat.app.AppCompatActivity
5+
import com.example.tutorial1_1basics.R
6+
import kotlinx.android.synthetic.main.activity1_4rotate_translate_position.*
7+
8+
class Activity1_4RotationTranslationPosition : AppCompatActivity() {
9+
10+
private val rotationChangeX = 10f
11+
private val rotationChangeY = 10f
12+
private val rotationChange = 10f
13+
14+
private val posTranslateChange = 250f
15+
16+
override fun onCreate(savedInstanceState: Bundle?) {
17+
super.onCreate(savedInstanceState)
18+
setContentView(R.layout.activity1_4rotate_translate_position)
19+
title = getString(R.string.activity1_4)
20+
21+
imageView.post {
22+
updateImageText()
23+
}
24+
setUpRotationButtons()
25+
setUpTranslationButton()
26+
setUpPositionButtons()
27+
}
28+
29+
30+
private fun setUpRotationButtons() {
31+
32+
buttonRotateX.setOnClickListener {
33+
imageView.rotationX += rotationChangeX
34+
updateImageText()
35+
}
36+
37+
buttonRotateY.setOnClickListener {
38+
imageView.rotationY += rotationChangeY
39+
updateImageText()
40+
}
41+
42+
buttonRotate.setOnClickListener {
43+
imageView.rotation += rotationChange
44+
updateImageText()
45+
}
46+
}
47+
48+
private fun setUpTranslationButton() {
49+
50+
buttonTranslateX.setOnClickListener {
51+
imageView.translationX = posTranslateChange
52+
updateImageText()
53+
}
54+
55+
buttonTranslateY.setOnClickListener {
56+
imageView.translationY = posTranslateChange
57+
updateImageText()
58+
}
59+
60+
buttonTranslateZ.setOnClickListener {
61+
imageView.translationZ = posTranslateChange
62+
updateImageText()
63+
}
64+
65+
}
66+
67+
private fun setUpPositionButtons() {
68+
69+
buttonPositionX.setOnClickListener {
70+
imageView.x = posTranslateChange
71+
updateImageText()
72+
}
73+
74+
buttonPositionY.setOnClickListener {
75+
imageView.y = posTranslateChange
76+
updateImageText()
77+
}
78+
79+
buttonPositionZ.setOnClickListener {
80+
imageView.z = posTranslateChange
81+
updateImageText()
82+
}
83+
}
84+
85+
private fun updateImageText() {
86+
tvInfo.text =
87+
"TX: ${imageView.translationX}, TY: ${imageView.translationY}, TZ: ${imageView.translationZ}\n" +
88+
"Top: ${imageView.top}, Left: ${imageView.left}, Right: ${imageView.right}, Bottom: ${imageView.bottom}\n" +
89+
"X: ${imageView.x}, Y: ${imageView.y}, Z: ${imageView.z}\n" +
90+
"rotX: ${imageView.rotationX}, roY: ${imageView.rotationY}, rot: ${imageView.rotation}\n"
91+
}
92+
}

‎Tutorial1-1Basics/src/main/res/layout/activity1_4rotate_translate_position.xml‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:app="http://schemas.android.com/apk/res-auto"
4+
xmlns:tools="http://schemas.android.com/tools"
5+
android:layout_width="match_parent"
6+
android:layout_height="match_parent">
7+
8+
9+
<TextView
10+
android:id="@+id/tvInfo"
11+
android:layout_width="match_parent"
12+
android:layout_height="wrap_content"
13+
android:layout_marginStart="8dp"
14+
android:layout_marginTop="8dp"
15+
android:textColor="#f00"
16+
app:layout_constraintStart_toStartOf="parent"
17+
app:layout_constraintTop_toTopOf="parent"
18+
tools:text="TX:0, TY:0, TZ: 0 Top:0, Left:0, Right:0, Bottom:0, X:0, Y:0, Z:0" />
19+
20+
<!-- Rotate -->
21+
22+
<ImageView
23+
android:id="@+id/imageView"
24+
android:layout_width="75dp"
25+
android:layout_height="75dp"
26+
app:layout_constraintBottom_toBottomOf="parent"
27+
app:layout_constraintEnd_toEndOf="parent"
28+
app:layout_constraintStart_toStartOf="parent"
29+
app:layout_constraintTop_toTopOf="parent"
30+
app:layout_constraintVertical_bias="0.443"
31+
app:srcCompat="@drawable/ic_baseline_sports_basketball_24"
32+
app:tint="#FFA000" />
33+
34+
<com.google.android.material.button.MaterialButton
35+
android:id="@+id/buttonRotate"
36+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
37+
android:layout_width="wrap_content"
38+
android:layout_height="wrap_content"
39+
android:layout_marginBottom="16dp"
40+
android:text="Rotate"
41+
app:layout_constraintBottom_toTopOf="@+id/buttonRotateY"
42+
app:layout_constraintStart_toStartOf="@id/buttonRotateX"
43+
app:layout_goneMarginBottom="16dp"
44+
app:strokeColor="@color/design_default_color_primary" />
45+
46+
47+
<com.google.android.material.button.MaterialButton
48+
android:id="@+id/buttonRotateY"
49+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
50+
android:layout_width="wrap_content"
51+
android:layout_height="wrap_content"
52+
android:layout_marginBottom="16dp"
53+
android:text="RotateY"
54+
app:layout_constraintBottom_toTopOf="@+id/buttonRotateX"
55+
app:layout_constraintStart_toStartOf="@id/buttonRotateX"
56+
app:layout_goneMarginBottom="16dp"
57+
app:strokeColor="@color/design_default_color_primary" />
58+
59+
60+
<com.google.android.material.button.MaterialButton
61+
android:id="@+id/buttonRotateX"
62+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
63+
android:layout_width="wrap_content"
64+
android:layout_height="wrap_content"
65+
android:layout_marginStart="8dp"
66+
android:layout_marginBottom="16dp"
67+
android:text="RotateX"
68+
app:layout_constraintBottom_toBottomOf="parent"
69+
app:layout_constraintEnd_toStartOf="@+id/buttonTranslateX"
70+
app:layout_constraintHorizontal_bias="0.5"
71+
app:layout_constraintStart_toStartOf="parent"
72+
app:layout_goneMarginBottom="48dp"
73+
app:strokeColor="@color/design_default_color_primary" />
74+
75+
<!-- Translate -->
76+
77+
<com.google.android.material.button.MaterialButton
78+
android:id="@+id/buttonTranslateZ"
79+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
80+
android:layout_width="wrap_content"
81+
android:layout_height="wrap_content"
82+
android:layout_marginBottom="16dp"
83+
android:text="TranslateZ"
84+
app:layout_constraintBottom_toTopOf="@+id/buttonTranslateY"
85+
app:layout_constraintStart_toStartOf="@id/buttonTranslateX"
86+
app:layout_goneMarginBottom="16dp"
87+
app:strokeColor="@color/design_default_color_primary" />
88+
89+
<com.google.android.material.button.MaterialButton
90+
android:id="@+id/buttonTranslateY"
91+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
92+
android:layout_width="wrap_content"
93+
android:layout_height="wrap_content"
94+
android:layout_marginBottom="16dp"
95+
android:text="TranslateY"
96+
app:layout_constraintBottom_toTopOf="@+id/buttonTranslateX"
97+
app:layout_constraintStart_toStartOf="@id/buttonTranslateX"
98+
app:layout_goneMarginBottom="16dp"
99+
app:strokeColor="@color/design_default_color_primary" />
100+
101+
<com.google.android.material.button.MaterialButton
102+
android:id="@+id/buttonTranslateX"
103+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
104+
android:layout_width="wrap_content"
105+
android:layout_height="wrap_content"
106+
android:text="TranslateX"
107+
app:layout_constraintBottom_toBottomOf="@+id/buttonRotateX"
108+
app:layout_constraintEnd_toStartOf="@+id/buttonPositionX"
109+
app:layout_constraintHorizontal_bias="0.5"
110+
app:layout_constraintStart_toEndOf="@+id/buttonRotateX"
111+
app:layout_constraintTop_toTopOf="@+id/buttonRotateX"
112+
app:layout_goneMarginBottom="48dp"
113+
app:strokeColor="@color/design_default_color_primary" />
114+
115+
<!-- Position -->
116+
117+
<com.google.android.material.button.MaterialButton
118+
android:id="@+id/buttonPositionZ"
119+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
120+
android:layout_width="wrap_content"
121+
android:layout_height="wrap_content"
122+
android:layout_marginBottom="16dp"
123+
android:text="PosZ"
124+
app:layout_constraintBottom_toTopOf="@+id/buttonPositionY"
125+
app:layout_constraintStart_toStartOf="@id/buttonPositionX"
126+
app:layout_goneMarginBottom="16dp"
127+
app:strokeColor="@color/design_default_color_primary" />
128+
129+
<com.google.android.material.button.MaterialButton
130+
android:id="@+id/buttonPositionY"
131+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
132+
android:layout_width="wrap_content"
133+
android:layout_height="wrap_content"
134+
android:layout_marginBottom="16dp"
135+
android:text="PosY"
136+
app:layout_constraintBottom_toTopOf="@+id/buttonPositionX"
137+
app:layout_constraintStart_toStartOf="@id/buttonPositionX"
138+
app:layout_goneMarginBottom="16dp"
139+
app:strokeColor="@color/design_default_color_primary" />
140+
141+
<com.google.android.material.button.MaterialButton
142+
android:id="@+id/buttonPositionX"
143+
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
144+
android:layout_width="wrap_content"
145+
android:layout_height="wrap_content"
146+
android:text="PosX"
147+
app:layout_constraintBottom_toBottomOf="@+id/buttonRotateX"
148+
app:layout_constraintEnd_toEndOf="parent"
149+
app:layout_constraintHorizontal_bias="0.5"
150+
app:layout_constraintStart_toEndOf="@+id/buttonTranslateX"
151+
app:layout_constraintTop_toTopOf="@+id/buttonRotateX"
152+
app:layout_goneMarginBottom="48dp"
153+
app:strokeColor="@color/design_default_color_primary" />
154+
155+
</androidx.constraintlayout.widget.ConstraintLayout>

‎Tutorial1-1Basics/src/main/res/values/strings.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<string name="activity1_1">Ch1-1 Animation with ObjectAnimator</string>
1111
<string name="activity1_2">Ch1-2 Animation with AnimatorInflater</string>
1212
<string name="activity1_3">Ch1-3 Animating Translation vs Position</string>
13+
<string name="activity1_4">Ch1-4 Rotation, Translation, Position</string>
1314
<string name="activity2_1">2-1 Animation with Custom View</string>
1415
<string name="activity2_2">Ch2-2 Animation Hide/Reveal crossFade</string>
1516
<string name="activity2_3">Ch2-3 Animation Circular Reveal</string>

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,28 +76,26 @@
7676
android:propertyName="scaleX"
7777
android:valueFrom="1"
7878
android:valueTo="1.2"
79-
android:startOffset="850"
79+
android:startOffset="900"
8080
android:duration="100" />
8181
<objectAnimator
8282
android:propertyName="scaleY"
8383
android:valueFrom="1"
8484
android:valueTo="1.2"
85-
android:startOffset="850"
85+
android:startOffset="900"
8686
android:duration="100" />
8787
<objectAnimator
8888
android:propertyName="scaleX"
8989
android:valueFrom="1.2"
9090
android:valueTo="1"
91-
android:startOffset="950"
91+
android:startOffset="1000"
9292
android:duration="150" />
9393
<objectAnimator
9494
android:propertyName="scaleY"
9595
android:valueFrom="1.2"
9696
android:valueTo="1"
97-
android:startOffset="950"
97+
android:startOffset="1000"
9898
android:duration="150" />
99-
100-
10199
</set>
102100
</aapt:attr>
103101
</target>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -245,8 +245,8 @@
245245
<aapt:attr name="android:animation">
246246
<objectAnimator
247247
android:propertyName="fillAlpha"
248-
android:startOffset="990"
249-
android:duration="10"
248+
android:startOffset="1000"
249+
android:duration="100"
250250
android:valueFrom="1"
251251
android:valueTo="0"
252252
android:valueType="floatType"
@@ -257,8 +257,8 @@
257257
<aapt:attr name="android:animation">
258258
<objectAnimator
259259
android:propertyName="fillAlpha"
260-
android:startOffset="990"
261-
android:duration="10"
260+
android:startOffset="1000"
261+
android:duration="100"
262262
android:valueFrom="1"
263263
android:valueTo="0"
264264
android:valueType="floatType"

‎settings.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
rootProject.name = "Animation Tutorials"
22
include ':Tutorial1-1Basics'
33
include ':Tutorial2-1AnimatedVectorDrawables'
4+
include ':Tutorial3-1Transitions'

0 commit comments

Comments
 (0)