Вопрос об анимации датчика Android

Ладно, я пытался сделать это пару дней, и ни к чему не ушел. Итак, у меня есть два следующих изображения:

Во-первых, датчик оборотов.

Датчик числа оборотов в минуту

Второе изображение представляет собой полностью белое изображение, показывающее, что датчик оборотов заполнен:

Full Gauge

Я хочу сделать следующее:

  1. попросите пользователя ввести число оборотов в минуту, например, если он введет значение 1,2, датчик заполнится следующим образом:

output

У меня работает пользовательский ввод, мне нужна помощь с анимацией. Вот что я пробовал:

  1. Я пробовал использовать PorterDuff, но он также фиксирует датчик на заднем плане, а не только белую полосу.
  2. Я пробовал разбивать изображение на маленькие растровые изображения и хранить их в массивах, чтобы я мог вспомнить части, но это было медленно и часто давало сбой.
  3. Я добился некоторого прогресса, применив датчик сначала к холсту, а затем сохранив холст: canvas.save (); затем обрезаем контур на белом изображении и восстанавливаем холст. Однако я не знаю, как закрепить по кругу, начиная с нижнего левого угла до 180 градусов в нижний правый угол (CW). Это лучший способ?

Я знаю, что, вероятно, есть более простой или более эффективный способ сделать это, я просто понятия не имею. У кого-нибудь есть хорошие идеи?

* Обратите внимание, что все изображения в формате PNG.

Заранее спасибо!


android porter-duff animation bitmap gauge
person Mark Manickaraj    schedule 27.05.2011    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Как вы уже выяснили, я бы использовал clip:

  • нарисовать фоновое изображение
  • установить клип
  • рисовать изображение переднего плана

я хотел бы использовать

Canvas.clipPath()

с контуром, похожим на кусок пирога, начинающимся в центре круга, например:

Путь к клипу

Чтобы создать путь к клипу, используйте что-то вроде:

public class PieView extends View {

    private int width = 200;
    private int angleStart = 135;
    private int sweep = 270;

    private Path p;

    private Paint paint = new Paint();

    public PieView(Context context, AttributeSet attrs) {
    super(context, attrs);
        p = new Path();
        //move into center of the circle
        p.setLastPoint(width/2, width/2);
        //add line from the center to arc at specified angle
        p.lineTo(width/2+(float)Math.cos(Math.toRadians(angleStart))*(width/2), 
                 width/2+(float)Math.sin(Math.toRadians(angleStart))*(width/2));
        //add arc from start angle with specified sweep
        p.addArc(new RectF(0, 0, width, width), angleStart, sweep);
        //from end of arc return to the center of circle
        p.lineTo(width/2, width/2);

        paint.setColor(Color.RED);
        paint.setStrokeWidth(1);
        paint.setStyle(Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0,0,width,width, paint);
        canvas.drawPath(p,paint);
    }
}
person Ludevik    schedule 27.05.2011
comment
хорошо, я дам этому шанс. Как бы мне заставить его выглядеть анимированным? как будто он наполнялся? - person Mark Manickaraj; 27.05.2011
comment
реализовать некоторый цикл и соответственно изменить отсечение - person Ludevik; 28.05.2011
comment
Я немного запутался в части отсечения. Итак, есть прямоугольник, который является ограничивающей рамкой шкалы, в которой находится прямоугольник: RectF bounds = new RectF (0,0,200,200); и я хочу сделать clip.addArc (бугорки, начальный угол, угол развертки); Я предполагаю, каким будет мой начальный угол и угол стреловидности? ive попытался от 180 до 0, но, похоже, не дает правильного изображения. - person Mark Manickaraj; 28.05.2011
comment
я создал образец представления, чтобы продемонстрировать использование пути - person Ludevik; 28.05.2011
comment
Итак, вопрос, касающийся анимации, я помещаю в цикл for следующим образом: for (int i = 0; i ‹185; i ++) {p.addArc (new RectF (0,0, width, width), angleStart, i); p.lineTo (ширина / 2, ширина / 2); c.drawPath (p, cPaint); } но он показывает только последнее изображение (когда i = 185), также требуется много времени, чтобы добраться туда (очень медленно), есть ли способ показать эту анимацию эффективным и быстрым способом? - person Mark Manickaraj; 30.05.2011
comment
Я предполагаю, что мне нужно где-то недействительно () - person Mark Manickaraj; 30.05.2011
comment
Да, вы должны вызвать invalidate () где-нибудь, чтобы перерисовать представление. Что касается анимации, я не уверен, как лучше всего ее реализовать. - person Ludevik; 30.05.2011

arrow_upward
1
arrow_downward

Вот как рисовать дуги из Android ApiDemos: http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/Arcs.html.

Затем вам нужно использовать xfermode, чтобы удалить часть верхнего изображения, используя холст, полученный из растрового изображения. Здесь вы можете увидеть один пример этого подхода: Убедитесь, что область растрового изображения прозрачная на ощупь

person Lumis    schedule 27.05.2011