Android Matrix的使用与自定义动画

最新推荐文章于 2024-02-09 00:36:01 发布

转载最新推荐文章于 2024-02-09 00:36:01 发布 · 378 阅读

Android面试专栏收录该内容

42 篇文章

订阅专栏

本文深入探讨了Android中图形变换的基本原理，包括平移、旋转、缩放和错切等核心变换方式。通过实例代码展示了如何使用Matrix类进行图形变换，并详细解析了set、pre和post方法的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变形矩阵的原理

Android对图形的处理通过矩阵，每个像素点都有其X，Y坐标信息，图形变换矩阵是一个3X3的矩阵，通过变换矩阵与位置矩阵相乘得到新的位置矩阵，从而可以通过不同的变换矩阵实现不同的变换效果。
这里写图片描述
图形变换主要有以下四个基本的变换：

Translate，平移
Rotate，旋转
Scale，缩放
Skew，错切

可以知道基本的变换矩阵是对角a e i为1，其余为0，这样变换后不会改变坐标,一般使g h为0， i为1，这样坐标矩阵的最后一个为1恒成立。
以平移为例，假设x方向平移dx，y方向平移dy，那么应该是在基本矩阵的基础上将c f分别改为dx dy，这样的到的坐标矩阵就是X+dx, Y+dy, 1。

下面以一个小例子说明
自定义一个类MyVIew继承View

public class MyView extends View {

    Context context;

    private Matrix mMatrix;

    private float[] m;

    private int i = 1;


    public MyView(Context context) {
        super(context);
        m = new float[]{1, 0, 0, 0, 1, 0, 0, 0, 1};
        mMatrix = new Matrix();
        mMatrix.setValues(m);
        this.context = context;
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        m = new float[]{1, 0, 0, 0, 1, 0, 0, 0, 1};
        mMatrix = new Matrix();
        mMatrix.setValues(m);
        this.context = context;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(BitmapFactory.decodeResource(context.getResources(), R.mipmap.ic_launcher), mMatrix, null);
    }

    public void change(Matrix matrix) {
        mMatrix = matrix;
        invalidate();
    }

}
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

初始变换矩阵就是基础矩阵，通过drawBitmap传入矩阵画出bitmap，定义一个方法传入matrix传入心得matrix，然后改变mMtrix绘图。
布局文件

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

    <com.example.wulinpeng.matrixtest.MyView
        android:id="@+id/iv_test"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:id="@+id/btns"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true">

            <Button
                android:id="@+id/change"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Change"/>

            <Button
                android:id="@+id/reset"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Reset"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/bottom"
            android:layout_above="@id/btns"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText

                android:id="@+id/G"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="0"/>

            <EditText
                android:id="@+id/H"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="0"/>

            <EditText
                android:id="@+id/I"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="1"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/center"
            android:layout_above="@id/bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText

                android:id="@+id/D"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="0"/>

            <EditText
                android:id="@+id/E"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="1"/>

            <EditText
                android:id="@+id/F"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="0"/>

        </LinearLayout>

        <LinearLayout
            android:layout_above="@id/center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText

                android:id="@+id/A"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="1"/>

            <EditText
                android:id="@+id/B"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="0"/>

            <EditText
                android:id="@+id/C"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="0"/>

        </LinearLayout>

    </RelativeLayout>
</LinearLayout>

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

设置9个EditText设置Matrix，并为change按钮设置监听，调用change方法

                float[] m = new float[]{
                        Integer.parseInt(a.getText().toString()),
                        Integer.parseInt(b.getText().toString()),
                        Integer.parseInt(c.getText().toString()),
                        Integer.parseInt(d.getText().toString()),
                        Integer.parseInt(e.getText().toString()),
                        Integer.parseInt(f.getText().toString()),
                        Integer.parseInt(g.getText().toString()),
                        Integer.parseInt(h.getText().toString()),
                        Integer.parseInt(i.getText().toString())};

                Matrix matrix = new Matrix();
                matrix.setValues(m);

                myView.change(matrix);
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果如图
这里写图片描述

这里写图片描述

Matrix封装的方法

Matrix为开发者封装了实现上述四种变换的方法，有三个系列set pre post。
三个系列的方法区别在与先后与是否重置矩阵，对于同一个Matrix对象来说可以看作有一个控制操作先后的队伍，每次执行一次pre那么该操作就会到第一位去，当然后面的pre会在前面的pre前面，post和pre相反，一次post就到最后，此时可以看作任何操作进来刚开始都在中间（然后pre和post会移动），而get操作就会清空前面的操作，也就是重置矩阵，说的很抽象，举个例子，

        matrix.postScale(0f, 1f);
        matrix.postScale(1f, 0f);
        matrix.preTranslate(0, 500f);
        matrix.preTranslate(500f, 0);
 1
2
3
4
 1
2
3
4

按上述代码执行那么实际执行顺序就是
Translate(500f, 0)->Translate(0, 500f)->Scale(0f, 1f)->Scale(1f, 0f)
如果代码如下所示

        matrix.preTranslate(0, 500f);
        matrix.postScale(0f, 1f);
        matrix.setTranslate(300f, 500f);
        matrix.preTranslate(500f, 0);
        matrix.postScale(1f, 0f);
 1
2
3
4
5
 1
2
3
4
5