점과 선으로 제어하여 모양을 변경하는 방법

Question

아래 코드를 사용하여 사용자 정의보기에서 사다리꼴 모양을 만들었습니다.

@Override 
    protected void onDraw(Canvas canvas) { 

     trapezoidPath.moveTo(0,0); 
     trapezoidPath.lineTo(getWidth() ,0); 
     trapezoidPath.lineTo(getWidth() , altitude); 
     trapezoidPath.lineTo(0,getHeight()); 
     trapezoidPath.lineTo(0,0); 
     trapezoidPath.close(); 

     canvas.drawPath(trapezoidPath,paintTrapezoid); 

    } 

그려진 모양은 다음과 같습니다.

나는 (0, 높이)를 이동 사다리꼴 모양이 사각형이 될 때까지 맨 가리 키도록합니다. 그 후 모양이 선이 될 때까지 최종선으로 이동하려고합니다.

생성 된 경로 행에 액세스 할 수있는 방법이 있습니까? 원하는 점을 얻기 위해 포인트를 조작하고 조작 할 수 있습니까? 어떻게하면 안되지?

사용자 응답에 따라이 모양 기반을 애니메이션화해야합니다. 고맙습니다.

Answer 1

ObjectAnimator를 사용하여 onDraw에서 사용하는 변수를 변경하십시오. 아래는 이것을 구현할 수있는 방법의 예입니다.

MainActivity.java

public class MainActivity extends AppCompatActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     final TrapezoidView trapezoidView = findViewById(R.id.trapezoid); 
     final Button resetButton = findViewById(R.id.btn_reset); 
     resetButton.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       trapezoidView.reset(); 
      } 
     }); 
     final Button animateButton = findViewById(R.id.btn_animate); 
     animateButton.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       animateButton.setEnabled(false); 
       resetButton.setEnabled(false); 
       trapezoidView.toNewState(); 
      } 
     }); 
     trapezoidView.setListener(new TrapezoidView.TrapezoidListener() { 
      @Override 
      public void onNewState() { 
       animateButton.setEnabled(true); 
       resetButton.setEnabled(true); 
      } 
     }); 

    } 
} 

TrapezoidView.java

public class TrapezoidView extends View { 

    public interface TrapezoidListener { 
     void onNewState(); 
    } 

    public static final int TRAPEZOID_STATE = 0; 
    public static final int RECTANGLE_STATE = 1; 
    public static final int LINE_STATE = 2; 

    private int mState = TRAPEZOID_STATE; 

    private Paint mTrapezoidPaint; 
    private Path mTrapezoidPath = new Path(); 
    private int mAnimationDuration = 5000; // 5 s in millis 

    private float mRectangleHeight = dpTopx(200); 
    private float mAltitude = mRectangleHeight; 

    private TrapezoidListener mListener; 

    public TrapezoidView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     mTrapezoidPaint = new Paint(); 
     mTrapezoidPaint.setColor(Color.BLACK); 
     mTrapezoidPaint.setStrokeWidth(5.0f); 
     mTrapezoidPaint.setStyle(Paint.Style.STROKE); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 
     mTrapezoidPath.reset(); 
     if (mState == TRAPEZOID_STATE) { 
      mAltitude = getHeight(); 
     } 
     mTrapezoidPath.moveTo(0, 0); 
     mTrapezoidPath.lineTo(getWidth(), 0); 
     if (mState == LINE_STATE) { 
      mTrapezoidPath.lineTo(getWidth(), mAltitude); 
      mTrapezoidPath.lineTo(0, mAltitude); 
     } else { 
      mTrapezoidPath.lineTo(getWidth(), mRectangleHeight); 
      mTrapezoidPath.lineTo(0, mAltitude); 
     } 
     mTrapezoidPath.lineTo(0, 0); 
     mTrapezoidPath.close(); 
     canvas.drawPath(mTrapezoidPath, mTrapezoidPaint); 
    } 

    private float dpTopx(int dp) { 
     return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics()); 
    } 

    public float getAltitude() { 
     return mAltitude; 
    } 

    public void setAltitude(float altitude) { 
     this.mAltitude = altitude; 
     invalidate(); 
    } 

    public void reset() { 
     mState = TRAPEZOID_STATE; 
     mRectangleHeight = dpTopx(200); 
     mAltitude = mRectangleHeight; 
     invalidate(); 
    } 

    public void setListener(TrapezoidListener listener) { 
     mListener = listener; 
    } 

    public void toNewState() { 
     if (mState == LINE_STATE) { 
      mListener.onNewState(); 
      return; 
     } 
     float start; 
     float target; 
     final int targetState = mState == TRAPEZOID_STATE ? RECTANGLE_STATE : LINE_STATE; 
     if (targetState == RECTANGLE_STATE) { 
      start = getHeight(); 
      target = mRectangleHeight; 
     } else { 
      start = mAltitude; 
      target = 0.0f; 
     } 
     ObjectAnimator stateAnimation = ObjectAnimator.ofFloat(TrapezoidView.this, "Altitude", start); 
     stateAnimation.setFloatValues(target); 
     stateAnimation.setDuration(mAnimationDuration); 
     stateAnimation.addListener(
       new Animator.AnimatorListener() { 
        @Override 
        public void onAnimationStart(Animator animation) { 
         mState = targetState; 
        } 

        @Override 
        public void onAnimationEnd(Animator animation) { 
         mListener.onNewState(); 
        } 

        @Override 
        public void onAnimationCancel(Animator animation) { 

        } 

        @Override 
        public void onAnimationRepeat(Animator animation) { 

        } 
       } 
     ); 
     stateAnimation.start(); 
    } 
} 

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:padding="50dp" 
    tools:context="test.example.MainActivity"> 

    <test.example.TrapezoidView 
     android:id="@+id/trapezoid" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="0.9" /> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.1" 
     android:orientation="horizontal"> 

     <Button 
      android:id="@+id/btn_animate" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Animate!" /> 

     <Button 
      android:id="@+id/btn_reset" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Reset" /> 
    </LinearLayout> 

</LinearLayout>