简单的Android动画案例

此文,仅做为个人学习Android,记录成长以及方便复习!

简单的使用几种动画

translate 位移动画

alpha 透明度

scale 从小到大缩放

rotate 旋转动画

(拓展实现动画)

连播、闪烁、Actviity切换、布局动画、帧动画


首先添加几个按钮, 再添加一个图像用来演示动画的

activity_main.xml

<?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">

    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="透明渐变"/>
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt1"
        android:text="缩放"/>
    <Button
        android:id="@+id/bt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt2"
        android:text="位移"/>
    <Button
        android:id="@+id/bt4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt3"
        android:text="旋转"/>
    <Button
        android:id="@+id/bt5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt4"
        android:text="续播动画"/>
    <Button
        android:id="@+id/bt6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt4"
        android:layout_toRightOf="@+id/bt5"
        android:text="续播动画2"/>
    <Button
        android:id="@+id/bt7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt4"
        android:layout_toLeftOf="@+id/bt5"
        android:text="闪烁"/>
    <Button
        android:id="@+id/bt8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt7"
        android:text="页面切换"/>
    <Button
        android:id="@+id/bt9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt8"
        android:text="布局动画"/>
    <Button
        android:id="@+id/bt10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/bt9"
        android:text="逐帧动画"/>
    <ImageView
        android:id="@+id/imageview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@mipmap/ic_launcher"/>
</RelativeLayout>




创建amin目录存放4个基本动画文件 ,还有1个透明到不透明,不透明到透明动画文件,2个页面切换的动画文件

amin.xml、ratate.xml、scale.xml、translate.xml、amin2.xml、zoom_in.xml、zoom_out.xml

amin.xml 透明度从无到有

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    //透明度从0.1到1 透明到不透明,时间为1000毫秒
    <alpha
        android:duration="1000"
        android:fromAlpha ="0.1"
        android:toAlpha="1.0"/>
</set>

ratate.xml 旋转动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    //设置动画为旋转
    //pivotX 和 pivotY 设置50% 则是从中心点开始缩放
    //toDegrees设置旋转角度
    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+720"/>
</set>

scale.xml 从小到大缩放动画.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    //从小到大缩放
    //pivotX 和 pivotY 设置50% 则是从中心点开始缩放
    //   Interpolator 被用来修饰动画效果,定义动画的变化率,
    //可以使存在的动画效果accelerated(加速)
    //decelerated(减速),repeated(重复)
    //bounced(弹跳)等。
    <scale
        android:duration = "3000"
        android:fillAfter = "false"
        android:fromXScale = "0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0"/>

</set>

位移动画translate.xml

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        //位移动画
        <translate
            android:duration="3000"
            android:fromXDelta="10"
            android:fromYDelta="10"
            android:toXDelta="-100"
            android:toYDelta="-100"/>
    </set>

透明度无到有,有到无amin2.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    //透明度从0.1到1 透明到不透明,时间为1000毫秒
    <alpha
        android:duration="2000"
        android:fromAlpha ="0.1"
        android:toAlpha="1.0"/>
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:startOffset="2000"/>

</set>

页面切换进入时动画 zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    //界面切换时进入新界面使用的动画,先从小放大缩放,中间夹杂着透明度变化

    <scale
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale="1"
        android:toYScale="1"/>
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha ="0"
        android:toAlpha="1.0"/>
</set>

页面切换退出时动画 zoom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   界面切换时退出当前界面使用的动画,先从大放小缩放,中间夹杂着透明度变化

    <scale
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale="0.1"
        android:toYScale="0.1"/>
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha ="1.0"
        android:toAlpha="0"/>
</set>

添加1个提供布局动画的Activity,包含了ListView的加载动画

package com.example.qqazl001.amndemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

//配合布局动画,实现ListView中动画的弹出
public class ListActivity extends Activity{
    private ListView listView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_layout);
        listView = findViewById(R.id.listview);
        List<String>  list = new ArrayList<String>();
        //数据源
        for(int i = 0; i < 20;i++){
            list.add("屌丝:"+i);
        }
        //创建数据适配器
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,list);
        //ListView添加设配气
        listView.setAdapter(adapter);
        // 1.LayoutAnimationController用于为一个layout里面的控件,或者是一个ViewGroup
        //  里面的控件设置动画效果(即整个布局)
        LayoutAnimationController lac = new LayoutAnimationController(AnimationUtils.loadAnimation(this,R.anim.zoom_in));
        //设置控件的显示顺序
        //ORDER_REVERSE 反向
        //ORDER_NORMAL 正向
        //ORDER_RANDOM  随机
        lac.setOrder(LayoutAnimationController.ORDER_RANDOM);
        //ListView加载布局动画
        listView.setLayoutAnimation(lac);
        //ListView开始局部动画
        listView.startLayoutAnimation();
    }
}

添加1个提供使用页面切换的Acitivity,这个Activivy只是加载了一个蓝色背景的布局文件MainActivity2.java

package com.example.qqazl001.amndemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.annotation.Nullable;

public class MainActivity2 extends Activity{
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
    }
}

顺便把布局文件列出来activity_main2.xml,单纯的设置了蓝色的背景

<?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:background="#9c0048ff">

</LinearLayout>


在Activity实例化按钮,并在图片设置动画

package com.example.qqazl001.amndemo;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
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;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    //声明控件
    private Button bt1,bt2,bt3,bt4,bt5,bt6,bt7,bt8,bt9,bt10;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //实例化控件
        bt1 = findViewById(R.id.bt1);
        bt2 = findViewById(R.id.bt2);
        bt3 = findViewById(R.id.bt3);
        bt4 = findViewById(R.id.bt4);
        bt5 = findViewById(R.id.bt5);
        bt6 = findViewById(R.id.bt6);
        bt7 = findViewById(R.id.bt7);
        bt8 = findViewById(R.id.bt8);
        bt9 = findViewById(R.id.bt9);
        bt10 = findViewById(R.id.bt10);
        imageView = findViewById(R.id.imageview1);
        //设置监听
        bt1.setOnClickListener(this);
        bt2.setOnClickListener(this);
        bt3.setOnClickListener(this);
        bt4.setOnClickListener(this);
        bt5.setOnClickListener(this);
        bt6.setOnClickListener(this);
        bt7.setOnClickListener(this);
        bt8.setOnClickListener(this);
        bt9.setOnClickListener(this);
        bt10.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch(view.getId()){
            case R.id.bt1:
                //加载动画
                Animation loadAnima = AnimationUtils.loadAnimation(this, R.anim.amin);
                //ImageView赋值动画
                imageView.startAnimation(loadAnima);
                break;
            case R.id.bt2:
                Animation loadAnima2 = AnimationUtils.loadAnimation(this,R.anim.scale);
                imageView.startAnimation(loadAnima2);
                break;
            case R.id.bt3:
                Animation loadAnima3 = AnimationUtils.loadAnimation(this,R.anim.translate);
                imageView.startAnimation(loadAnima3);
                break;
            case R.id.bt4:
                Animation loadAnima4 = AnimationUtils.loadAnimation(this,R.anim.ratate);
                imageView.startAnimation(loadAnima4);
                break;
            case R.id.bt5:
                //加载动画
                Animation loadAnima5 =  AnimationUtils.loadAnimation(this,R.anim.amin);
                //imageView赋值动画
                imageView.startAnimation(loadAnima5);
                //加载另外一个动画
                final Animation loadAnima6 = AnimationUtils.loadAnimation(this,R.anim.ratate);
                //为第一个动画设置监听事件
                loadAnima5.setAnimationListener(new Animation.AnimationListener() {
                    //动画开始
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }
                    //动画结束
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        //动画结束,继续播第二个动画
                        imageView.startAnimation(loadAnima6);
                    }
                    //动画重复
                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                break;
            case R.id.bt6:
                //也是2个动画连播,但是通过Xml的startOffset配置播放延迟了,上一个动画播放的时间,
                //实现动画连播
                Animation loadAnima7 = AnimationUtils.loadAnimation(this,R.anim.amin2);
                imageView.startAnimation(loadAnima7);
                break;
            case R.id.bt7:
                //闪烁动画,设置透明度从无到有
                AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f,1.0f);
                //设置播放间隔为10毫秒
                alphaAnimation.setDuration(10);
                //设置播放次数为30次
                alphaAnimation.setRepeatCount(30);
                //设置执行方式为 REVERSE(反向) 还有其他方向
                alphaAnimation.setRepeatMode(Animation.REVERSE);
                //为ImageView添加动画效果
                imageView.startAnimation(alphaAnimation);
                break;
            case R.id.bt8:
                Intent intent = new Intent(this,MainActivity2.class);
                startActivity(intent);
                //动画切换,第一个参数:进入时的动画,第二个参数:退出时的动画
                overridePendingTransition(R.anim.zoom_in,R.anim.zoom_out);
                break;
            case R.id.bt9:
                //布局动画,跳转到ListActivity的时候调用改Activity中的动画
                Intent intent1 = new Intent(this,ListActivity.class);
                startActivity(intent1);
                break;
            case R.id.bt10:
                //帧动画,ImageView加载动画文件
                imageView.setImageResource(R.drawable.anim_list);
                //ImageView返回要显示的图片,没有图片就返回null
                AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
                animationDrawable.start();
                break;
        }
    }
}

依次点击按钮效果如下图


  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值