Как сделать форму звезды и оживить ее в андроиде?

Question

Я хочу сделать форму звезды для моего проекта. и я искал так, теперь я могу, наконец, сделать форму звезды, используя холст.

но то, что я хочу, действительно очень трудно для меня. Это так кошмар. Я пытался и искал, но у меня ничего не работает.

я хочу, чтобы звезда состояла из линий без цвета фона. только линия.. через линию..

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

Answer 1

Этот код взят из проекта, над которым я работал некоторое время назад. Я думаю, что он делает то, что вам нужно.

Прежде всего, я понятия не имею о том, как вы создали линии для звезды. Я просто использовал векторные рисования для создания линий со звездами (подробнее о том, как работать с VectorDrawables, читайте в этом посте). Я должен предупредить вас, что я сделал это в спешке, так что это не будет красиво

Предупреждение: этот пост будет длинным

star1.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">    
    <path android:pathData="M20,24L12,0"
        android:strokeColor="@color/starColor"
        android:strokeWidth="0.1"/>    
</vector>

star2.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">    
    <path android:pathData="M4,24L12,0"
        android:strokeColor="@color/starColor"
        android:strokeWidth="0.1"/>    
</vector>

star3.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">    
    <path android:pathData="M0,8L24,8"
        android:strokeColor="@color/starColor"
        android:strokeWidth="0.1"/>    
</vector>

star4.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path android:pathData="M4,24L24,8"
        android:strokeColor="@color/starColor"
        android:strokeWidth="0.1"/>
</vector>

star5.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path android:pathData="M20,24L0,8"
        android:strokeColor="@color/starColor"
        android:strokeWidth="0.1"/>
</vector>

Хорошо. Теперь, когда у вас есть все необходимые элементы для рисования, давайте перейдем к XML деятельности и создадим макет. Просто основные вещи здесь. Я буду использовать 5 ImageViews для удержания различных звездных линий (что делает анимацию удобной, но может вызвать проблемы с производительностью, о которых мы поговорим позже). Я буду использовать ConstraintLayout как корневой вид.

activity_test.xml

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:alpha="0"/>

    <ImageView
        android:id="@+id/image2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:alpha="0"/>

    <ImageView
        android:id="@+id/image3"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:alpha="0"/>

    <ImageView
        android:id="@+id/image4"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:alpha="0"/>

    <ImageView
        android:id="@+id/image5"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:alpha="0"/>

</android.support.constraint.ConstraintLayout>

Как вы могли заметить, я не назначил какие-либо ImageView с использованием android:src имущество. Я бы посоветовал вам пойти дальше и попробовать это сделать. Тем временем я добавляю изображения программно.

Над onCreate метод объявить следующие переменные

private ImageView image1, image2, image3, image4, image5;
private Context context;
private int i = 1;
private long duration = 800;
private Handler animHandler;

animHandler будет нести ответственность за поддержание анимации. Я буду использовать i чтобы отслеживать какие ImageView оживить. И, как следует из названия, поле duration собирается провести необходимую продолжительность для анимации.

Вот остальная часть кода. Я буду давать комментарии везде, где это возможно.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);

    // Initialising the imageview. I'm using SDK 26 so I did not
    // require typecasting.
    image1 = findViewById(R.id.image1);
    image2 = findViewById(R.id.image2);
    image3 = findViewById(R.id.image3);
    image4 = findViewById(R.id.image4);
    image5 = findViewById(R.id.image5);

    context = TestActivity.this;

    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            setupView(); // This method will initialize all IVs 
                         // and add the vector drawable as bitmap
            animHandler = new Handler();
            startAnim();
        }
    }, 200);

}

setupView

private void setupView() {
    setVectorDrawable(image1, ContextCompat.getDrawable(context,R.drawable.star1));
    setVectorDrawable(image2, ContextCompat.getDrawable(context,R.drawable.star2));
    setVectorDrawable(image3, ContextCompat.getDrawable(context,R.drawable.star3));
    setVectorDrawable(image4, ContextCompat.getDrawable(context,R.drawable.star4));
    setVectorDrawable(image5, ContextCompat.getDrawable(context,R.drawable.star5));
}

setVectorDrawable

private void setVectorDrawable(ImageView imageView, Drawable drawable) {
    Bitmap bitmap = Bitmap.createBitmap(imageView.getWidth(),
            imageView.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);

    imageView.setImageBitmap(bitmap);
}

Здесь я создаю 5 разных растровых изображений для хранения 5 строк. Это пока не будет большой проблемой. Но для больших проектов (мне пришлось использовать 69 растровых изображений вместе) наличие большого количества растровых изображений в памяти, вероятно, не очень хорошая практика. 5 растровых изображений должны работать просто отлично.

startAnim

private void startAnim() {
    runnable.run();
}

работоспособный

Runnable runnable = new Runnable() {
    @Override
    public void run() {
        switch (i) {
            case 1:
                animateStarIn(image1);
                break;
            case 2:
                animateStarIn(image2);
                break;

            case 3:
                animateStarIn(image3);
                break;
            case 4:
                animateStarIn(image4);
                break;

            case 5:
                animateStarIn(image5);
                break;
            case 6:
                animateStartOut(image1);
                break;

            case 7:
                animateStartOut(image2);
                break;
            case 8:
                animateStartOut(image3);
                break;

            case 9:
                animateStartOut(image4);
                break;
            case 10:
                animateStartOut(image5);
                break;
        }
        i++;
        if (i == 11) i = 1;
        animHandler.postDelayed(runnable, duration);
    }
};

private void animateStarIn(ImageView imageView) {
    imageView.animate().alpha(1).setDuration(duration).setInterpolator(new AccelerateInterpolator());
}
private void animateStartOut (ImageView imageView) {
    imageView.animate().alpha(0).setDuration(duration).setInterpolator(new DecelerateInterpolator());
}

Короче говоря, я создаю runnable, который будет оживлять различные ImageViews по-разному в зависимости от значения переменной i держит.

Позвольте мне еще раз подчеркнуть, что я опубликовал этот код из проекта, над которым я работал некоторое время назад. Даже если он не соответствует вашим требованиям, я бы посоветовал вам поэкспериментировать и немного поиграть с ним, чтобы он заработал.

редактировать

Эта анимация работает, обеспечивая runnable повторяется. Чтобы остановить анимацию, используйте

animHandler.removeCallbacks(runnable);

Answer 2

Я не думаю, что вы найдете код для выполнения именно того, что вы хотите, но вы можете взять другой код и адаптировать его.

Вы можете взять код, который рисует звезду построчно на холсте (например, взять его отсюда: нарисовать звезду), и управлять тем, какую линию звезды вы рисуете, а какой нет, в зависимости от времени (построить небольшой "конечный автомат", который управляет этапами).

Вы можете позаботиться о затухании, используя простую анимацию затухания в этом виде на соответствующих этапах.