별 모양을 만들고 Android에서 애니메이션을 만드는 방법은 무엇입니까?

내 프로젝트에 별 모양을 만들고 싶습니다. 그리고 저는 이렇게 검색했습니다. 이제 캔버스를 사용하여 마침내 별 모양을 만들 수 있습니다.별 모양을 만들고 Android에서 애니메이션을 만드는 방법은 무엇입니까?

하지만 다음에 내가 원하는 것은 내게 정말로 어렵다. 너무 악몽 같아요. 시도하고 검색했지만 나에게 맞는 것은 없습니다.

스타가 원하는 것은 배경색이없는 선으로 이루어져야합니다. 라인 .. .. 라인을 넘어.

그리고 나서 한 라인이 표현되고 사라지고, 다음 라인이 생성되고 다시 사라지게된다. 그리고 라인이 생성되고 다시 사라지게되고, 나는 이것을 영구적으로 원한다. 동작. 이 활동 화면을 다른 화면으로 옮길 때까지.

2017-09-26 Juli di

이 코드는 내가 몇 시간 전에 작업 한 프로젝트에서 가져온 것입니다. 나는 그것이 당신이 필요로하는 것을한다고 생각합니다.

우선, 별에 대한 선을 어떻게 작성했는지 전혀 알 수 없습니다. 방금 벡터 드로어 블을 사용하여 별표를 만들었습니다 (VectorDrawables를 사용하는 방법에 대한 자세한 내용은 this 게시물을 참조하십시오). 꽤 될 수 없습니다, 그래서 나는 서둘러 그것을 만든 있음을 경고한다

경고 :이 게시물이 오래 될 것입니다

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>

백45경1천5백15조5백36억9천1백36만3천2백10

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="M20,24L0,8" 
     android:strokeColor="@color/starColor" 
     android:strokeWidth="0.1"/> 
</vector>

확인

<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. 이제 필요한 드로어 블을 모두 확보 했으므로 Activity XML로 이동하여 레이아웃을 작성해 보겠습니다. 그냥 여기에 기본적인 것들. 다른 별표 줄을 보유하려면 5 ImageView을 사용합니다 (애니메이션 효과가 좋지만 나중에 성능 문제가 발생할 수 있음). 루트보기로 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>

나는 android:src 속성을 사용하여 ImageView에 드로어 블 중 하나를 지정하지 않았습니다. 나는 당신이 계속해서 그 일을 시도하도록 권합니다. 그 동안 이미지를 프로그래밍 방식으로 추가하고 있습니다. 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); }

이쪽

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); }

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 setupView, 나는 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()); }

, 내가 i가 보유하고있는 값 변수에 따라 다른 ImageViews 다른 애니메이션 것이다 실행 가능한을 만드는 오전 간단한한다.

제가이 코드를 제가 몇 시간 전에 작업 한 프로젝트에서 게시했다고 다시 강조하겠습니다. 그것이 당신의 요구를 직접적으로 충족시키지 못한다 할지라도, 나는 당신이 그것을 실험하기 위해 약간 실험하고 놀기를 권장합니다.

편집

이 애니메이션은 runnable 반복을 보장하는 방식으로 작동합니다. 애니메이션 사용을 중지하려면

animHandler.removeCallbacks(runnable);

출처

2017-09-26 06:08:40

와우 .. 믿기지가 않아. 그것은 완벽합니다. 하지만 "애니메이션을 적용하는 데 편리하지만 나중에 성능 문제가 발생할 수 있습니다." 이걸 내 앱에 넣을거야. 성능 문제가 있습니까? 최적화를 사용하는 것보다 최적화와 관련하여 더 좋은 점이 있습니까? 예를 들어, GIF를 작성하고 첨부하십시오. 기능은 완벽하지만 마지막으로 성능 문제에 대해 질문하고 싶습니다. –

@Julidi 만약 우리가 5'ImageView's에 대해서 이야기하고 있다면 그것은 그와 같은 성능에 영향을 미치지 않을 것입니다. 안드로이드 모니터는 사용되는 7MB를 보여줍니다 (그리 많지는 않음). 또한,이 예제에서는'ImageView' 크기를'200dp '로 사용했습니다. 75dp라고 말하면 메모리 사용량이 1-2MB로 줄어 듭니다. canvas에 그리기 위해'path'를 사용하는 것이 메모리 효율적이지만 시간이 오래 걸릴 것입니다. –

그리고 그것을 멈추는 방법 ?? –

나는 당신이 원하는 것을 정확하게하기위한 코드를 찾지 못할 것이라고 생각하지만, 다른 코드를 가지고 그것을 적용 할 수 있습니다.

캔버스에 한 줄씩 별표를 그려주는 코드를 가져 와서 (예 : drawing a star) 여기에서 가져 와서 별을 그리는 행과 시간에 맞지 않는 행을 관리 할 수 있습니다 (빌드 스테이지를 관리하는 작은 '상태 머신').

이 단계에서 적절한 페이드 애니메이션을 사용하여 페이드를 처리 할 수 있습니다.

출처

2017-09-26 06:03:52 yakobom

예, 나는이 예를 보았습니다. –

별 모양을 만들고 Android에서 애니메이션을 만드는 방법은 무엇입니까?

답변

관련 문제