1

我正在尝试在基本上位于我的 RecyclerView 后面的视图上实现动画。我正在使用 ItemTouchHelper.SimpleCallback 类来获取 RecyclerView 上的运动事件并覆盖回调方法onChildDraw()以传播动画。

这个动画基本上是由用户滑动手势控制的。所以这是我的问题。

我在卡片视图上有一个带有电子邮件内容的 RecyclerView。该卡片视图下方的屏幕左侧和右侧有两个图像。此链接内的图像中显示了类似这样的内容：

RecyclerView 内的 CardView 与卡片视图后面的左右图像

最初，红色和粉红色图像是不可见的，并且将在白色卡片视图上的滑动量上进行动画处理。现在，当我在左侧和右侧的白色卡片视图上滑动时，红色和粉红色的图像将按比例显示，alpha 动画。缩放动画从 0.8 开始，alpha 动画从 0 到 255 开始。当这两个动画结束时，红色和粉色图像将朝滑动方向平移。

这是我的代码：

public class ViewItemTouchHelperCallback extends ItemTouchHelper.SimpleCallback {

  private Context mContext;
  private OnViewSwipedListener mOnSwipeListener;

  public interface OnViewSwipedListener {
    void onViewSwiped(float dX);
  }

  public FocusViewItemTouchHelperCallback(int dragDirs, int swipeDirs, Context context, OnViewSwipedListener listener) {
    super(dragDirs, swipeDirs);
    this.mContext = context;
    this.mOnSwipeListener = listener;
  }

  @Override
  public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
    return false;
  }

  @Override
  public void onSwiped(RecyclerView.ViewHolder viewHolder, int swipeDir) {
    if(mContext instanceof ViewActivity) {
      if(viewHolder != null) {
        WebView webView = ((ViewAdapter.MailObjectHolder) viewHolder).webViewBody;
        if(webView != null) {
          webView.clearView();
          webView.loadUrl(Constants.ABOUT_BLANK);

          if(swipeDir == ItemTouchHelper.LEFT) {
            ((ViewActivity) mContext).onSwipedLeft();
          } else if(swipeDir == ItemTouchHelper.RIGHT) {
            ((ViewActivity) mContext).onSwipedRight();
          }
        }
      }
    }
  }

  @Override
  public void onChildDraw(Canvas canvas, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
    if(actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
      if(mOnSwipeListener != null) {
        mOnSwipeListener.onViewSwiped(dX);
      }

      super.onChildDraw(canvas, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }
  }
}

下面是我从上面的类中获取回调的活动代码：

    @Override
  public void onViewSwiped(float dX) {
    if(dX == 0) {
      mFlagEmailIcon.setVisibility(View.INVISIBLE);
      mNextEmailIcon.setVisibility(View.INVISIBLE);
    } else if(dX > 0) {
      //Left to right - flag email

      float swipedWidth = Math.abs(dX) / mFlagEmailIcon.getMeasuredWidth();
      if(swipedWidth >= 1) {
        LogUtils.log(TAG, "Left to right dX = " + dX + "and Swiped width = " + swipedWidth);
        mFlagEmailIcon.setVisibility(View.VISIBLE);
        float scaleChange = Math.scalb(Math.abs(dX) / mFlagEmailIcon.getMeasuredWidth(), 1);
        if(scaleChange >= 0.8 && scaleChange <= 1) {
          mFlagEmailIcon.animate().scaleX(scaleChange).scaleY(scaleChange);
        }

        mFlagEmailIcon.animate().alpha(scaleChange);
      } else {

      }
    } else {
      //Right to left - next email

      float swipedWidth = Math.abs(dX) / mNextEmailIcon.getMeasuredWidth();
      if(swipedWidth >= 1) {
        LogUtils.log(TAG, "Right to left dX = " + dX + "and Swiped width = " + swipedWidth);
        mNextEmailIcon.setVisibility(View.VISIBLE);
        float scaleChange = Math.scalb(Math.abs(dX) / mNextEmailIcon.getMeasuredWidth(), 1);
        if(scaleChange >= 0.8 && scaleChange <= 1) {
          mNextEmailIcon.animate().scaleX(scaleChange).scaleY(scaleChange);
        }

        mNextEmailIcon.animate().alpha(scaleChange);
      } else {

      }
    }
  }

在上面的代码中，我试图根据用户在白卡视图上的滑动量为红色和粉色图像设置动画。但我真的陷入了基于“dX”的计算中，无法弄清楚如何计算动画的值。

注意：- 当用户在卡片上从左到右滑动时，红色图像应该是动画的，当用户在卡片上从右到左滑动时，粉红色图像应该是动画的。动画最初将包含缩放和 alpha 动画，当两个动画完成时，红色或粉色图像将开始向滑动方向平移。

谁能帮我计算基于用户滑动的动画值。如果您对此问题有任何疑问，请提出。我真的陷入了这个问题，并且在网络上的任何地方都没有解决方案。

任何帮助将不胜感激。提前致谢。

4

0 回答 0