Создание анимированных GIF средствами Java
Недавно в целях демонстрации работы алгоритма фрактального сжатия мне понадобилось создать GIF-анимацию средствами Java. Стандартная библиотека простого способа это сделать не предоставляла. В связи с этим встала необходимость найти подходящий сниппет. Однако решений в интернете оказалось немного, да и у каждого из них были свои нюансы. С целью облегчить задачу по поиску оптимального решения и была написана эта статья.
Для начала упомяну платное решение — библиотеку Gif4J. Согласно приведенной на главной странице проекта информации, библиотека позволяет не только создавать анимированные GIF-изображения, но и изменять их размер, настраивать цветовой баланс, ставить водяные знаки, получать метаданные из изображений, добавлять текст и т.п. Словом, охватывает весь спектр необходимых действий по работе с GIF-изображениями.
Поиск решения более узкой задачи — поясню, что требуется только создать зацикленную анимацию, состоящую из последовательности изображений одного размера — дал следующие результаты.
Класс GifSequenceWriter, разработанный Эллиотом Кру, который можно скомпилировать и запустить (он содержит метод main ), преобразует несколько файлов одинакового размера в GIF-анимацию. В качестве настроек можно указать, нужно ли зацикливать анимацию или нет, и длительность каждого кадра. Именно им я и воспользовался для решения своей задачи:
Прим. В комментариях в коде неверно описаны параметры:
// create a gif sequence with the type of the first image, 1 second // between frames, which loops continuously GifSequenceWriter writer = new GifSequenceWriter(output, firstImage.getType(), 1, false);На самом деле третий параметр задает задержку перед сменой кадра в сотых долях секунды, а четвертый — нужно ли зацикливать анимацию, и значение false указывает, что зацикливания не будет. Поэтому по умолчанию анимация не зацикливается и кадры сменяются каждую сотую долю секунды.
Коротко поясню, как работает GifSequenceWriter. В нем GIF-файл описывается через метод setAttribute класса IIOMetadataNode в соответствии со спецификациями w3.org, после чего результат записывается ImageWriter’ом в выходной файл.
Однако у реализованного подхода есть два недостатка. Во-первых, он совершенно не сжимает выходной файл, а потому его размер оказывается неоправданно большим. Помочь справиться с этой проблемой вам может один из специальных инструментов, доступных онлайн — например, Compressor.io.
Во-вторых, GifSequenceWriter, как и многие другие реализации, не решает проблемы с прозрачными пикселями: в каждом следующем кадре сквозь них просвечивают пиксели предыдущего. Например, вот эти две картинки:
Объединяются в следующую анимацию:
Иногда это может быть неудобно. Для решения этой проблемы существует класс GifFrame. Он индексирует один из цветов как прозрачный (по умолчанию в примере это 0xFF00FF, то есть пурпурный). Результат для вышеупомянутой пары изображений будет иметь следующий вид:
Кстати, в коде, приведенном по ссылке не хватает import ‘ов. Для вашего удобства перечислю их здесь:
import org.w3c.dom.Node; import javax.imageio.*; import javax.imageio.metadata.*; import javax.imageio.stream.ImageOutputStream; import java.awt.*; import java.awt.image.*; import java.util.List; import java.util.ArrayList; import java.io.*;Для обеспечения аналогичной функциональности вышеупомянутому классу GifSequenceWriter можете добавить следующий метод main :
public static void main(String[] args) throws Exception < java.util.ListgifFrames = new ArrayList(); for(int i=0; i OutputStream outputStream = new FileOutputStream(new File(args[args.length - 1])); int loopCount = 0; // loop indefinitely ImageUtil.saveAnimatedGIF(outputStream, gifFrames, loopCount); > Также набор интересных сниппетов по работе с GIF изображениями на Java приведен по этой ссылке.
Простая анимация на java
По сути дела ничего сложного: создаем синий круг, по нажатию кнопки его можно заставить двигаться по диагонали с верхнего левого угла к нижнему правому. В конструкторе класса MovingCircle два параметра — это цвет и скорость (точнее, наоборот, величина замедления). Кроме этого, скорость регулируют еще две строки 57 (x++; — скорость движения по горизонтали) и 58 (y++; — скорость движения по вертикали).
Итак, рисуем кружок зеленого цвета, задаем параметры. В итоге на экране после запуска программы появляется окно с размерами 600 на 550 точек (строка кода 89). В этом окне два поля: рабочая область слева с белым фоном на котором герой нашей статьи — зеленый круг, а справа кнопка: по нажатию кружок начинает двигаться, нажать еще раз — останавливается.
На основе этой простейшей анимации на java можно делать гораздо более сложные. Имеется таймер, все параметры расписаны достаточно подробно: можно, к примеру, использовать квадрат, а не круг. На основе этого примера анимации на java нетрудно уже будет создать самостоятельно анимации других типов. В программе нет комментариев, код должен быть понятен.
А вот и сам код. Можно его скопировать, а можно просто скачать готовый архив с файлом исходника и классами — MovingCircle.zip, либо уже готовый к употреблению архив jar — MovingCircle.jar. Для компилирования и запуска использовалась Java SE Development Kit 7u45 на Windows 7, а также Ubunty 12.04, но должно заработать на любом компьютере, на котором установлена хотя бы jre, хотя бы 2 версии.
import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.geom.Ellipse2D; import javax.swing.JButton; import javax.swing.JComponent; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.SwingUtilities; import javax.swing.Timer; @SuppressWarnings("serial") public class MovingCircle extends JComponent implements ActionListener < private double scale; private Color color; private Timer timer; public double x =10; public double y =10; public MovingCircle(Color color, int delay) < scale = 1.0; timer = new Timer(delay, this); this.color = color; setPreferredSize(new Dimension(500, 500)); >public void start() < timer.start(); >public void stop() < timer.stop(); >@Override public void actionPerformed(ActionEvent arg0) < repaint(); >@Override protected void paintComponent(Graphics g) < Graphics2D g2d = (Graphics2D) g; g2d.setColor(Color.white); int width = 500; int height = 500; g.fillRect(0, 0, width, height); g2d.setColor(Color.black); g2d.drawRect(0, 0, width - 1, height - 1); g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); g2d.setColor(color); g2d.scale(scale, scale); x++; y++; Ellipse2D el = new Ellipse2D.Double(x, y, 20, 20); g2d.fill(el); >public static void main(String[] args) < SwingUtilities.invokeLater(new Runnable() < public void run() < JFrame frame = new JFrame("Moving Circle"); JPanel panel = new JPanel(); final MovingCircle MovingCircleGreen = new MovingCircle(Color.green, 20); panel.add(MovingCircleGreen); frame.getContentPane().add(panel); final JButton button = new JButton("Start"); button.addActionListener(new ActionListener() < private boolean pulsing = false; @Override public void actionPerformed(ActionEvent e) < if (pulsing) < pulsing = false; MovingCircleGreen.stop(); button.setText("Start"); >else < pulsing = true; MovingCircleGreen.start(); button.setText("Stop"); >> >); panel.add(button); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(600, 550); frame.setVisible(true); > >); > > 
Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
статьи IT, java, анимация
Java как сделать анимацию
Tween-анимация представляет анимацию различных свойств объекта, при которой система сама расчитывает некоторые промежуточные значения с помощью определенного алгоритма, который называется интерполяцией. В Android алгоритм интерполяции определяется встроенным классом Animation .
От данного класса наследуются классы, которые описывают конкретные типы анимаций, такие как AlphaAnimation (изменение прозрачности), RotateAnimation (анимация вращения), ScaleAnimation (анимация масштабирования), TranslateAnimation (анимация перемещения).
Мы можем определить анимацию как в коде java, так и в файле xml. Для хранения ресурсов анимации в папке res предназначена папка anim . По умолчанию данная папка отсуствует в проекте, поэтому создадим ее. Для этого нажмем правой кнопкой мыши на папку res и в появившемся контекстном меню выберем пункт New -> Android Resource Directory
:
Затем в появившемся окне укажем тип ресурсов — anim
Далее добавим в нее новый xml-файл, который назовем common_animation.xml :
Определим в этом файле следующее содержание:
Здесь задействуются четыре типа анимаций: элемент scale представляет масштабирование, элемент rotate — вращение, элемент alpha — изменение прозрачности, элемент translate — перемещение. Если бы мы использовали одну анимацию, то могли бы определить один корневой элемент по типу анимации. Но так как мы используем набор, то все анимации помещаются в элемент set , который представляет класс AnimationSet
Все виды анимаций принимают ряд общих свойств. В частности, свойство android:repeatMode , которое указывает на редим выполнения. Если имеет значение reverse , то анимация выполняется также и в обратную сторону
Свойство android:repeatCount указывает на количество повторов анимации. Значение infinite устанавливает бесконечное число повторов.
Время анимации задается с помощью свойства android:duration
Для всех анимаций также характерно указание начальной и конечной точки трансформации.
Анимация масштабирования
Для анимация масштабирования задается начальное масштабирование по оси х ( android:fromXScale ) и по оси y ( android:fromYScale ) и конечные значения масштабирования android:toXScale и android:toYScale . Например, так как android:fromXScale=1.0, а android:toXScale=0.5, то по ширине будет происходить сжатие на 50%.
Также при масштабировании устанавливаются зачения android:pivotX и android:pivotY , которые указывают на центр масшабирования или опорную точку.
Анимация вращения
Для анимации вращения задается начальное ( android:fromDegrees ) и конечное значения поворота ( android:toDegrees ).
С помощью свойств android:pivotX и android:pivotY также, как и при масштабировании, задается опорная точка вращения.
Анимация прозрачности
Для анимации прозрачности задается начальное значение прозрачности ( android:fromAlpha ) и финальное значение, устанавливамое при завершении анимации ( android:toAlpha ). Все значения варьируютс в диапазоне от 1.0 (непрозрачный) до 0.0 (полностью прозрачный)
Анимация перемещения
Для перемещения также устанавливаются начальные ( android:fromXDelta и android:fromYDelta ) и конечные значения ( android:toXDelta и android:toYDelta )
Для всех анимаций начальные и конечные значения указывают некий диапазон, в котором будут ранжироваться значения. Само вычисление значений на этом промежутке зависит от конкретного алгоритма. В данном случае в качестве алгоритма устанавливается линейная интерполяция. Для этого у корневого элемента set определено свойство android:interpolator=»@android:anim/linear_interpolator» .
Кроме данного значения свойство android:interpolator может принимать еще ряд других: bounce_interpolator, cycle_interpolator и т.д.
Данная анимация будет применяться к элементу ImageView , который определим в файле разметки интерфейса:
Для демонстрации анимации добавим в папку res/drawable какой-нибудь графический файл. В моем случае это файл dubi2.png .
Теперь определим и запустим анимацию в классе MainActivity :
package com.example.animationapp; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; public class MainActivity extends AppCompatActivity < @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView img = findViewById(R.id.animationView); // определим для ImageView какое-нибудь изображение img.setImageResource(R.drawable.dubi2); // создаем анимацию Animation animation = AnimationUtils.loadAnimation(this, R.anim.common_animation); // запуск анимации img.startAnimation(animation); >>
Сначала определяем анимацию по тому файлу common_animation.xml , который содержит набор анимаций:
Animation animation = AnimationUtils.loadAnimation(this, R.anim.common_animation);
img.startAnimation(animation);