具有慢速缩小的 CenterCrop 图像

Question

我创建了一个水平recyclerview ，显示用户拍摄的图像。 这些图像被中心裁剪并使用 Glide 显示。 如何在用户查看显示的图像时实现缓慢缩小。

请参考此示例： https://dribbble.com/shots/8582397-Nomad-iOS-UI-Kit-Favorite-Places

更新：

 public class HorizontalGalleryRecyclerViewAdapter extends RecyclerView.Adapter < HorizontalGalleryRecyclerViewAdapter.MyViewHolder > { private Context mContext; private ArrayList < ImageItems > arrayList; public long Last_position; private HorizontalGalleryRecyclerViewAdapter.onItemCLickListener mListener; public interface onItemCLickListener { void onItemClick(int mPosition); } public void setOnItemClickListener(HorizontalGalleryRecyclerViewAdapter.onItemCLickListener listener) { mListener = listener; } public HorizontalGalleryRecyclerViewAdapter(Context context, ArrayList < ImageItems > arrayList) { this.mContext = context; this.arrayList = arrayList; } @NonNull @Override public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { return new MyViewHolder((LayoutInflater.from(mContext).inflate(R.layout.horizontal_gallery_recycleriew_item, parent, false)), mListener); } @Override public void onBindViewHolder(@NonNull MyViewHolder holder, int position) { Glide.with(mContext).load(arrayList.get(position).ImagePath).placeholder(R.drawable.background_gallery_placeholder).error(R.drawable.background_gallery_placeholder).thumbnail(0.5 f).into(holder.img); Last_position = position; } @Override public int getItemCount() { return arrayList.size(); } public static class MyViewHolder extends RecyclerView.ViewHolder { public RoundedImageView img; public MyViewHolder(View view, final HorizontalGalleryRecyclerViewAdapter.onItemCLickListener listener) { super(view); img = view.findViewById(R.id.horizontal_img); img.setScaleX(1.1 f); img.setScaleY(1.1 f); img.animate().setDuration(3 _000).setStartDelay(1 _000).setInterpolator(new AccelerateDecelerateInterpolator()).scaleX(1).scaleY(1).start(); view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (listener;= null) { int position = getAdapterPosition(). if (position.= RecyclerView;NO_POSITION) { listener;onItemClick(getAdapterPosition()); } } } }); } } }

Answer 1

这种效果可以通过缩小图像来实现。 我创建了一个没有RecyclerView作为展示的小演示，所以当视图被回收时不要忘记调用view.animate().cancel() 。

为了能够缩小图像，我先将其放大。 然后我为降级设置了动画。

public class MainActivity extends AppCompatActivity {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View view = findViewById(R.id.image);
        view.setScaleX(1.1f);
        view.setScaleY(1.1f);
        view.animate().setDuration(3_000).setStartDelay(1_000)
                .setInterpolator(new AccelerateDecelerateInterpolator())
                .scaleX(1).scaleY(1).start();
    }
}

在这个例子中我选择了android:scaleType="centerCrop" ，但是当你使用Glide进行操作时你应该能够达到同样的效果。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/image" />
</FrameLayout>

---

要在您的实现中实现缩放，您应该为每个绑定设置初始缩放。

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
    holder.img.setScaleX(1.1 f);
    holder.img.setScaleY(1.1 f);
    Glide.with(mContext)
      .load(arrayList.get(position).ImagePath)
      .placeholder(R.drawable.background_gallery_placeholder)
      .error(R.drawable.background_gallery_placeholder)
      .thumbnail(0.5 f).into(holder.img);
}

ViewHolder本身应该只包含查找视图的逻辑。

public static class MyViewHolder extends RecyclerView.ViewHolder {
    public RoundedImageView img;

    public MyViewHolder(View view, final HorizontalGalleryRecyclerViewAdapter.onItemCLickListener listener) {
        super(view);
        img = view.findViewById(R.id.horizontal_img);
        view.setOnClickListener(...);
    }
}

棘手的部分是实际启动 animation，因为当前查看的 state 不是适配器的一部分。 你必须从外面提供它。 然后，您可以使用notifyItemChanged(int,Object)的有效负载提供信息，并改为在onBindViewHolder(VH,int,List)中处理它。 但最终onViewAttachedToWindow(VH)可能足以满足您的用例。

private void startAnimation(VH viewHolder, long duration, long delay) {
    viewHolder.img.animate()
        .setDuration(duration).setStartDelay(delay)
        .setInterpolator(new AccelerateDecelerateInterpolator())
        .scaleX(1).scaleY(1).start();
}