View-Animation的自定义时间表?

时间:2014-10-18 09:56:18

标签: android animation

我希望能够将时间的任意输入创建为标准Android animation。我想要输入作为用户触摸输入的坐标,而不是运行1秒的动画。这样,当圆形运动中的位置由幻灯片A上的线性输入定义时,我可以创建对象A的圆周运动。

原图:

Illustration

现在我认为这可以通过在XML中定义翻译动画来实现,就像使用/ res / anim下的常规动画一样,但是覆盖来自用户输入控件的时间输入。它也可以用自定义插值器来完成,我不确定。在任何情况下,我都不知道动画的设定开始和结束时间。

任何人对如何实现这一点都有任何建议?

编辑:进一步回答几条评论:想一想用户是否滑动/拖动蓝点。输入之间没有插值。一旦用户抬起手指,“动画”就会停止。

1 个答案:

答案 0 :(得分:1)

如果我理解正确,你需要某种“操纵” - 将一个元素的移动定义为另一个元素的移动。在您的情况下,此功能需要将线性位置转换为圆形位置。 不涉及动画 - 当用户移动蓝色圆圈时,红色圆圈会相应移动。

您应该注册蓝圈运动的回调(例如onTouchEvent,或者更换时的搜索栏,具体取决于您实现'栏'的方式)。然后你计算红色圆圈的新位置然后你把它放在那里。

以下是根据给定的percentValue绘制两个圆圈的自定义视图的简单工作示例。我使用简单的SeekBar测试了它的工作原理:

public class CanvasView extends View {
    private int centerX = 0;
    private int centerY = 0;
    private int radius = 0;
    private final int handleRadius = 25;

    private final Paint circlePaint = new Paint();
    private final Paint handlePaint = new Paint();
    private float percentValue = 0f;

    public CanvasView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public CanvasView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
    }

    public CanvasView(Context context) {
        super(context);
        init();
    }

    private void init() {
        circlePaint.setColor(Color.BLACK);
        handlePaint.setColor(Color.RED);
    }

    // Call this whenever the value of that linear bar is changed - so when the user moves his finger etc.
    public void setValue(float percentage) {
        this.percentValue = percentage;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // this is the main circle
        canvas.drawCircle(centerX, centerY, radius, circlePaint);

        // calculate the angle based on the percentage of the linear movement (substracting (pi/2)     so the zero value is on top)
        double angle = (percentValue / 100) * (2 * Math.PI) - Math.PI / 2;

        // sin and cos to calculate the position of the smaller circle - the 'handle'
        float handleX = centerX + (float) (radius * Math.cos(angle));
        float handleY = centerY + (float) (radius * Math.sin(angle));

        // drawing the circle
        canvas.drawCircle(handleX, handleY, handleRadius, handlePaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // choose whatever values you want here, based on the view's size:
        centerX = w / 2;
        centerY = h / 2;
        radius = w / 3;
    }
}