Я пытаюсь сделать общий переход между двумя действиями.
Первая активность имеет вид изображения круга, а вторая активность имеет прямоугольное представление. Я просто хочу, чтобы круг переходил от первой активности ко второму действию, где он становится квадратом и обратно к кругу, когда я нажимаю назад.
Я нахожу, что переход не настолько опрятен - в приведенной ниже анимации вы видите, что прямоугольное представление изображения уменьшает размер до тех пор, пока оно не будет соответствовать размеру круга. Квадратное изображение появляется в течение секунды секунды, а затем появляется круг. Я хочу избавиться от квадратного изображения, чтобы круг стал конечной точкой перехода.
Кто-нибудь знает, как это делается?
Я создал небольшое тестовое репо, которое вы можете скачать здесь: https://github.com/Winghin2517/TransitionTest
Код для моего первого действия - образное изображение находится внутри MainFragment
моего первого действия:
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;
}
}
Это мое второе действие, которое содержит прямоугольное изображение:
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, который я передаю в Picasso для генерации круга:
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()";
}
}
Я понимаю, что в моем первом действии круг просто "вырезано", применяя класс трансформации Пикассо и что изображение - это всего лишь квадратный макет, вырезанный так, что он отображается как круг. Возможно, именно по этой причине анимация выглядит так, когда я перехожу от прямоугольника к квадрату, но я действительно хочу, чтобы переход проходил от прямоугольника к кругу.
Я думаю, что есть способ сделать это. В приложении whatsapp я вижу эффект, но я просто не могу понять, как им это удалось - если вы нажмете на картинку профиля своих друзей на whatsapp, приложение расширит кругное изображение круга до квадрата. Щелчок назад вернет квадрат в круг.