02.4 精通自定义 View 之视图动画——动画示例

发表于 | 分类于 |

返回自定义 View 目录

2.4.1 镜头由远及近效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);
        ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 3f, 1.0f, 3f,
                Animation.RELATIVE_TO_SELF, 0.4f,
                Animation.RELATIVE_TO_PARENT, 0.8f);
        scaleAnim.setDuration(6000);
        scaleAnim.setFillAfter(true);
        scaleAnim.setInterpolator(new BounceInterpolator());
        findViewById(R.id.image).startAnimation(scaleAnim);
    }
}

act_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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:orientation="vertical">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/meinv"/>
</LinearLayout>

效果图如下：

2.4.2 加载框效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);
        RotateAnimation rotateAnim = new RotateAnimation(0, 360,
                Animation.RELATIVE_TO_SELF, 0.5f, 
                Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnim.setRepeatCount(Animation.INFINITE);
        rotateAnim.setDuration(2000);
        rotateAnim.setInterpolator(new LinearInterpolator());
        findViewById(R.id.loading).startAnimation(rotateAnim);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:src="@drawable/loading"/>
</RelativeLayout>

效果图如下：

2.4.3 扫描动画

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
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);
        final Animation anim1 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_alpha_anim);
        final Animation anim2 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_alpha_anim);
        final Animation anim3 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_alpha_anim);
        final Animation anim4 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_alpha_anim);
        findViewById(R.id.start_can).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                findViewById(R.id.circle1).startAnimation(anim1);
                anim2.setStartOffset(500);
                findViewById(R.id.circle2).startAnimation(anim2);
                anim3.setStartOffset(1000);
                findViewById(R.id.circle3).startAnimation(anim3);
                anim4.setStartOffset(1500);
                findViewById(R.id.circle4).startAnimation(anim4);
            }
        });
    }
}

act_main.xml

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
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:id="@+id/circle1"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="@drawable/scan_circle"/>
    <View
        android:id="@+id/circle2"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="@drawable/scan_circle"/>
    <View
        android:id="@+id/circle3"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="@drawable/scan_circle"/>
    <View
        android:id="@+id/circle4"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="@drawable/scan_circle"/>
    <ImageView
        android:id="@+id/start_can"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:src="@drawable/music"/>
</RelativeLayout>

scan_circle.xml

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FF6C2F"/>
</shape>

scale_alpha_anim.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">
    <alpha
        android:repeatCount="infinite"
        android:fromAlpha="0.4"
        android:toAlpha="0"/>
    <scale
        android:repeatCount="infinite"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="3"
        android:toYScale="3"
        android:pivotX="50%"
        android:pivotY="50%" />
</set>