如何将曲线运动应用于过渡？

Question

按照 this 教程，我能够实现片段之间的共享元素转换。现在我想通过改变共享元素的运动路径来让它变甜。更具体地说，我希望共享元素在弯曲的路径上移动。

根据文档，我可以在转换中添加 ArcMotion，但据我所知 - 使用 ArcMotion。我无法控制曲线弯曲的方向。它在圆形路径上移动，但以逆时针方向移动。现在我的 TransitionSet 看起来如下：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">
    <changeBounds/>
    <changeTransform/>
    <changeImageTransform/>
    <arcMotion 
        android:minimumHorizontalAngle="90" 
        android:minimumVerticalAngle="90" 
        android:maximumAngle="15"/>
</transitionSet>

我可以用什么替换 ArcMotion 来更好地控制曲线？除了圆弧运动，还有其他方法可以实现吗？

Answer 1

为了实现它，我必须创建 PathMotion。例如像这样：

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public class TransitionArcMotion extends PathMotion {
    private static int DEFAULT_RADIUS = 500;
    private float curveRadius;

    public TransitionArcMotion() {

    }

    public TransitionArcMotion(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TransitionArcMotion);
        curveRadius = a.getInteger(R.styleable.TransitionArcMotion_arcRadius, DEFAULT_RADIUS);
        a.recycle();
    }

    @Override
    public Path getPath(float startX, float startY, float endX, float endY) {
        Path arcPath = new Path();

        float midX = startX + ((endX - startX) / 2);
        float midY = startY + ((endY - startY) / 2);
        float xDiff = midX - startX;
        float yDiff = midY - startY;

        double angle = (Math.atan2(yDiff, xDiff) * (180 / Math.PI)) - 90;
        double angleRadians = Math.toRadians(angle);

        float pointX = (float) (midX + curveRadius * Math.cos(angleRadians));
        float pointY = (float) (midY + curveRadius * Math.sin(angleRadians));

        arcPath.moveTo(startX, startY);
        arcPath.cubicTo(startX,startY,pointX, pointY, endX, endY);
        return arcPath;
    }
}

然后我必须将路径运动传递给 TransitionSet 资源：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
           xmlns:app="http://schemas.android.com/apk/res-auto"
           android:duration="250">
<changeBounds>
    <pathMotion class="com.sony.songpal.app.view.motion.TransitionArcMotion" app:arcRadius="250"/>
</changeBounds>
<changeTransform/>
<changeImageTransform/>

Answer 2

只是对 Booyaches 回答的补充。要声明您的 Styleable，您需要进入

res/values/style

在您的样式文件中，您需要添加：

<resources>
  // others styles .....

  <declare-styleable name="TransitionArcMotion">
    <attr name="arcRadius" format="integer" />
  </declare-styleable>

</resources>

或另一个选项，您可以在 res/values 文件夹中创建一个名为 attrs.xml 的新文件，留下下一个路径：

res/values/attrs

并在此文件中添加相同的代码：

<resources>
  // others styles .....

  <declare-styleable name="TransitionArcMotion">
    <attr name="arcRadius" format="integer" />
  </declare-styleable>

</resources>

如何将曲线运动应用于过渡？

How to apply curved motion to a transition?

android

android-animation

android-layout

android-transitions