Android 动画延时 android 帧动画

转载

技术极先锋 2023-09-27 22:21:47

文章标签 Android 动画延时帧动画补间动画 android xml 文章分类 Android 移动开发

1.Frame Animation（帧动画）

帧动画就是把多张图片在定义的短时间内完成顺序播放，最终呈现在视觉上的动态效果；帧动画首先得具有图片资源。

下面是帧动画在Android开发中的具体实现：

（1）activity_main.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:id="@+id/rl"
//把显示在界面的图片作为父控件的背景来显示
    android:background="@drawable/resource"
    tools:context="com.day01_530.myapplication.MainActivity">
</RelativeLayout>

（2）drawable目录下的resource.xml文件（集中了动画播放的所有图片）：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<--drawable设置图片，duration设置图片的显示持续时间-->
    <item
        android:drawable="@drawable/girl_1"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_2"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_3"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_4"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_5"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_6"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_7"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_8"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_9"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_10"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/girl_11"
        android:duration="100"></item>
</animation-list>

（3）MainActivity.java

package com.day01_530.myapplication;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.RelativeLayout;
public class MainActivity extends AppCompatActivity {
    private RelativeLayout rl;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rl= (RelativeLayout) findViewById(R.id.rl);
        //animation:动画
        AnimationDrawable ani= (AnimationDrawable) rl.getBackground();
        ani.start();
    }
}

2.Tween Animation（补间动画）

补间动画具有4种样式，分别是：alpha（透明度动画）、rotate（旋转动画）、scale（缩放动画）和translate（平移动画）。除此之外，四钟动画还可以组合来使用。补间动画的设置需要指定初始状态和最终状态。

下面分别用xml文件和代码的方式来实现这4种样式的动画；

2.1 alpha（透明度动画）

（1）xml方法实现
xml文件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="359"/>
</set>

java 代码：

public void rotate_xml(View view) {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        imageView.startAnimation(animation);
    }

（2）java 代码实现方式：

public void rotate(View view) {
//        RotateAnimation rotateAnimation=new RotateAnimation(0,359); 顺时针
         //参数3：旋转中心点的X轴坐标  4：旋转中心点的Y轴坐标
//        RotateAnimation rotateAnimation=new RotateAnimation(0,359,imageView.getWidth()/2,imageView.getHeight()/2);

        RotateAnimation rotateAnimation = new RotateAnimation(0, 359, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(2 * 1000);
        rotateAnimation.setRepeatCount(3); // 动画完成后再重复3次 一共4次
//        rotateAnimation.setRepeatMode(Animation.REVERSE); //设置动画模式：反转
        rotateAnimation.setRepeatMode(Animation.INFINITE);  //设置动画无限循环模式
        //设置动画的插值器，默认情况下动画都是先加速再减速
        //new LinearInterpolator() 是一个线性插值器，使用后动画匀速旋转
        rotateAnimation.setInterpolator(new LinearInterpolator());
        imageView.startAnimation(rotateAnimation);
    }

2.2 rotate （旋转）

（1）xml方法实现
xml文件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="359"/>
</set>

java 代码：

public void rotate_xml(View view) {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        imageView.startAnimation(animation);
    }

（2）java 代码实现方式：

public void rotate(View view) {
//        RotateAnimation rotateAnimation=new RotateAnimation(0,359); 顺时针
         //参数3：旋转中心点的X轴坐标  4：旋转中心点的Y轴坐标
//        RotateAnimation rotateAnimation=new RotateAnimation(0,359,imageView.getWidth()/2,imageView.getHeight()/2);

        RotateAnimation rotateAnimation = new RotateAnimation(0, 359, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(2 * 1000);
        rotateAnimation.setRepeatCount(3); // 动画完成后再重复3次 一共4次
//        rotateAnimation.setRepeatMode(Animation.REVERSE); //设置动画模式：反转
        rotateAnimation.setRepeatMode(Animation.INFINITE);  //设置动画无限循环模式
        //设置动画的插值器，默认情况下动画都是先加速再减速
        //new LinearInterpolator() 是一个线性插值器，使用后动画匀速旋转
        rotateAnimation.setInterpolator(new LinearInterpolator());
        imageView.startAnimation(rotateAnimation);
    }

2.3 scale（缩放）

（1）xml方法实现
xml文件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:duration="2000" android:fromXScale="0" android:fromYScale="0"
        android:toXScale="1" android:toYScale="1"/>
</set>

java 代码：

public void scale_xml(View view) {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
        imageView.startAnimation(animation);
    }

（2）java 代码实现方式：

public void scale(View view) {
           //参数1、2、3、4：相对与控件宽高的缩放倍数  5、6：缩放中心的X和Y轴坐标
//        ScaleAnimation scaleAnimation=new ScaleAnimation(0,1,0,1,imageView.getWidth()/2,imageView.getHeight()/2);
//        ScaleAnimation scaleAnimation=new ScaleAnimation(0,1,0,1);
        ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1,
                Animation.RELATIVE_TO_SELF, 0.5F, Animation.RELATIVE_TO_SELF, 0.5F);
        scaleAnimation.setDuration(2 * 1000);
        imageView.startAnimation(scaleAnimation);
    }

2.4 translate（平移）

（1）xml方法实现
xml文件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="2000" android:fromXDelta="0" android:fromYDelta="0"
        android:toXDelta="100" android:toYDelta="100"/>
</set>

java 代码：

public void translate_xml(View view) {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
        imageView.startAnimation(animation);
    }

（2）java 代码实现方式：

public void translate(View view) {
        /**
         * 第1、3个参数表示控件平移的起始坐标（控件左上角）
         * 第2、4个参数表示控件平移后的终点坐标（控件左上角）
         */
//        TranslateAnimation translateAnimation = new TranslateAnimation(0, imageView.getWidth(),
//                0, imageView.getHeight());
        /**
         *
         */
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1);
        translateAnimation.setDuration(2 * 1000);
        imageView.startAnimation(translateAnimation);
    }

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。