Question

我是Android上的新手，我遇到以下问题：

我有一个空试管（png或bmp）的图像。而且我需要在它上面绘制线条以产生幻觉，即它被液体填充。

我真的不知道如何继续。我已经阅读了谷歌关于动画的文档，但这并没有多大帮助。如果你们能给我一些如何做的建议，我会感激不尽，并指出一些可以帮助我的教程/文档。

提前致谢。

更新：管不是矩形的，底部是椭圆形的。我想我需要让液体落入试管中，然后从底部开始逐行涂漆。我必须检查管的边框（右边和左边黑色像素）。有关如何做到这一点的任何想法？

更新2：这是管图像：http://i61.tinypic.com/2nw0eb9.png

Answer 1

您可以使用SurfaceView绘制您想要的内容：

基本上，您可以锁定曲面的画布 Canvas canvas = mSurfaceView.getHolder().lockCanvas();
然后，使用画布的方法绘制它。 canvas.drawBitmap，canvas.drawLine等。完成后，使用mSurfaceView.getHolder().unlockCanvasAndPost(canvas);锁定画布，然后就完成了。

这是一个快速谷歌搜索的例子： http://android-coding.blogspot.co.il/2011/05/drawing-on-surfaceview.html

Answer 2

最好的方法是使用自定义视图。创建一个新类，扩展View，然后在其onDraw方法中首先绘制图片，然后绘制您的动画。如果你想手工完成，你可以这样做：

private class TestTubeView extends View {

    private int top = 0;

    private Paint myPaint;

    public MyView(Context context) {
        super(context);

        myPaint = new Paint();
        myPaint.setColor(getResources().getColor(R.color.blue));
    }

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

        //First draw your bitmap
        canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.my_testtube), 0, 0, myPaint); //might need to use a different paint

        //Then your "animation" as a static image, that has its position set from a variable, in this case "y" and "x"
        canvas.drawRect(0, top, getWidth(), getHeight(), myPaint);
    }

    //In this method update your variables, that define the positions of your animated lines / bubbles
    public boolean updateAnimation() {
        top++;
        invalidate();

        //So it stops animationg
        return top > getHeight();
    }
}

然后在您的布局中，您将其放入普通视图中：

<com.example.TestTubeView
    android:id="@+id/my_testtube"
    android:layout_width="20dp"
    android:layout_height="200dp" />

然后你用自我重复的Runnable动画它：

    final MyView testTube = findViewById(R.id.my_testtube);
    final Handler myHandler = new Handler();

    myHandler.post(new Runnable() {
        @Override
        public void run() {
            if(testTube.updateAnimation()){
                myHandler.postDelayed(this, 200);
            }
        }
    });

你必须玩大小/高度和类似的东西。另一种方法是使用ObjectAnimatior

Answer 3

Tube Drawable :(这是出于测试目的。您将使用您的管图像） tube.xml （可绘制文件夹）

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="5dp" android:color="#ffccffff" />
    <solid android:color="#00000000" />
</shape>

<强> tube_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >

    <FrameLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout 
            android:id="@+id/orangeJuiceLinearLayout"
            android:layout_width="140dp"
            android:layout_height="0dp"
            android:layout_gravity="bottom"
            android:orientation="vertical"
            android:background="#fff58225">

        </LinearLayout>

        <ImageView
            android:id="@+id/tubeImageView"
            android:layout_width="140dp"
            android:layout_height="220dp"
            android:layout_gravity="center"
            android:background="@drawable/tube"
            android:onClick="fillJuice"
            android:clickable="true" />

    </FrameLayout>
</LinearLayout>

<强> TubeAcivity.java

public class TubeActivity extends Activity {

    LinearLayout orangeLL;
    ImageView tubeIV;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tube_activity);

        orangeLL = (LinearLayout)findViewById(R.id.orangeJuiceLinearLayout);
        tubeIV = (ImageView)findViewById(R.id.tubeImageView);

    }

    public void fillJuice(View view) {

        ValueAnimator va = ValueAnimator.ofInt(0, tubeIV.getMeasuredHeight());
        va.setDuration(1500);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                orangeLL.getLayoutParams().height = value.intValue();
                orangeLL.requestLayout();
            }
        });

        va.start();
    }
}

在图像上绘图以创建动画

3 个答案: