翻转动画在Android中的一个片段交易设置和QUOT; Z"索引或照相机 [英] Flip animation in Android for a Fragment transaction setting a "z" index or a camera
问题描述
我想两个片段之间的动画交易,与此code: http://developer.android.com/training/animation/cardflip.html
I'm trying to animate transaction between two fragments, with this code: http://developer.android.com/training/animation/cardflip.html
但结果是正是这一点: http://developer.android.com/training /animation/anim_card_flip.mp4
But the result is exactly this: http://developer.android.com/training/animation/anim_card_flip.mp4
不过,我想这样的结果: https://www.youtube.com/watch?v = 52mXHqX9f3Y
However, I want this result: https://www.youtube.com/watch?v=52mXHqX9f3Y
所不同的是,即使寿两个旋转180度,第二个做它用不同的相机(Z轴)。
The difference, is that even tho both rotate 180º, the second one does it with a different camera (Z-Axis).
所以,问题是:
- 我可以申请一个Z-指数为对象的动画?
- 或者,我可以提供一个XML文件的动画类,而不是包含动画的动画片段转换?
感谢。
编辑:检查的差异。
Check differences.
推荐答案
要实现你想要的,你需要做两件事情在你的动画师:
To achieve what you want you need to do two more things in your animators:
- 旋转用枢轴不是默认的(放置在视图的中间) 视图
- 翻译美景,一边旋转
在这两种情况下,你需要知道你的视图的大小,所以我会建议创建自定义布局组件用作您的片段根,露出一组属性,你可以使用不同的 objectanimator
在你的XML。
In both cases you need to know the size of your view, so I would recommend to create your custom layout component to be used as root of your fragments, exposing a set of properties you can animate using different objectanimator
inside your xml.
组件应该是这样的:
public class FlippableLayout extends FrameLayout {
private FlipEvaluator flipRightInEvaluator;
private FlipEvaluator flipRightOutEvaluator;
private FlipEvaluator flipLeftInEvaluator;
private FlipEvaluator flipLeftOutEvaluator;
public FlippableLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public FlippableLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
setCameraDistance(getCameraDistance() * 10); // reduces perspective skewing
flipRightInEvaluator = new FlipEvaluator(
1f, .5f, // pivotX/pivotY
-1f, 0f, // translationX start/end
-180, 0, // rotationY start/end
0f, 1f); // alpha start/end
flipRightOutEvaluator = new FlipEvaluator(
0f, .5f,
0f, 1f,
0, 180,
1f, 0f);
flipLeftInEvaluator = new FlipEvaluator(
.0f, .5f,
1f, 0f,
180, 0,
0f, 1f);
flipLeftOutEvaluator = new FlipEvaluator(
1f, .5f,
0f, -1f,
0, -180,
1f, 0f);
}
public void setFlipRightIn(float value) {
evaluateUsing(flipRightInEvaluator, value);
}
public void setFlipRightOut(float value) {
evaluateUsing(flipRightOutEvaluator, value);
}
public void setFlipLeftIn(float value) {
evaluateUsing(flipLeftInEvaluator, value);
}
public void setFlipLeftOut(float value) {
evaluateUsing(flipLeftOutEvaluator, value);
}
private void evaluateUsing(FlipEvaluator evaluator, float value) {
float cappedValue = Math.min(1f, Math.max(0f, value));
setPivotX(getWidth() * evaluator.getPivotX());
setPivotY(getHeight() * evaluator.getPivotY());
setAlpha(evaluator.getAlpha(cappedValue));
setTranslationX(getWidth() * evaluator.getTranslationX(cappedValue));
setRotationY(evaluator.getRotationY(cappedValue));
}
private static class FlipEvaluator {
private final float pivotX;
private final float pivotY;
private final float startTranslationX;
private final float endTranslationY;
private final float startRotationY;
private final float endRotationY;
private final float startAlpha;
private final float endAlpha;
/**
* Simple evaluator holding all the start/end values for a flip animation.
*
* @param pivotX value between 0 and 1, where 0 is the left border and 1 is the right border of the target
* @param pivotY value between 0 and 1, where 0 is the top border and 1 is the bottom border of the target
* @param startTranslationX value between 0 and 1, where 1 is the width of the target
* @param endTranslationY value between 0 and 1, where 1 is the width of the target
* @param startRotationY value between -180 and 180
* @param endRotationY value between -180 and 180
* @param startAlpha initial alpha
* @param endAlpha final alpha
*/
private FlipEvaluator(float pivotX, float pivotY,
float startTranslationX, float endTranslationY,
float startRotationY, float endRotationY,
float startAlpha, float endAlpha) {
this.pivotX = pivotX;
this.pivotY = pivotY;
this.startTranslationX = startTranslationX;
this.endTranslationY = endTranslationY;
this.startRotationY = startRotationY;
this.endRotationY = endRotationY;
this.startAlpha = startAlpha;
this.endAlpha = endAlpha;
}
public float getPivotX() {
return pivotX;
}
public float getPivotY() {
return pivotY;
}
public float getTranslationX(float t) {
return startTranslationX + (endTranslationY - startTranslationX) * t;
}
public float getRotationY(float t) {
return startRotationY + (endRotationY - startRotationY) * t;
}
public float getAlpha(float t) {
return t < .5f ? startAlpha : endAlpha;
}
}
}
您动画文件将是这样的:
Your animation files will look like this:
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:valueFrom="0"
android:valueTo="1"
android:propertyName="flipLeftIn"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="1000" />
当然,你可以修改 flipLeftIn
与 flipLeftOut
, flipRightIn
或 flipRightOut
,以便将动画应用到一个不同的属性。
Of course you can change flipLeftIn
with flipLeftOut
, flipRightIn
or flipRightOut
in order to apply the animator to a different property.
在你的活动
你可以在你的交易片段像往常一样设置自定义动画,指定你XMLS previously定义的:
In your Activity
you can set custom animations in your fragment transaction as usual, specifying the XMLs you previously defined:
....
getFragmentManager()
.beginTransaction()
.setCustomAnimations(
R.animator.card_flip_right_in, R.animator.card_flip_right_out,
R.animator.card_flip_left_in, R.animator.card_flip_left_out)
....
另一种方法是尽一切的XML,但使用的设置通过XML定义的尺寸值枢轴/翻译是不是可扩展的,如上图所示的解决方案。
The other approach is to do everything in the XML, but setting the pivot/translation using a dimension value defined via XML is not as scalable as the solution shown above.
修改 为了减少相机间的距离,你可以很容易地使用 View.setCameraDistance() 的关于API> 12。我更新了片段,包括这种变化。
EDIT To reduce the camera distance you can easily use View.setCameraDistance() on API>12. I updated the snippet including this change.
这篇关于翻转动画在Android中的一个片段交易设置和QUOT; Z&QUOT;索引或照相机的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!