11. Створення анімації на Android

1. Створіть новий проект. Видаліть всі компоненти на активному екрані.

2. Видаліть всі пункти з меню.

3. Створіть sky.xml в drawable:

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="<a href="http://schemas.android.com/apk/res/android"<br />
">http://schemas.android.com/apk/res/android"<br />
</a>    android:dither="true"
    android:shape="rectangle" >
 
    <gradient
        android:angle="90"
        android:endColor="#ff000033"
        android:startColor="#ff0000ff" />
 
</shape>

4.Створіть grass.xml в drawable:

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="<a href="http://schemas.android.com/apk/res/android"<br />
">http://schemas.android.com/apk/res/android"<br />
</a>    android:dither="true"
    android:shape="rectangle" >
 
    <gradient
        android:angle="90"
        android:endColor="#ff003300"
        android:startColor="#ff009900" />
 
</shape>

5.Створіть sun.xml в drawable:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="<a href="http://schemas.android.com/apk/res/android"<br />
">http://schemas.android.com/apk/res/android"<br />
</a>    android:dither="true"
    android:shape="oval" >
 
    <gradient
        android:endColor="#ffff6600"
        android:gradientRadius="150"
        android:startColor="#ffffcc00"
        android:type="radial"
        android:useLevel="false" />
 
    <size
        android:height="150dp"
        android:width="150dp" />
 
</shape>

6. Створіть clock.xml в drawable:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="<a href="http://schemas.android.com/apk/res/android"">http://schemas.android.com/apk/res/android"</a> >
 
    <item>
        <shape
            android:dither="true"
            android:shape="oval" >
            <gradient
                android:endColor="#ffffffff"
                android:gradientRadius="100"
                android:startColor="#66ffffff"
                android:type="radial"
                android:useLevel="false" />
 
            <size
                android:height="100dp"
                android:width="100dp" />
 
            <stroke
                android:width="2dp"
                android:color="#99000000" />
        </shape>
    </item>
    <item
        android:bottom="44dp"
        android:left="48dp"
        android:right="48dp"
        android:top="5dp">
        <shape android:shape="rectangle" >
            <solid android:color="#99000000" />
        </shape>
    </item>
 
</layer-list>

7. Створіть hour_hand.xml в drawable:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="<a href="http://schemas.android.com/apk/res/android"">http://schemas.android.com/apk/res/android"</a> >
 
    <item>
        <shape
            android:dither="true"
            android:shape="oval" >
            <solid android:color="#00000000" />
 
            <size
                android:height="100dp"
                android:width="100dp" />
        </shape>
    </item>
    <item
        android:bottom="44dp"
        android:left="48dp"
        android:right="48dp"
        android:top="15dp">
        <shape android:shape="rectangle" >
            <solid android:color="#99000000" />
        </shape>
    </item>
 
</layer-list>

8. Перейдіть у папку res/anim та створіть там наступні файли:

sun_rise.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="<a href="http://schemas.android.com/apk/res/android"<br />
">http://schemas.android.com/apk/res/android"<br />
</a>    android:duration="5000"
    android:fillAfter="true"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:shareInterpolator="false" >
 
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
 
    <translate
        android:fromYDelta="80%p"
        android:toYDelta="10%p" />
 
    <alpha
        android:fromAlpha="0.3"
        android:toAlpha="1.0" />
 
</set>

clock_turn.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="<a href="http://schemas.android.com/apk/res/android"<br />
">http://schemas.android.com/apk/res/android"<br />
</a>    android:duration="5000"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator"
    android:shareInterpolator="false" >
 
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720" />
 
</set>

hour_turn.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="<a href="http://schemas.android.com/apk/res/android"<br />
">http://schemas.android.com/apk/res/android"<br />
</a>    android:duration="5000"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator"
    android:shareInterpolator="false" >
 
    <rotate
        android:fromDegrees="180"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="240" />
 
</set>

9. Якщо ви все правильно зробили, то ваш проект буде мати такий вигляд:

Запишіть код у MainActivity для виклику анімацій в методі OnCreate після SetContentView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        // посилання на сонечко
        ImageView sun = (ImageView) findViewById(R.id.sun);
        // анімація сходу сонця
        Animation sunRise = AnimationUtils.loadAnimation(this, R.anim.sun_rise);
        // підключаємо анімацію до потрібного View
        // посилання на годинник
        ImageView clock = (ImageView) findViewById(R.id.clock);
        // анімація обертання годинника
        Animation clockTurn = AnimationUtils.loadAnimation(this, R.anim.clock_turn);
        // посилання на стрілку годинника
        ImageView hour = (ImageView) findViewById(R.id.hour_hand);
        // анімація для стрілки
        Animation hourTurn = AnimationUtils.loadAnimation(this, R.anim.hour_turn);
        // приєднання анімації
        hour.startAnimation(hourTurn);
        clock.startAnimation(clockTurn);
        sun.startAnimation(sunRise);

Контрольні питання:

1. Що міститься у папці anim?

2. Як задається градієнт у файлах *.xml у папці drawable?

3. Як викликати анімації об'єкту, якщо вони є?