Android共享元素过渡:将ImageView从圆形转换为矩形，然后再次返回 [英] Android Shared Element Transition: Transforming an ImageView from a circle to a rectangle and back again
问题描述
我正在尝试在两个活动之间进行共享元素转换.
I'm trying to do a shared element transition between two activities.
第一个活动具有圆形的图像视图，第二个活动具有矩形的图像视图.我只想让圆圈从第一个活动过渡到第二个活动，在第二个活动中它变成一个正方形，然后按回去就回到圆圈.
The first activity has a circle imageview and the second activity has a rectangular imageview. I just want the circle to transition from the first activity to the second activity where it becomes a square and back to the circle when I press back.
我发现过渡并不是那么整洁-在下面的动画中，您可以看到矩形imageview的大小似乎减小了，直到它与圆的大小匹配为止.出现一秒钟的正方形图像视图，然后出现圆圈.我想摆脱正方形的imageview，以便圆成为过渡的终点.
I find that the transition is not so neat - in the animation below, you can see that the rectangular imageview seem to reduce in size until it matches the size of the circle. The square imageview appears for a split second and and then the circle appears. I want to get rid of the square imageview so that the circle becomes the end point of the transition.
有人知道这是怎么做的吗?
Anyone know how this is done?
我创建了一个小型测试仓库，您可以在此处下载: https://github.com/Winghin2517/TransitionTest
I have create a small test repo that you can download here: https://github.com/Winghin2517/TransitionTest
我的第一个活动的代码-imageview位于我的第一个活动的MainFragment内:
The code for my first activity - the imageview sits within the MainFragment of my first activity:
public class MainFragment extends android.support.v4.app.Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_view, container,false);
final ImageView dot = (ImageView) view.findViewById(R.id.image_circle);
Picasso.with(getContext()).load(R.drawable.snow).transform(new PureCircleTransformation()).into(dot);
dot.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent i = new Intent(getContext(), SecondActivity.class);
View sharedView = dot;
String transitionName = getString(R.string.blue_name);
ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(), sharedView, transitionName);
startActivity(i, transitionActivityOptions.toBundle());
}
});
return view;
}
}
这是我的第二个活动，其中包含矩形的imageview:
This is my second activity which contains the rectangular imageview:
public class SecondActivity extends AppCompatActivity {
ImageView backdrop;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
backdrop = (ImageView) findViewById(R.id.picture);
backdrop.setBackground(ContextCompat.getDrawable(this, R.drawable.snow));
}
@Override
public void onBackPressed() {
supportFinishAfterTransition();
super.onBackPressed();
}
}
这是我传递给毕加索生成圆的PureCircleTransformation类:
This is the PureCircleTransformation class that I pass into Picasso to generate the circle:
package test.com.transitiontest;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import com.squareup.picasso.Transformation;
public class PureCircleTransformation implements Transformation {
private static final int STROKE_WIDTH = 6;
@Override
public Bitmap transform(Bitmap source) {
int size = Math.min(source.getWidth(), source.getHeight());
int x = (source.getWidth() - size) / 2;
int y = (source.getHeight() - size) / 2;
Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
if (squaredBitmap != source) {
source.recycle();
}
Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());
Canvas canvas = new Canvas(bitmap);
Paint avatarPaint = new Paint();
BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
avatarPaint.setShader(shader);
float r = size / 2f;
canvas.drawCircle(r, r, r, avatarPaint);
squaredBitmap.recycle();
return bitmap;
}
@Override
public String key() {
return "circleTransformation()";
}
}
我确实了解到，在我的第一个活动中，通过应用Picasso转换类只是切出"了圆，并且imageview只是切出的正方形布局，因此它看起来像一个圆.也许这就是为什么当我从矩形过渡到正方形时动画看起来像这样的原因，但是我真的希望过渡从矩形过渡到圆形.
I do understand that in my first activity, the circle is just 'cut' out by applying the Picasso transformation class and that the imageview is just a square layout cut out so that it appears as a circle. Maybe this is the reason why the animation looks like this as I'm transitioning from a rectangular to a square, but I really want the the transition to go from the rectangular to a circle.
我认为有办法做到这一点.在whatsapp应用程序中，我可以看到效果，但似乎无法弄清楚他们是如何做到的-如果您在whatsapp上单击朋友的头像，则该应用程序会将圆圈imageview扩展为正方形.单击返回将使正方形回到圆形.
I think there is a way to do this. In the whatsapp app, I can see the effect but I just cannot seem to figure out how they managed to do it - If you click on the profile picture of your friends on whatsapp, the app expands the circle imageview to a square. Clicking back will return the square to the circle.
推荐答案
我提供了一个自定义视图，该视图可以使自己从圆到矩形再到后方进行动画处理，然后在其周围添加自定义过渡并添加移动动画.
I offer to create a custom view, which can animate itself from circle to rect and back and then wrap custom transition around it with adding moving animation.
外观如何:
How it is looks like:
代码在下面(重要部分).
有关完整示例，请检查我的github .
Code is below (valuable part).
For full sample, check my github.
CircleRectView.java:
public class CircleRectView extends ImageView {
private int circleRadius;
private float cornerRadius;
private RectF bitmapRect;
private Path clipPath;
private void init(TypedArray a) {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2
&& Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
setLayerType(LAYER_TYPE_SOFTWARE, null);
}
if (a.hasValue(R.styleable.CircleRectView_circleRadius)) {
circleRadius = a.getDimensionPixelSize(R.styleable.CircleRectView_circleRadius, 0);
cornerRadius = circleRadius;
}
clipPath = new Path();
a.recycle();
}
public Animator animator(int startHeight, int startWidth, int endHeight, int endWidth) {
AnimatorSet animatorSet = new AnimatorSet();
ValueAnimator heightAnimator = ValueAnimator.ofInt(startHeight, endHeight);
ValueAnimator widthAnimator = ValueAnimator.ofInt(startWidth, endWidth);
heightAnimator.addUpdateListener(valueAnimator -> {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = getLayoutParams();
layoutParams.height = val;
setLayoutParams(layoutParams);
requestLayoutSupport();
});
widthAnimator.addUpdateListener(valueAnimator -> {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = getLayoutParams();
layoutParams.width = val;
setLayoutParams(layoutParams);
requestLayoutSupport();
});
ValueAnimator radiusAnimator;
if (startWidth < endWidth) {
radiusAnimator = ValueAnimator.ofFloat(circleRadius, 0);
} else {
radiusAnimator = ValueAnimator.ofFloat(cornerRadius, circleRadius);
}
radiusAnimator.setInterpolator(new AccelerateInterpolator());
radiusAnimator.addUpdateListener(animator -> cornerRadius = (float) (Float) animator.getAnimatedValue());
animatorSet.playTogether(heightAnimator, widthAnimator, radiusAnimator);
return animatorSet;
}
/**
* this needed because of that somehow {@link #onSizeChanged} NOT CALLED when requestLayout while activity transition end is running
*/
private void requestLayoutSupport() {
View parent = (View) getParent();
int widthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth(), View.MeasureSpec.EXACTLY);
int heightSpec = View.MeasureSpec.makeMeasureSpec(parent.getHeight(), View.MeasureSpec.EXACTLY);
parent.measure(widthSpec, heightSpec);
parent.layout(parent.getLeft(), parent.getTop(), parent.getRight(), parent.getBottom());
}
@Override
public void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//This event-method provides the real dimensions of this custom view.
Log.d("size changed", "w = " + w + " h = " + h);
bitmapRect = new RectF(0, 0, w, h);
}
@Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
clipPath.reset();
clipPath.addRoundRect(bitmapRect, cornerRadius, cornerRadius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
}
@TargetApi(Build.VERSION_CODES.KITKAT)
public class CircleToRectTransition extends Transition {
private static final String TAG = CircleToRectTransition.class.getSimpleName();
private static final String BOUNDS = "viewBounds";
private static final String[] PROPS = {BOUNDS};
@Override
public String[] getTransitionProperties() {
return PROPS;
}
private void captureValues(TransitionValues transitionValues) {
View view = transitionValues.view;
Rect bounds = new Rect();
bounds.left = view.getLeft();
bounds.right = view.getRight();
bounds.top = view.getTop();
bounds.bottom = view.getBottom();
transitionValues.values.put(BOUNDS, bounds);
}
@Override
public void captureStartValues(TransitionValues transitionValues) {
captureValues(transitionValues);
}
@Override
public void captureEndValues(TransitionValues transitionValues) {
captureValues(transitionValues);
}
@Override
public Animator createAnimator(ViewGroup sceneRoot, TransitionValues startValues, TransitionValues endValues) {
if (startValues == null || endValues == null) {
return null;
}
if (!(startValues.view instanceof CircleRectView)) {
Log.w(CircleToRectTransition.class.getSimpleName(), "transition view should be CircleRectView");
return null;
}
CircleRectView view = (CircleRectView) (startValues.view);
Rect startRect = (Rect) startValues.values.get(BOUNDS);
final Rect endRect = (Rect) endValues.values.get(BOUNDS);
Animator animator;
//scale animator
animator = view.animator(startRect.height(), startRect.width(), endRect.height(), endRect.width());
//movement animators below
//if some translation not performed fully, use it instead of start coordinate
float startX = startRect.left + view.getTranslationX();
float startY = startRect.top + view.getTranslationY();
//somehow end rect returns needed value minus translation in case not finished transition available
float moveXTo = endRect.left + Math.round(view.getTranslationX());
float moveYTo = endRect.top + Math.round(view.getTranslationY());
Animator moveXAnimator = ObjectAnimator.ofFloat(view, "x", startX, moveXTo);
Animator moveYAnimator = ObjectAnimator.ofFloat(view, "y", startY, moveYTo);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(animator, moveXAnimator, moveYAnimator);
//prevent blinking when interrupt animation
return new NoPauseAnimator(animatorSet);
}
MainActivity.java:
view.setOnClickListener(v -> {
Intent intent = new Intent(this, SecondActivity.class);
ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, view, getString(R.string.circle));
ActivityCompat.startActivity(MainActivity.this, intent , transitionActivityOptions.toBundle());
});
SecondActivity.java:
@Override
protected void onCreate(Bundle savedInstanceState) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().setSharedElementEnterTransition(new CircleToRectTransition().setDuration(1500));
getWindow().setSharedElementExitTransition(new CircleToRectTransition().setDuration(1500));
}
super.onCreate(savedInstanceState);
...
}
@Override
public void onBackPressed() {
supportFinishAfterTransition();
}
已编辑:CircleToRectTransition的先前变体并不通用，仅在特定情况下有效.检查修改后的示例，没有那个缺点
EDITED: Previous variant of CircleToRectTransition wasn't general and worked only in specific case. Check modified example without that disadvantage
EDITED2 :事实证明，您根本不需要自定义转换，只需从SecondActivity中删除设置逻辑，它将以默认方式运行.使用这种方法，您可以以此方式设置过渡持续时间.
EDITED2: It turns out that you don't need custom transition at all, just remove setup logic from SecondActivity and it will be working via default way. With this approach you could set transition duration this way.
EDITED3 :为api< 18
EDITED3: Provided backport for api < 18
By the way, you can backport this stuff onto pre-lollipop devices with using such technique. Where you can use animators have been already created
这篇关于Android共享元素过渡:将ImageView从圆形转换为矩形，然后再次返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
