【发布时间】：2017-02-06 13:06:08
【问题描述】：
我正在尝试在两个活动之间进行共享元素转换。
第一个活动有一个圆形图像视图，第二个活动有一个矩形图像视图。我只希望圆圈从第一个活动过渡到第二个活动，当我按回时它变成一个正方形并回到圆圈。
我发现过渡不是那么整齐 - 在下面的动画中，您可以看到矩形 imageview 的大小似乎在缩小，直到它与圆的大小相匹配。方形图像视图出现片刻，然后出现圆圈。我想摆脱方形图像视图，使圆圈成为过渡的终点。
我创建了一个小型测试仓库，您可以在这里下载：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();
}
}
这是我传递给 Picasso 以生成圆的 PureCircleTransformation 类：
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()";
}
}
我明白，在我的第一个活动中，圆圈只是通过应用毕加索转换类被“剪切”出来的，而 imageview 只是一个方形布局，因此它显示为一个圆形。也许这就是我从矩形过渡到正方形时动画看起来像这样的原因，但我真的希望从矩形过渡到圆形。
我认为有办法做到这一点。在 whatsapp 应用程序中，我可以看到效果，但我似乎无法弄清楚他们是如何做到的 - 如果您在 whatsapp 上单击朋友的个人资料图片，该应用程序会将圆形图像视图扩展为正方形。单击返回将使正方形返回圆形。
【问题讨论】：
-
这是您要找的吗？ Link 我问是因为它不完全是 WhatsApp 使用的。
-
其实是的——你是怎么把它变成这样的？我正在寻找比您发布的动画更快的动画，但我可以更改持续时间。您能否将其作为解决方案以及指向您的存储库的链接发布？
-
嗨，西蒙，抱歉耽搁了，周末有点忙。我看到你对 Beloo 的回答没意见。我已经把这个功能变成了一个安卓开源库available here。为开发人员维护的代码越少越好:)。
-
您的图书馆确实令人印象深刻，做得很好。我的应用程序面向 api 16 以上，如果您可以完成 ImageTransitionCompat，我会将您的库合并到我的应用程序的下一个版本中。
标签： android picasso whatsapp android-transitions shared-element-transition