Главная » Создаем двойную анимацию восходящего солнца и идущих часов | |
Представляю вашему вниманию еще один урок по анимации (до этого мы делали переход и простую фреймовую анимацию). Очертим примерно нашу цель и задачи. Мы создаем анимацию восходящего солнца, а также часов с вращающимися минутной и часовой стрелками. Каждый объект, который будет присутствовать на экране, нужно создать и задать его свойства. У нас этими объектами будут: небо, солнце, трава, часы с двумя стрелками и кнопка запуска анимации. Далее мы оживляем нужные объекты с помощью создания анимации. И последний, но и самый важный шаг, пишем код приложения, который будет запускать нужную анимацию при нажатии на кнопку в углу экрана. Для выполнения урока не потребуется задействовать никаких сторонних файлов - все, что нам нужно, есть в стандартном наборе инструментов ANdroid Studio. Объем работы не так уж мал, но не бойтесь, все довольно просто. Будем выполнять поставленные задачи в таком порядке: - сначала создаем все необходимое объекты; - оформляем внешний вид программы (интерфейс в файле activity_main.xml); - создаем нужным объектам анимацию; - кодим все необходимое в файле MainActivity.java. Начнем. Создаем новый проект по имени Animation. Все названия оставляем стандартными, выбираем Blank Activity. Начинаем с создания объектов. В папке drawable создаем файл sky.xml (выбрать папку, правый клик --- New --- Drawable resourse file). Создаем здесь форму неба, заполняющего все пространство окна, настраиваем ему синенький градиент, угол градиента:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle">
<gradient
android:startColor="#ff0000ff"
android:endColor="#ff000033"
android:angle="90"/>
</shape>
Команда dither используется для надежности, чтобы градиент отобразился правильно. В этой же папке drawable создаем файл для солнца sun.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="oval">
<gradient
android:startColor="#ffffcc00"
android:endColor="#ffff6600"
android:gradientRadius="150"
android:type="radial"
android:useLevel="false"/>
<size
android:height="150dp"
android:width="150dp"/>
</shape>
Здесь мы создали круг с заданным размером 150dp*150 dp. Создаем тут же еще один файл для травы grass.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle">
<gradient
android:startColor="#ff009900"
android:endColor="#ff003300"
android:angle="90"/>
</shape>
Он мало чем отличается от файла для создания неба, разве что цветом. Теперь давайте создадим часики с минутной стрелкой. Здесь уже понадобится более объемная работа. В папке drawable создаем файл clock.xml со следующим содержанием:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="oval">
<gradient
android:startColor="#66ffffff"
android:endColor="#ffffffff"
android:gradientRadius="100"
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
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#99000000"/>
</shape>
</item>
</layer-list>
Мы используем <layer-list> для того, чтобы поместить в один файл сразу несколько объектов (до этого каждый файл создавал только один объект). Каждый новый объект в <layer-list> вложен в тег <item></item>. В файле создано 2 объекта: круг размера 100*100 dp с серым градиентом и обрамлением тиснением по краю в 2dp, а также прямоугольник, который будет играть роль минутной стрелки. Ну и последний штрих в рисовании все новых деталей анимации - создание часовой стрелки. Создаем в той же папке drawable файл hour_hand.xml со следующим содержимым:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
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
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#99000000" />
</shape>
</item>
</layer-list>
Этот код фактически аналогичен коду для часов с минутной стрелкой, но здесь цвет круга (часов) сливается с фоном, а стрелка немного короче. На этом мы заканчиваем с рисованием. Теперь у нас по плану оформление интерфейса программы. Открываем файл activity_main.xml и добавляем туда для всех элементов, которые будут использованы (солнце, небо, трава, часы с минутной стрелкой, часовая стрелка и кнопка запуска анимации) соответствующие объекты. То есть, нам нужно создать 5 элементов ImageView и одну кнопку Button. Файл будет выглядеть так:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/sky"
android:contentDescription="@string/sky"
android:src="@drawable/sky"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/sun"
android:contentDescription="@string/sun"
android:src="@drawable/sun"
android:layout_centerHorizontal="true"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="150dp"
android:id="@+id/grass"
android:contentDescription="@string/grass"
android:src="@drawable/grass"
android:layout_alignParentBottom="true"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/clock"
android:contentDescription="@string/clock"
android:src="@drawable/clock"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:padding="10dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/hour"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="@drawable/hour_hand"
android:padding="10dp"
android:contentDescription="@string/hour"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
android:text="Start"
android:onClick="Go"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
Само окно программы должно выглядеть вот так вот:
Мы написали нашей кнопке Start метод onClick с именем "Go" (назначили ей нажатие). Нужно добавить этот метод в MainActivity.java. Ставим курсов на строчку android:onClick="Go" жмем Alt+Enter и еще раз Enter применяя команду создания метода (в других уроках это делается регулярно, поэтому подробно описывать в очередной раз это действие бессмысленно, если вы все же не могете, ничего, вы увидите нужные команды ниже, при редактировании файла MainActivity.java). Теперь переходим к созданию анимации. Создаем в файлах приложения папку по имени anim на одном уровне с drawable:
У нас будет целых 3 одновременных анимации: одна - солнца, другая - минутной стрелки, третья - часовой стрелки. В этой папке создаем файл sun_rise.xml для того, чтобы сделать анимацию солнцу:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
android:duration="5000"
android:fillAfter="true"
android:interpolator="@android:anim/accelerate_decelerate_interpolator">
<scale
android:fromXScale="1.0"
android:toXScale="1.5"
android:fromYScale="1.0"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"/>
<translate
android:fromYDelta="80%p"
android:toYDelta="10%p"/>
<alpha
android:fromAlpha="0.3"
android:toAlpha="1.0"/>
</set>
Мы определили для анимации интерполятор accelerate_decelerate_interpolator, который сделает движение солнца не линейным, а медленным в начале и в конце, но ускоренным ближе к центру. Выставляем длительность анимации duration=5000 мс, 5 секунд, изменяем масштаб солнца от 1.0 размера в начале движения до 1.5 под конец анимации, в теге translate определяем движение только по вертикали (по Y) и указываем начать движение от 80% родительского окна (мутное объяснение, попробую лучше - вся высота окна 100%, отчет идет с верху вниз, указывая 80%p мы даем понять, что движение нужно начать с высоты в 80% и до высоты 10% от родительского окна). Также тег alpha дает нам возможность настроить прозрачность нашего солнца, увеличивая его от 0.3 до 1.0. Теперь нужно создать анимацию для часов с минутной стрелкой. В папке anim создаем файл clock_turn.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
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>
Здесь мы установили интерполятором линейное движение (то есть, скорость стрелки при обороте по кругу будет одинакова на всех участках движения), а также настроили вращение от 0 до 720 градусов (то есть, 2 полных оборота, каждый круг по 360 градусов). Точку вращения ставим и по X, и по Y на 50% (pivotX, pivotY), чтобы у нас получилась анимация относительно центра, а не болталась вся картинка. Ну и создаем последнюю анимацию - движение часовой стрелки. Тут же в папке anim создаем файл hour_hand.xml (да, название для файла самой стрелки и анимации совпали, не растеряйтесь):
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="5000"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator"
android:shareInterpolator="false">
<rotate
android:fromDegrees="150"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="240"/>
</set>
Здесь то же, что и в предыдущем файле, за исключением того, что мы сместили положение часовой стрелки от минутной, чтобы увидеть их раздельно, а также установили для часовой стрелки меньший угол поворота (ведь часовая стрелка вращается медленнее минутной:)). На этом работа над файлами для анимации закончена. Теперь остается финальный штрих в нашей работе - написать код запуска анимации по щелчку на кнопку Start. Открываем файл MainActivity.java. В методе обработки щелчка "Go" (мы создали его выше при работе в activity_main.xml) нам нужно объявить использование объектов ImageView и Animation, привязав их к созданным нами элементам в activity_main.xml и запустить все 3 анимации. Код будет выглядеть так:
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void Go(View view) {
ImageView Sun = (ImageView)findViewById(R.id.sun);
Animation SunRise = AnimationUtils.loadAnimation(this,R.anim.sun_rise);
Sun.startAnimation(SunRise);
ImageView Clock = (ImageView)findViewById(R.id.clock);
Animation ClockTurn = AnimationUtils.loadAnimation(this,R.anim.clock_turn);
Clock.startAnimation(ClockTurn);
ImageView Hour = (ImageView)findViewById(R.id.hour);
Animation HourHand = AnimationUtils.loadAnimation(this,R.anim.hour_hand);
Hour.startAnimation(HourHand);
}
}
Вот и все, урок довольно объемный, но действия понятны и однотипные. Приложение готово для тестирования. Тестируем на устройствах/эмуляторах на Android 4.2+, на версии 2.3 работать не будет! Сделано по мотивам этого урока. Но в нем нету кнопочки:), а она здесь реально нужна, постоянно перезапускать приложение, чтобы увидеть свою анимацию, не практично и не удобно. | |
|
Всего комментариев: 1 | |
| |