С Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы

Программирование Android

Войти
Регистрация
Восстановить пароль
 
Romankh3
0 / 0 / 0
Регистрация: 05.05.2015
Сообщений: 6
#1

Как нарисовать анимированную линию - Программирование Android

26.02.2016, 12:46. Просмотров 586. Ответов 4

Добрый день, форумчане.
Есть интересная задача!
Необходимо анимировано нарисовать стрелочку из одной точки к другой. Ясно, что программно, чтоб именно в определенный момент.
Есть предложения как это можно сделать?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
26.02.2016, 12:46
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Как нарисовать анимированную линию (Программирование Android):

Как нарисовать ломанную линию под ListView - Программирование Android
Доброго дня. Возникла необходимость под прокручиваемый список добавить ломанную линию. Если использовать одну и ту же картинку то на...

Нарисовать линию - Программирование Android
Привет всем. Почему данный код не рисует линиЮ? package com.exampl1e.tt; import android.content.Context; import...

Нарисовать линию градиентом - Программирование Android
Не подскажите, есть ли простой способ для этого? Нашел один, но это ужас - рисую прямоугольник градиентом и предстоит "подогнать"...

Как сделать линию между а и б - Программирование Android
нужен метод "по умному" :) как это делается?)

Как удалить нижнюю линию MPAndroidChart - Программирование Android
Привет! Товарищи, кто знает как удалить обведенную линию? Пробовал: ...

Как можно сделать линию толще (Google Maps) - Программирование Android
Я рисую путь на Google Map между двумя точками как сделать линию соединяющую эти две точки толще??

4
Spelcrawler
527 / 497 / 111
Регистрация: 12.03.2014
Сообщений: 1,663
Завершенные тесты: 1
26.02.2016, 13:40 #2
Romankh3, точки какие? Заданы жестко или от чего то зависят?
0
Romankh3
0 / 0 / 0
Регистрация: 05.05.2015
Сообщений: 6
26.02.2016, 14:15  [ТС] #3
Это не столь важно. Допустим точки будут показаны так:
(x0,y0) and (xN,yN). начальная и конечная точка. Может быть параллельный переход по y. а Может идти под углом.
0
Spelcrawler
527 / 497 / 111
Регистрация: 12.03.2014
Сообщений: 1,663
Завершенные тесты: 1
26.02.2016, 14:26 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Romankh3, накидал не оптимальный код, но лучше всего показывающий как такое вообще делать.
Кликните здесь для просмотра всего текста

Java
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.View;
 
public class LineDrawView extends View {
 
    private Paint mLinePaint;
    private Paint mPointPaint;
 
    private PointF mStartPoint;
    private PointF mEndPoint;
    private PointF mCurrentEndPoint;
 
    private float mDrawPercent = 0f;
    private float mPercentForFrame;
 
    private static final long FRAME_DURATION = 17;
    
    public LineDrawView(Context context) {
        super(context);
        init();
    }
 
    public LineDrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
 
    public LineDrawView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
 
    private void init() {
        mLinePaint = new Paint();
        mLinePaint.setStyle(Paint.Style.STROKE);
        mLinePaint.setColor(0xFF00FF00);
        mLinePaint.setAntiAlias(true);
        mLinePaint.setStrokeWidth(5);
 
        mPointPaint = new Paint();
        mPointPaint.setStyle(Paint.Style.FILL);
        mPointPaint.setColor(0xFFFF0000);
        mPointPaint.setAntiAlias(true);
 
        mStartPoint = new PointF();
        mEndPoint = new PointF();
        mCurrentEndPoint = new PointF();
    }
 
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        mStartPoint.set(50, 50);
        mEndPoint.set(canvas.getWidth() - 50, canvas.getHeight() - 50);
 
        mCurrentEndPoint = calculateCurrentEndPoint(mStartPoint, mEndPoint, mDrawPercent);
 
        canvas.drawLine(mStartPoint.x, mStartPoint.y, mCurrentEndPoint.x, mCurrentEndPoint.y, mLinePaint);
 
        canvas.drawCircle(mStartPoint.x, mStartPoint.y, 10, mPointPaint);
        canvas.drawCircle(mEndPoint.x, mEndPoint.y, 10, mPointPaint);
    }
 
    public void animateLine(long duration) {
        mPercentForFrame = 1f / ((float) duration  / (float) FRAME_DURATION);
        mDrawPercent = 0f;
 
        postDelayed(new Runnable() {
            @Override
            public void run() {
                mDrawPercent += mPercentForFrame;
                if (mDrawPercent < 1) {
                    invalidate();
                    postDelayed(this, FRAME_DURATION);
                } else {
                    mDrawPercent = 1;
                    invalidate();
                }
            }
        }, FRAME_DURATION);
 
    }
 
    public void animateLine(long duration, PointF startPoint, PointF endPoint) {
        mStartPoint = startPoint;
        mEndPoint = endPoint;
        animateLine(duration);
    }
 
    private PointF calculateCurrentEndPoint(PointF startPoint, PointF endPoint, float drawPercent) {
        //Тут нужно немного вспомнить начальную геометрию
        //Если взять линию из первой точки до последней за гипотенузу,
        //сможем "дорисовать" из линии прямоугольный треугольник, получим его "ширину" и "высоту"
        float triangleWidth = endPoint.x - startPoint.x;
        float triangleHeight = endPoint.y - startPoint.y;
 
        //Очевидно (из теоремы Пифагора), что если оба катета умножить на одно число,
        //то и гипотенуза увеличится в такое же количесвто раз
        //Находим катеты для текущей длины линии
        float currentWidth = triangleWidth * drawPercent; 
        float currentHeight = triangleHeight * drawPercent;
 
        PointF resultPoint = new PointF();
 
        //Ну и тут уже получаем текущие координаты конца линии.
        resultPoint.x = startPoint.x + currentWidth;
        resultPoint.y = startPoint.y + currentHeight;
 
        return resultPoint;
    }
 
 
}


Используется просто - создаем эту вьюшку, вешаем ее куда угодно, и вызываем у нее метод animateLine(long duration)
2
Romankh3
0 / 0 / 0
Регистрация: 05.05.2015
Сообщений: 6
26.02.2016, 16:04  [ТС] #5
Спасибо за ответ. Протестил, заработало. Изучаю класс
0
26.02.2016, 16:04
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.02.2016, 16:04
Привет! Вот еще темы с ответами:

Как нарисовать Bitmap на Canvas'е - Программирование Android
Здравствуйте, возникла проблема не могу поменять обычный фон WHITE на этот...

Как можно нарисовать многоугольник - Программирование Android
Доброе время суток. Как можно нарисовать многоугольник на canvas, если есть размеры сторон углы в градусах и размеры диагоналей. Какие...

Как нарисовать красивую круговую диаграмму - Программирование Android
Пишу приложение, в котором нужно рисовать круговые диаграммы. Использую canvas и drawArc(). Но получается не красиво, слишком примитивно. В...

Как нарисовать много треугольников в opengl? - Программирование Android
Исходник который использую http://developer.alexanderklimov.ru/android/opengles/intro.php у меня около тысячи треугольников,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.