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

Question

在本教程之后,我能够实现片段之间的共享元素转换.现在我想通过改变共享元素的运动路径来使它变甜.更具体地说,我希望共享元素在弯曲的路径上行进.

根据文档,我可以添加一个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/>