Androidで商品をカートに追加するアニメーション効果（ベッセル曲線）

ショッピングカート機能を追加するプロジェクトを書くとき、通常ショッピングカートに追加する機能があり、ショッピングカートに追加するときに一些のパラボラアニメーションがあります。具体的なコードは以下の通りです：

実現効果は以下の通りです：

考え方：

アニメーションの始点と終点を確定する
始点と終点の間で二次ベ塞尔曲線を使用して始点と終点の間の点の軌跡を埋める
属性アニメーションを設定し、ValueAnimatorの補間器を使用して中央点座標を取得する
アニメーションを実行するコントロールのx、y座標を上記で得た中央点座標に設定する
属性アニメーションを開始する
アニメーションが終わったときの操作

難点：

PathMeasureの使用
- getLength()
- boolean getPosTan(float distance, float[] pos, float[] tan) の理解

関連する知識点：

画面上の絵柄の絶対座標を取得する方法

//アニメーションの開始時の準備として親レイアウトの始点座標を取得します/終了時のポイントの座標）
  int[] parentLocation = new int[2];
  rl.getLocationInWindow(parentLocation);

ベジェ曲線および属性アニメーションインテラポレータValueAnimatorの使用方法
　　

 //    四、中間アニメーションの内挿座標（ベセル曲線）の計算（これはベセル曲線を使用して始点と終点の過程を完了することです）
    //ベセル曲線の描画を開始します
    Path path = new Path();
    //始点に移動します（ベセル曲線の始点）
    path.moveTo(startX, startY);
    //二次サーベル曲線を使用します：注意、最初の始点座標が大きいほど、ベセル曲線の横方向の距離が大きくなります。以下の式子で取るのが一般的です
    path.quadTo((startX + toX) / 2, startY, toX, toY);
    //mPathMeasureはベ塞尔曲線の曲線長さとベセル曲線の中間内挿の座標を計算するために使用されます
    // trueの場合、pathは閉環を形成します
    mPathMeasure = new PathMeasure(path, false);
    //★★★属性动画实现（从0到贝塞尔曲线的長さの間で内挿計算を行い、中間過程の距離値を取得します）
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mPathMeasure.getLength());
    valueAnimator.setDuration(1000);
    // 等速線形補間器
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        // 補間計算が行われる間、中間の各値を取得します。
        // この値は中間過程の曲線長度です（以下にこの値を使用して中央点の座標値を導き出します）
        float value = (Float) animation.getAnimatedValue();
        // ★★★★★現在の点の座標をmCurrentPositionにエンケードします
        // boolean getPosTan(float distance, float[] pos, float[] tan) ：
        // 距離distance（0<=distance<=getLength()）を入力し、次に現在の距離を計算します。
        // 座標点と接線、posに座標が自動的に埋め込まれます。このメソッドは非常に重要です。
        mPathMeasure.getPosTan(value, mCurrentPosition, null);//mCurrentPositionはこの時点で中央距離点の座標値です
        // 移動する商品画像（アニメーション画像）の座標を中央点の座標に設定します
        goods.setTranslationX(mCurrentPosition[0]);
        goods.setTranslationY(mCurrentPosition[1});
      }
    });
//   五、アニメーションの実行開始
    valueAnimator.start();

所有代码：

package cn.c.com.beziercurveanimater;
import android.animation.Animator;
import android.animation.ValueAnimator;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
  private RecyclerView mRecyclerView;
  private ImageView cart;
  private ArrayList<Bitmap> bitmapList = new ArrayList<>();
  private RelativeLayout rl;
  private PathMeasure mPathMeasure;
  /**
   * ベジェ曲線の中央過程の点の座標
   */
  private float[] mCurrentPosition = new float[2];
  private TextView count;
  private int i = 0;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
    initImg();
    MyAdapter myAdapter = new MyAdapter(bitmapList);
    mRecyclerView.setAdapter(myAdapter);
    mRecyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this));
  }
  private void initImg() {
    bitmapList.add(BitmapFactory.decodeResource(getResources(), R.drawable.coin));
    bitmapList.add(BitmapFactory.decodeResource(getResources(), R.drawable.coin1));
    bitmapList.add(BitmapFactory.decodeResource(getResources(), R.drawable.coin91));
  }
  private void initView() {
    mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    cart = (ImageView) findViewById(R.id.cart);
    rl = (RelativeLayout) findViewById(R.id.rl);
    count = (TextView) findViewById(R.id.count);
  }
  class MyAdapter extends RecyclerView.Adapter<MyVH> {
    private ArrayList<Bitmap> bitmapList;
    public MyAdapter(ArrayList<Bitmap> bitmapList) {
      this.bitmapList = bitmapList;
    }
    @Override
    public MyVH onCreateViewHolder(ViewGroup parent, int viewType) {
      LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
      View itemView = inflater.inflate(R.layout.item, parent, false);
      MyVH myVH = new MyVH(itemView);
      return myVH;
    }
    @Override
    public void onBindViewHolder(final MyVH holder, final int position) {
      holder.iv.setImageBitmap(bitmapList.get(position));
      holder.buy.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
          addCart(holder.iv);
        }
      });
    }
    @Override
    public int getItemCount() {
      return bitmapList.size();
    }
  }
  /**
   * ★★★★★商品をショッピングカートに追加するアニメーション効果★★★★★
   * @param iv
   */
  private void addCart(ImageView iv) {
//   一、アニメーションを実行する主体を作り出す---imageview
    //コードでimageviewを作成し、画像リソースは上のimageviewの画像です
    // （この画像はアニメーションを実行する画像で、始点から抛物線（ベ塞尔曲線）を通って、ショッピングカートに移動します）
    final ImageView goods = new ImageView(MainActivity.this);
    goods.setImageDrawable(iv.getDrawable());
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(100, 100);
    rl.addView(goods, params);
//    二、アニメーションの開始計算/終了点の座標の準備
    //アニメーションの開始時の準備として親レイアウトの始点座標を取得します/終了時のポイントの座標）
    int[] parentLocation = new int[2];
    rl.getLocationInWindow(parentLocation);
    //アニメーションの開始時の座標を計算するために商品の画像の座標を取得します
    int startLoc[] = new int[2];
    iv.getLocationInWindow(startLoc);
    //アニメーションの終了後の座標を計算するためにショッピングカートの画像の座標を取得します
    int endLoc[] = new int[2];
    cart.getLocationInWindow(endLoc);
//    三、アニメーションの開始計算を正式に開始します/終了の座標
    //落ち始める商品の始点：商品の始点-親レイアウトの始点+この商品画像の半分
    float startX = startLoc[0] - parentLocation[0] + iv.getWidth() / 2;
    float startY = startLoc[1] - parentLocation[1] + iv.getHeight() / 2;
    //商品が落ちた後の終点座標：ショッピングカートの始点-親レイアウトの始点+ショッピングカートの画像の1/5
    float toX = endLoc[0] - parentLocation[0] + cart.getWidth() / 5;
    float toY = endLoc[1] - parentLocation[1];
//    四、中間アニメーションの内挿座標（ベセル曲線）の計算（これはベセル曲線を使用して始点と終点の過程を完了することです）
    //ベセル曲線の描画を開始します
    Path path = new Path();
    //始点に移動します（ベセル曲線の始点）
    path.moveTo(startX, startY);
    //二次サーベル曲線を使用します：注意、最初の始点座標が大きいほど、ベセル曲線の横方向の距離が大きくなります。以下の式子で取るのが一般的です
    path.quadTo((startX + toX) / 2, startY, toX, toY);
    //mPathMeasureはベ塞尔曲線の曲線長さとベセル曲線の中間内挿の座標を計算するために使用されます
    // trueの場合、pathは閉環を形成します
    mPathMeasure = new PathMeasure(path, false);
    //★★★属性动画实现（从0到贝塞尔曲线的長さの間で内挿計算を行い、中間過程の距離値を取得します）
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mPathMeasure.getLength());
    valueAnimator.setDuration(1000);
    // 等速線形補間器
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        // 補間計算が行われる間、中間の各値を取得します。
        // この値は中間過程の曲線長度です（以下にこの値を使用して中央点の座標値を導き出します）
        float value = (Float) animation.getAnimatedValue();
        // ★★★★★現在の点の座標をmCurrentPositionにエンケードします
        // boolean getPosTan(float distance, float[] pos, float[] tan) ：
        // 距離distance（0<=distance<=getLength()）を入力し、次に現在の距離を計算します。
        // 座標点と接線、posに座標が自動的に埋め込まれます。このメソッドは非常に重要です。
        mPathMeasure.getPosTan(value, mCurrentPosition, null);//mCurrentPositionはこの時点で中央距離点の座標値です
        // 移動する商品画像（アニメーション画像）の座標を中央点の座標に設定します
        goods.setTranslationX(mCurrentPosition[0]);
        goods.setTranslationY(mCurrentPosition[1});
      }
    });
//   五、アニメーションの実行開始
    valueAnimator.start();
//   六、アニメーション終了後の処理
    valueAnimator.addListener(new Animator.AnimatorListener() {
      @Override
      public void onAnimationStart(Animator animation) {
      }
      //アニメーションが終了したとき：
      @Override
      public void onAnimationEnd(Animator animation) {
        // カートの数量を増やします。1
        i++;
        count.setText(String.valueOf(i));
        // 移動中の画像ImageViewを親レイアウトから削除します。
        rl.removeView(goods);
      }
      @Override
      public void onAnimationCancel(Animator animation) {
      }
      @Override
      public void onAnimationRepeat(Animator animation) {
      }
    });
  }
  class MyVH extends RecyclerView.ViewHolder {
    private ImageView iv;
    private TextView buy;
    public MyVH(View itemView) {
      super(itemView);
      iv = (ImageView) itemView.findViewById(R.id.iv);
      buy = (TextView) itemView.findViewById(R.id.buy);
    }
  }
}

これでこの記事は終わりです。皆様の学習に役立つことを願っています。また、ナイアラガイドを多くの人がサポートしていただけることを願っています。

声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードしたものであり、このサイトは所有権を持ちません。また、人間による編集は行われていません。著作権侵害を疑う内容がある場合は、notice#wまでメールを送ってください。3codebox.com（メールの際、#を@に置き換えてください）で通報してください。関連する証拠を提供し、一旦確認ができ次第、このサイトは侵害を疑う内容をすぐに削除します。

基礎教程