Android 사용자 정의view 연습(본방사수 좋아요)

5192 단어
사용자 정의view에서 최종적으로 필요한 것은 베세르 곡선의 학습과 파악이다. 짬을 내서 연습하는 작은 장난감을 썼다.선상 효과 도주: 본 글은 베셀 곡선을 소개하지 않습니다(베셀 곡선을 간단하게 알고 먹는 것을 권장합니다)

효과도


232DDD151CFF89D0B054B97E136FE1DA.png

잔말 말고 코드로 바로 올라가세요.


LikeStarView

public class LikeStarView extends View {
    public static final String TAG = "LikeStarView";
    private Bitmap mBitmap;
    private Point mPoint, mStartPoint, mEndPoint;

    public LikeStarView(Context context) {
        this(context, null);
    }

    public LikeStarView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LikeStarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
       //   。       。
        Resources resources = context.getResources();
        mBitmap = BitmapFactory.decodeResource(resources, R.drawable.ic_fav);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawBitmap(mBitmap, mPoint.x, mPoint.y, new Paint());

        super.onDraw(canvas);
    }


    public void startanim() {
        if (mStartPoint == null) {
            return;
        }
         //     ,  500,201           
        mEndPoint = new Point(mStartPoint.x, mStartPoint.y - 500);//    ,         

        Random random = new Random();
        int result = random.nextInt(201) - 100; //           

        Point controllPoint = new Point(mStartPoint.x + result, mStartPoint.y - 250);//         

        LikeStarEvaluator likeStarEvaluator = new LikeStarEvaluator(controllPoint);
        ValueAnimator animator = ValueAnimator.ofObject(likeStarEvaluator, mStartPoint, mEndPoint);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Point point = (Point) animation.getAnimatedValue();
                mPoint.x = point.x;
                mPoint.y = point.y;

                //     
                setAlpha((float) (point.y - mEndPoint.y) / (float) 500);

                invalidate();
            }
        });

        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
//                  
                ViewGroup viewGroup = (ViewGroup) getParent();
                viewGroup.removeView(LikeStarView.this);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.setDuration(2000);
        animator.setInterpolator(new LinearInterpolator());
        animator.start();

    }

//     
    public void setstartpoint(Point point) {
        this.mStartPoint = point;
        this.mPoint = point;
    }

}

LikeStarEvaluator:

class LikeStarEvaluator implements TypeEvaluator {

   //     ,      
    private Point controllPoint;

    public LikeStarEvaluator(Point controllPoint) {
        this.controllPoint = controllPoint;
    }

    @Override
    public Point evaluate(float t, Point startValue, Point endValue) {
//                    ,              
        int x = (int) ((1 - t) * (1 - t) * startValue.x + 2 * t * (1 - t) * controllPoint.x + t * t * endValue.x);
        int y = (int) ((1 - t) * (1 - t) * startValue.y + 2 * t * (1 - t) * controllPoint.y + t * t * endValue.y);
        return new Point(x, y);//    path     
    }
}


LikeStarActivity: (프리뷰)

public class LikeStarActivity extends AppCompatActivity implements View.OnTouchListener{

    private LinearLayout mTouchView;
    public static final String TAG = "LikeStarActivity";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_like_star);
        mTouchView = (LinearLayout) findViewById(R.id.touchview);
        mTouchView.setOnTouchListener(this);
    }
  
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                LikeStarView likeStarView = new LikeStarView(LikeStarActivity.this);
                //      
                int pointX = (int) event.getRawX();
                int pointY = (int) event.getRawY();
                likeStarView.setstartpoint(new Point(pointX,pointY));
                //     view
                ViewGroup rootView = (ViewGroup) LikeStarActivity.this.getWindow().getDecorView();
                rootView.addView(likeStarView);
                likeStarView.startanim();
                break;
        }
        return super.onTouchEvent(event);
    }
}

그래, 이렇게 간단해.예는 비교적 간단하고 거칠어서 의사소통을 배우는 데만 사용되고 실제 사용에는 화면 사이즈에 맞게 랜덤 색상의 하트를 추가해야 한다.
데모 주소

좋은 웹페이지 즐겨찾기