- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我正在尝试在两个 Activity 之间进行共享元素转换。
第一个 Activity 有一个圆形 ImageView ,第二个 Activity 有一个矩形 ImageView 。我只希望圆圈从第一个 Activity 过渡到第二个 Activity ,当我按回时它变成一个正方形并返回到圆圈。
我发现过渡不是那么整齐——在下面的动画中,你可以看到矩形 imageview 的大小似乎在缩小,直到它与圆的大小相匹配。方形 ImageView 出现片刻,然后出现圆圈。我想摆脱方形 ImageView ,使圆圈成为过渡的终点。
我创建了一个小型测试存储库,您可以在此处下载:https://github.com/Winghin2517/TransitionTest
我的第一个 Activity 的代码 - ImageView 位于我的第一个 Activity 的 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;
}
}
这是我的第二个包含矩形 ImageView 的 Activity :
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()";
}
}
我明白,在我的第一个 Activity 中,圆圈只是通过应用 picasso 转换类被“剪切”出来的,并且 ImageView 只是一个方形布局,因此它显示为一个圆形。也许这就是我从矩形过渡到正方形时动画看起来像这样的原因,但我真的希望从矩形过渡到圆形。
我认为有办法做到这一点。在 whatsapp 应用程序中,我可以看到效果,但我似乎无法弄清楚他们是如何做到的 - 如果您在 whatsapp 上单击您 friend 的个人资料图片,该应用程序会将圆形 ImageView 扩展为正方形。单击返回将使正方形返回圆形。
最佳答案
我提议创建一个自定义 View ,它可以动画自己从圆形到矩形并返回,然后通过添加移动动画将自定义过渡包裹在它周围。
代码如下(有值(value)的部分)。
如需完整 sample ,请查看 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
的先前变体并不通用,仅在特定情况下有效。检查没有那个缺点的修改示例
EDITED2:事实证明,您根本不需要自定义过渡,只需从 SecondActivity
中删除设置逻辑,它将以默认方式工作。使用这种方法,您可以设置转换持续时间 this way .
EDITED3:为 api < 18
提供反向移植顺便说一句,您可以使用 such technique 将这些东西反向移植到 Lollipop 之前的设备上。 .已经创建了可以使用动画师的地方
关于Android 共享元素转换 : Transforming an ImageView from a circle to a rectangle and back again,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39749404/
我正在尝试创建一个演示应用程序,我想在其中创建一个 ImageView ,该 ImageView 相互重叠,x 和 y 坐标略有变化(类似于所有纸牌相互重叠的任何纸牌游戏,但我们可以看到数字)。如果用
您好,我有一个要求,我需要通过拖动 ImageView 的右角来调整 ImageView 的大小和旋转 ImageView 。 我可以通过拖动 ImageView 的角成功地调整 ImageView
我目前正在尝试使用 JavaFX 在 ImageView 中居中图像。 所以我在 View 中加载图像: Image img = new Image("..."); imageView.setImag
我有一个非常简单的问题要问:我需要在屏幕右下角的 ImageView 上放一个小 Logo ,整个屏幕都很大,但我不知道如何设置坐标或如何设置说 ImageViews 处于相对位置。 像这样: 最佳答
我想像这样制作一个 ImageView 覆盖另一个 ImageView;只有一半的绿色圆圈覆盖了图像: 我试过使用 RelativeLayout 并将两个 ImageView 都放在里面。然后我使用
我们如何使 ImageView 的宽度和高度等于父 ConstraintLayout 的宽度?所以它显示一个全宽的方形 ImageView。 通常如何设置某个小部件的高度等于其他小部件的宽度? 最佳答
有点像刽子手 如果 ImageView 中有东西,如何跳过 ImageView 并检查其中是否有东西尝试检查 imageView 中是否有图像 代码 final boolean imageT
我正在用 swift 制作一种“保持在线条之间”iPhone 应用程序,我有一个移动 ImageView 和 2 个代表线条的 ImageView 。如何检测移动 ImageView 何时撞击或接触线
我正在做一个应用程序,用户通过单击图像(ImageView1)可以在另一个ImageView2中看到它。所以我尝试在变量中获取 ImageView1 的图像 BufferedImage img= Sw
我有以下看法: 如果我点击任何 ImageButton 以全屏模式显示相应的图像。例如,如果我点击 Black ,它会显示 ImageView ,如: 我还为一些图像按钮将背景设置为全屏颜色:如果我单
我在名为 DialButton2 的类中扩展了 ImageView 类(不要担心类的名称,它无关紧要)。 DialButton2 类所做的只是显示位于可绘制文件夹中的任 Intent 像。 packa
我正在使用 Xcode 8.1 和 swift 3.0 开发应用。 使用 Storyboard ,我扩展了一个 ImageView 以占据整个 View ,并为其设置了一张图片以用作背景图像(使用 s
如何将我的 imageView 裁剪成我在项目中有图像的气泡形状。 最佳答案 以下是调整大小或裁剪图像的简单代码,您只需根据需要为图像传递高度或宽度即可: 获取裁剪图像: UIImage *cropp
我有 92 张图像,我希望有一个指示符(例如复选标记)来指示图像已解锁。我在 .png 文件中有复选标记,我首先尝试的是为每个图像制作单独的副本,并将复选标记放在 Photoshop 中的图像顶部。但
我有两个 ImageView ,它们看起来像这样。我想将 TouchListener 添加到 imageview1。但听众无法正常工作。我正在将 imageview2 添加到 android:foc
我有一个列表布局,其中包含如下所示的项目: 首先有一个 ImageView(灯光),然后是两个 textView。所有这些都在 TableLayout 中。 (来源:http://code.googl
我想知道如何将 ImageView 元素添加到 JavaFx 2.1 中的区域元素。 也许我把这个元素的用法弄错了,但 AFAIK 它也是子元素的容器。 背景是我需要一个定义大小的区域,该区域应显示独
我在调整 StackPane 中的 ImageView 大小时遇到了问题:如果 StackPane 是根容器并且我将图像的高度和宽度绑定(bind)到 StackPane,那么一切都很好。
** 我有两个 ImageView ,一个用于背景,一个用于前景,我正在前景 ImageView 上绘图。对于删除功能,我这样做是因为我不想在删除时删除背景图像。它正在执行很好。现在我想保存该图像(背
我正在尝试为 watch 应用程序创建 ImageView ,我正在尝试以编程方式创建,但经典 View Controller 中使用的代码不起作用。 let imageName = "yourIma
我是一名优秀的程序员,十分优秀!