📘 第13章 图形图像处理

（Bitmap、Canvas、Paint、特效处理、补间动画/逐帧动画/属性动画、绘制小狗、飞舞的鸟和蝴蝶）

---

📑 本章目录

• 13.1 常用的绘图类介绍

  • Bitmap 类

  • BitmapFactory 类

  • Paint 类

  • Canvas 类

• 13.2 实战案例——绘制小狗

• 13.3 为图像添加特效

• 13.4 动画

  • 补间动画（Tween Animation）

  • 逐帧动画（Frame Animation）

  • 属性动画（Property Animation）

• 13.5 实战案例——飞舞的鸟和蝴蝶

---

13.1 常用的绘图类介绍

Android 图形绘制核心四大类：

类名	作用
Bitmap	存储图像像素的数据对象
BitmapFactory	用于加载图片（decode 解析）
Paint	设置画笔样式（颜色、大小、填充）
Canvas	画布，用来绘制 Bitmap、文字、图形

---

Bitmap 类

Bitmap 就是 Android 中的一张图片的像素数据。

常见创建方式：

Bitmap bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888);

从资源加载：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dog);

---

BitmapFactory 类

BitmapFactory 专门用于解析图片资源：

方法	描述
decodeResource()	从 res/drawable 加载图片
decodeFile()	从文件加载
decodeStream()	从输入流加载

示例：

Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.dog);

---

Paint 类

画笔类，用于设置绘制风格，例如：

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
paint.setTextSize(40);

常见属性：

• 颜色（Color）

• 线条粗细（StrokeWidth）

• 字体大小（TextSize）

• 抗锯齿（setAntiAlias）

---

Canvas 类

Canvas = 画布。

用于绘制：

✔ 图片
✔ 圆、矩形、文字
✔ 路径 Path

示例：

protected void onDraw(Canvas canvas) {
    canvas.drawColor(Color.WHITE);
    canvas.drawCircle(200, 200, 50, paint);
}

---

13.2 实战案例——绘制小狗

目标：自定义 View，在屏幕上绘制一只小狗图片。

---

① 新建 DogView.java

public class DogView extends View {

    private Bitmap dog;
    private Paint paint;

    public DogView(Context context, AttributeSet attrs) {
        super(context, attrs);
        dog = BitmapFactory.decodeResource(getResources(), R.drawable.dog); // 你的 dog.png
        paint = new Paint();
        paint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(dog, 100, 200, paint);
    }
}

---

② 布局文件引用

<com.example.demo.DogView
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

---

③ 效果

屏幕中央绘制了一只小狗的图片。

---

13.3 为图像添加特效

常见特效：

• 灰度（黑白）

• 颜色反转

• 模糊（Blur）

• 老照片效果（ColorMatrix）

---

✔ 颜色矩阵示例（黑白照片）

ColorMatrix matrix = new ColorMatrix();
matrix.setSaturation(0);

Paint paint = new Paint();
paint.setColorFilter(new ColorMatrixColorFilter(matrix));

canvas.drawBitmap(bitmap, 0, 0, paint);

---

✔ 怀旧效果（老照片）

ColorMatrix matrix = new ColorMatrix();
matrix.set(new float[]{
        0.393f,0.769f,0.189f,0,0,
        0.349f,0.686f,0.168f,0,0,
        0.272f,0.534f,0.131f,0,0,
        0,0,0,1,0
});

---

13.4 动画

Android 动画分为 3 大类：

---

补间动画（Tween Animation）

包括：

✔ 平移（Translate）
✔ 缩放（Scale）
✔ 旋转（Rotate）
✔ 透明度（Alpha）

XML 示例：res/anim/anim_dog.xml

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:duration="2000"/>

Java 播放：

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_dog);
imageView.startAnimation(animation);

---

逐帧动画（Frame Animation）

就是播放多张图片（像 GIF）。

---

① drawable/bird_animation.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/bird1" android:duration="100"/>
    <item android:drawable="@drawable/bird2" android:duration="100"/>
    <item android:drawable="@drawable/bird3" android:duration="100"/>
</animation-list>

---

② Java 播放

ImageView img = findViewById(R.id.imgBird);
img.setBackgroundResource(R.drawable.bird_animation);
AnimationDrawable anim = (AnimationDrawable) img.getBackground();
anim.start();

---

属性动画（Property Animation）

比 Tween 更强大，可用于移动、旋转、缩放、透明度。

---

示例：让蝴蝶上下飞舞

ObjectAnimator animator = ObjectAnimator.ofFloat(butterflyView, "translationY", 0f, -300f, 0f);
animator.setDuration(3000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.start();

---

13.5 实战案例——飞舞的鸟和蝴蝶

本案例结合 逐帧动画 + 属性动画 实现鸟扑翅膀、蝴蝶飞舞。

---

🐦 1. 鸟扑翅动画（逐帧）

drawable/bird_fly.xml：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/bird1" android:duration="120"/>
    <item android:drawable="@drawable/bird2" android:duration="120"/>
    <item android:drawable="@drawable/bird3" android:duration="120"/>
</animation-list>

Java：

ImageView bird = findViewById(R.id.bird);
bird.setBackgroundResource(R.drawable.bird_fly);
AnimationDrawable anim = (AnimationDrawable) bird.getBackground();
anim.start();

---

🦋 2. 蝴蝶飞舞动画（属性动画）

让蝴蝶左右摆动、上下飞。

ObjectAnimator flyUpDown = ObjectAnimator.ofFloat(butterfly, "translationY", 0, -200, 0);
flyUpDown.setDuration(3000);
flyUpDown.setRepeatCount(ValueAnimator.INFINITE);

ObjectAnimator swing = ObjectAnimator.ofFloat(butterfly, "rotation", -20, 20, -20);
swing.setDuration(1500);
swing.setRepeatCount(ValueAnimator.INFINITE);

AnimatorSet set = new AnimatorSet();
set.playTogether(flyUpDown, swing);
set.start();

---

🧩 最终效果

你能实现：

✔ 用 Canvas 绘图
✔ 显示与操作 Bitmap 图片
✔ 给图像添加颜色特效
✔ 使用补间动画让图片移动/旋转/缩放
✔ 使用逐帧动画播放连贯动作
✔ 使用属性动画实现自然飞行动作

并完成：

🌟 绘制小狗
🌟 飞舞的鸟和蝴蝶动画

可直接用于课程实验、作业、课程设计。