《移动终端软件开发技术》第八周作业:图形与多媒体

/ 0评 / 1

开发一个绘制奥运五环图的Android应用程序,同时在此程序中添加一个按钮,单击这个按钮时,对这个五环图实现4种补间动画效果的同时展示。

思路就是在一个FrameLayout里面用Paint画五环,然后用对FrameLayout进行补间动画。

绘制五环的代码:

package bupt.hkt2017211874.lab08;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class DrawView extends View {
    public DrawView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int radius=80;
        Paint paint = new Paint();
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLUE);
        canvas.drawCircle(200,200,radius,paint);
        paint.setColor(Color.YELLOW);
        canvas.drawCircle(300,300,radius,paint);
        paint.setColor(Color.BLACK);
        canvas.drawCircle(400,200,radius,paint);
        paint.setColor(Color.GREEN);
        canvas.drawCircle(500,300,radius,paint);
        paint.setColor(Color.RED);
        canvas.drawCircle(600,200,radius,paint);
        super.onDraw(canvas);
    }
}

在项目的资源文件中创建的动画资源文件anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="3000">
    </rotate>
    <scale
        android:interpolator="@android:anim/decelerate_interpolator"
        android:fromXScale="1"
        android:toXScale="4.0"
        android:fromYScale="1"
        android:toYScale="4.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="true"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:duration="3000"/>
    <translate
        android:fromXDelta="0"
        android:toXDelta="200"
        android:fromYDelta="0"
        android:toYDelta="-100"
        android:fillAfter="true"
        android:repeatMode="reverse"
        android:repeatCount="1"
        android:duration="3000">
    </translate>
    <alpha android:fromAlpha="1"
        android:toAlpha="0"
        android:fillAfter="true"
        android:repeatMode="reverse"
        android:repeatCount="1"
        android:duration="3000"/>
</set>

最后是主函数的调用

MainActivity.java

package bupt.hkt2017211874.lab08;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.FrameLayout;

public class MainActivity extends Activity {

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

        //获取各个动画资源
        final Animation anim= AnimationUtils.loadAnimation(this, R.anim.anim);

        final FrameLayout f=(FrameLayout) findViewById(R.id.frame);
        f.addView(new DrawView(this));

        Button btn=(Button)findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                f.startAnimation(anim); //启动旋转动画
            }
        });
    }
}

最后效果

画出的五环,点击下面的按钮开始变,四种补间动画同时播放。

旋转,位移

变大变小

透明度渐变

发表评论

电子邮件地址不会被公开。 必填项已用*标注