制作简单有好玩的补间动画

最新推荐文章于 2024-12-19 03:54:48 发布

原创最新推荐文章于 2024-12-19 03:54:48 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

补间动画专栏收录该内容

1 篇文章

订阅专栏

补间动画通过对View进行一系列的图形变化实现动画效果，包括透明度变化、平移、缩放、旋转。补间动画的效果常用通过XML文件定义，当然代码也是可以的

首先在res下创建anim文件用于存放动画文件

接下来就是在xml文件中定义各种动画

透明度渐变：

<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
    android:duration="1000"
    android:interpolator="@android:anim/linear_interpolator"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:fromAlpha="1.0"
    android:toAlpha="0.0">

</alpha>
</set>

属性详解：
android:interpolator：控制动画变化速度，可设置的值有@android:anim/linear_interpolator（匀速）、@android:anim/acceler_interpolator（先慢，后加速）等
android:duration：动画播放时长
android:repeatCount：动画重复次数，infinite为无限循环
android:repeatMode：动画重复的方式。reverse反向、restart重新开始
android:fromAlpha：view在动画开始时的透明度，0.0全透明，1.0不透明
android:toAlpha：view在动画结束时的透明度，0.0全透明，1.0不透明
上述属性中 android:interpolator、android:duration、android:repeatCount、android:repeatMode在其他补间动画中也可使用
旋转：

<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
 	android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:duration="5000"
    android:repeatCount="infinite"
    android:repeatMode="reverse"/>
</set>

属性详解：
android:fromDegrees：view在动画开始时的角度
android:toDegrees：view在动画结束时的角度
android:pivotX：旋转点X坐标
android:pivotY：旋转点Y坐标
android:pivotX和android:pivotY属性可以为整数、百分数（小数）、百分数p。例：50、50%、50%p，分别表示当前view左上角的X坐标加50px作为旋转点坐标；当前view左上角的X坐标加自己View宽度的50%作为旋转点坐标、当前view左上角的X坐标加父控件宽度50%作为旋转点坐标

缩放：

<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"/>
</set>

属性详解：
android:pivotX：缩放点的X坐标
android:pivotY：缩放点的Y坐标
android:fromXScale：view动画开始时X轴缩放系数，1.0表示不变化
android:toXScale：view动画结束时X轴缩放系数，1.0表示不变化
android:fromYScale：view动画开始时Y轴缩放系数，1.0表示不变化
android:toYScale：view动画结束时Y轴缩放系数，1.0表示不变化
平移：

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate 
android:fromYDelta="0"
android:fromXDelta="0"
android:toYDelta="100"
android:toXDelta="100"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="1000"/>
</set>

属性详解：
android:fromYDelta：view动画开始时Y坐标
android:fromXDelta：view动画开始时X坐标
android:toYDelta：view动画结束时Y坐标
android:toXDelta：view动画结束时X坐标

在主界面布局放置图片和4个按钮，点击按钮开始动画

<RelativeLayout 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"
tools:context=".MainActivity">
 <ImageView
  android:id="@+id/iv"
  android:layout_width="120dp"
  android:layout_height="100dp"
  android:src="@drawable/music"
  android:layout_centerHorizontal="true"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/iv">
    <Button
        android:id="@+id/appha"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="透明度变化"/>
    <Button
        android:id="@+id/rotate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="旋转"/>
    <Button
        android:id="@+id/scale"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="缩放"/>
    <Button
        android:id="@+id/translate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="平移"/>

</LinearLayout>

</RelativeLayout>

界面交互代码：

package com.fangkuai.animation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements
 View.OnClickListener 		{

private Button appha;
private Button rotate;
private Button scale;
private Button translate;
private ImageView iv;

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

private void initView() {
    appha = (Button) findViewById(R.id.appha);
    rotate = (Button) findViewById(R.id.rotate);
    scale = (Button) findViewById(R.id.scale);
    translate = (Button) findViewById(R.id.translate);
    iv = (ImageView) findViewById(R.id.iv);

    appha.setOnClickListener(this);
    rotate.setOnClickListener(this);
    scale.setOnClickListener(this);
    translate.setOnClickListener(this);


}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.appha:
            Animation animation1 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha_animation);
            iv.startAnimation(animation1);
            break;
        case R.id.rotate:
            Animation animation2 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate_animation);
            iv.startAnimation(animation2);
            break;
        case R.id.scale:
            Animation animation3 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_animation);
            iv.startAnimation(animation3);
            break;
        case R.id.translate:
            Animation animation4 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_animation);
            iv.startAnimation(animation4);
            break;
    }
}
}