0

0

初识android中的动画

高洛峰

高洛峰

发布时间:2016-11-05 10:31:02

|

1760人浏览过

|

来源于php中文网

原创

       动画效果可以大大提高界面的交互效果,因此,动画在移动开发中的应用场景较为普遍。掌握基本的动画效果在成熟的软件开发中不可或缺。除此之外,用户对于动画的接受程度远高于文字和图片,利用动画效果可以加深用户对于产品的印象。因此本文给出安卓设计中几种常见的动画效果。

       基础知识

       在介绍安卓中的动画效果之前,有必要介绍一下安卓中的图片处理机制。图片的特效包括图形的缩放、镜面、倒影、旋转、平移等。图片的特效处理方式是将原图的图形矩阵乘以一个特效矩阵,形成一个新的图形矩阵来实现的。矩阵Matrix 类,维护了一个3*3 的矩阵去更改像素点的坐标。Android 手机的屏幕坐标系以左上角为原点,从左向右为x轴正方向,从上到下为y轴正方向。第一行表示像素点的x 坐标:x = 1*x + 0*y + 0*z,第二行表示像素点的y 坐标:y = 0*x + 1*y + 0*z,第三行表示像素点的z 坐标:z = 0*x + 0*y + 1*z。图片的特效处理正是通过更改图形矩阵的值来实现的,在android下Matrix这个类帮我们封装了矩阵的一些基本用法,所以我们可以直接使用即可。用代码编辑图片,最好处理都是图片在内存中的拷贝,不去处理原图,因此需要用Bitmap创建一个与原图大小一致,格式相同的空白位图。

    对照片进行操作的基本步骤:

      1. 创建一个空白的bitmap,宽高信息和原图保存一致;

      2. 创建一个画板;

      3. 创建一个画笔;

      4. 设置matrix矩阵;

      5. 对照着原图在画纸上面画出一模一样的样子出来。

      下面分别给出对图片缩放、平移、旋转、镜面操作的代码。

/**
     * 图片缩放
     * 
     */
    private void zoom() {
        Bitmap srcBitmap = BitmapFactory.decodeFile("mnt/sdcard/b.jpg");
        iv_src.setImageBitmap(srcBitmap);
        Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig());
        Canvas canvas = new Canvas(copyBitmap);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setScale(0.6f, 0.6f);
        canvas.drawBitmap(srcBitmap, matrix, paint);
        iv_dest.setImageBitmap(copyBitmap);
    }
    
    /**
     * 图片平移
     * 
     */
    public void translation(){
        Options ops = new Options();
        ops.inSampleSize = 4;   //等比放缩
        Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg",ops);
        iv_src.setImageBitmap(srcBitmap);
        Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig());
        Canvas canvas = new Canvas(copyBitmap);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setTranslate(100, 100);
        canvas.drawBitmap(srcBitmap, matrix, paint);
        iv_dest.setImageBitmap(copyBitmap);
    }
    /**
     * 旋转
     * 
     */
    public void scole(){
        Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg");
        iv_src.setImageBitmap(srcBitmap); 
        Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig());
        Canvas canvas = new Canvas(copyBitmap);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setRotate(180, srcBitmap.getWidth()/2, srcBitmap.getHeight()/2);//绕原点旋转
        canvas.drawBitmap(srcBitmap, matrix, paint);
        iv_dest.setImageBitmap(copyBitmap);
    }
    /**
     * 镜面特效/倒影特效
     * 原理一样,一个关于x轴旋转,一个关于y轴旋转
     */
    public void mirror(){
        Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg");
        iv_src.setImageBitmap(srcBitmap);
        Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig());
        Canvas canvas = new Canvas(copyBitmap);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setScale(-1, 1);
        matrix.postTranslate(srcBitmap.getWidth(), 0);
        canvas.drawBitmap(srcBitmap, matrix, paint);
        iv_dest.setImageBitmap(copyBitmap);
    }

       接下来进入进入今天的主题。安卓下的动画分为三种: 帧动画、View动画(补间动画)、属性动画。下面分别介绍这三种动画。 

       帧动画:

       帧动画是这三种动画中最为普遍的一种,指的是一帧一帧播放的动画。更直白的讲就是快速切换图片的效果。通过animation-list来实现,创建一个Drawable 序列,这些Drawable 可以按照指定的时间间隔一个一个的显示,也就是顺序播放事先做好的图像。

       帧动画使用的基本步骤:

         1 . 创建帧动画每帧需要的图片, 放到对应的 drawable-xxx 或drawable 目录中

         2 . 在drawable 目录下,创建帧动画 xml 文件,根节点选择 animation-list。oneshot属性表示帧动画的自动执行。 如果为true,表示动画只播放一次停止在最后一帧上,如果设置为false表示动画循环播放。

         3. 在JAVA代码中开启动画。设置为 View 的 Background 或者 ImageView 的 src,然后获取到控件的 AnimationDrawable 对象,通过 AnimationDrawable.start() 方法启动动画

         下面以火箭的发射为例演示帧动画。

          xml文件中的代码:

<?xml  version="1.0" encoding="utf-8"?><animation-list>
   <item></item>
   <item></item></animation-list>

        Java代码的实现:

        iv = new ImageView(this);        
        //开启帧动画   rocket为上述xml文件       
         iv.setBackgroundResource(R.drawable.rocket);
        AnimationDrawable ad = (AnimationDrawable) iv.getBackground();
        ad.start();

     属性动画:

     Android 3.0之后view类增加新的用来记录动画行为的属性,只能运行的Android3.0以上的系统也就是说 运行在 API-11 以上的系统。属性动画会改变当前的视图所在的位置,通过动态改变控件的宽、高、坐标等属性而产生的动画效果。

     通过控制控件的属性实现动画效果,属性动画比补间动画要更灵活、强大的多。需要注意的是属性动画内部其实并没有区分位移、缩放、透明、旋转等动画,其核心思想只是修改一个控件的属性,我们可以通过修改不同的属性来实现补间动画的4 种效果而已。

     属性动画跟补间动画比,属性动画是真正改变了控件的属性,会改变当前的视图所在的位置,因此当控件的位置改变后只要点击到了控件“身上”就能触发onClick 事件。而补间动画则并没用改变控件的真实属性,因此不管属性动画执行后将控件移动到了哪个位置,只能通过点击该控件的原始位置才能触发onClick 事件。

     通过xml 文件实现属性动画步骤:

     1. 在res 下创建属性动画文件。在res 目录下创建animator 文件夹,然后创建一个objectAnimator 资源文件。资源名称自定义即可。

     2. 编写属性动画文件。指定属性值。

CSS实现的卡通中秋月亮动画特效
CSS实现的卡通中秋月亮动画特效

一款卡通形象,逼真可爱的css月亮动画特性

下载

     3. 编写代码使用属性动画文件。通过AnimatorInflater加载图片资源,指定要显示动画的控件,并开启动画。

     属性动画可以通过xml文件实现,但通常属性动画是通过JAVA代码实现。这里仅给出用xml文件实现淡化动画的案例,其他案例均以JAVA代码的方式实现。

     JAVA代码的方式实现属性动画。

public class MainActivity extends Activity {
    private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }
    /**
     * 淡化动画
     * @param view
     */
    public void alpha(View view) {
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "alpha", new float[] {
                0.0f, 0.2f, 0.4f, 0.6f, 0.8f, 1.0f });
        oa.setDuration(3000);
        oa.setRepeatCount(ObjectAnimator.INFINITE);
        oa.setRepeatMode(ObjectAnimator.REVERSE);
        oa.start();
    }
    /**
     * 平移动画
     * @param view
     */
    public void trans(View view) {
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX",
                new float[] { 10f, 20f, 30f, 40f, 60f, 80f });
        oa.setDuration(3000);
        oa.setRepeatCount(ObjectAnimator.INFINITE);
        oa.setRepeatMode(ObjectAnimator.REVERSE);
        oa.start();
    }
    /**
     * 缩放动画
     */
    public void scale(View view) {
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "scaleX", new float[] {
                1f, 2f, 3f, 4f, 5f, 6f });
        oa.setDuration(3000);
        oa.setRepeatCount(ObjectAnimator.INFINITE);
        oa.setRepeatMode(ObjectAnimator.REVERSE);
        oa.start();
    }

    /**
     * 旋转动画
     */
    public void rotate(View view) {
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "rotationY",
                new float[] { 90f, 180f, 270f, 360f });
        oa.setDuration(3000);
        oa.setRepeatCount(ObjectAnimator.INFINITE);
        oa.setRepeatMode(ObjectAnimator.REVERSE);
        oa.start();
    }

    /**
     * 水平平移 + 竖直平移
     */
    public void set(View view) {
        AnimatorSet set = new AnimatorSet();
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX",
                new float[] { 10f, 20f, 30f, 40f, 60f, 80f });
        oa.setDuration(3000);
        ObjectAnimator oa2 = ObjectAnimator.ofFloat(iv, "translationY",
                new float[] { -10f, -20f, -30f, -40f, -60f, -80f });
        oa2.setDuration(3000);
        set.playTogether(oa, oa2);
        set.start();
    }

}

       xml文件实现淡化效果:

<?xml  version="1.0" encoding="utf-8"?>
<objectanimator>

</objectanimator>

        然后在java代码中实现这样一段代码: 

      public void alpha(View view) {
          Animator animator = AnimatorInflater.loadAnimator(this,
                  R.animator.alpha);
          animator.setTarget(iv);
          animator.start();
      }

      View动画:

      渐变动画也叫补间动画。补间动画通过对View 的内容进行一系列的图形变换(包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用XML 文件来做也可以采用java 代码来做。

      使用XML 文件实现View动画的步骤:

         1.  在res 目录下创建anim 文件夹。

         2.  在anim 文件夹中创建xml文件,文件名可以自定义。

         3.  编辑xml文件。定义不同的标签,表示不同的动画效果。alpha表示淡化,

         4.  添加Java 逻辑代码,使用AnimationUtils 工具类加载xml 文件,获取Animation 对象,调用startAnimation 让ImageView 执行此动画。

     View动画中常用属性的含义:

          duration 动画时长

          fromAlpha 起始透明度,1 为完全不透明,0 为完全透明

          repeatCount 重复次数,INFINITE表示无限重复

          toAlpha 目标透明度

          repeatMode 重复模式,restart 为重新开始,reverse表示来回播放

     渐变动画在代码中使用的是AlphaAnimation 类来定义,在XML 文件中使用节点来定义。旋转动画在代码中使用的是RotateAnimation 类来定义,在XML 文件中使用节点来定义。伸缩动画在代码中使用的是ScaleAnimation 类来定义,在XML 文件中使用节点来定义。平移动画在代码中使用的是TranslateAnimation 类来定义,在XML 文件中使用节点来定义。Android 提供了AnimationSet 动画集合用于将多种补间动画联合起来一起使用,这样就能实现更多复杂的动画效果。动画集合既可以使用AnimationSet 类来定义也可以在XML 文件中使用节点来定义。任何复杂的动画均是通过简单的动画集合在一起的。

     使用编码方式同样可以实现view动画,直接创建相应的动画对象,然后添加相应的属。代使用编码方式实现view动画跟用XML 文件实现View动画其实是一模一样的,无非就是在JAVA代码中设定相关的属性罢了。

     使用XML 文件实现View动画的代码:  

     1 .   在anim文件夹下新建下列文件:

<!-- alpha_demo.xml 文件夹下 -->
<?xml  version="1.0" encoding="utf-8"?>
<alpha>
</alpha>

<!-- rotate_demo.xml 文件夹下 -->
<?xml  version="1.0" encoding="utf-8"?>
<rotate>
</rotate>

<!-- scale_demo.xml 文件夹下 -->
<?xml  version="1.0" encoding="utf-8"?>
<scale>
</scale>

<!-- set_demo.xml 文件夹下   -->
<?xml  version="1.0" encoding="utf-8"?>
<set>

    <rotate>
    </rotate>

    <scale>
    </scale>

</set>

<!-- trans_demo.xml 文件夹下 -->
<?xml  version="1.0" encoding="utf-8"?>
<translate>
</translate>

      2 .   在java代码中实现下列逻辑:

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {
    private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }
    /**
     * 淡化动画
     * @param view
     */
     public void alpha(View view){
         Animation aa = AnimationUtils.loadAnimation(this, R.anim.alpha_demo);
         iv.startAnimation(aa);
     }

     /**
      * 平移动画
      * @param view
      */
     public void trans(View view){
         Animation ta = AnimationUtils.loadAnimation(this, R.anim.trans_demo);
         iv.startAnimation(ta);
     }
     /**
      * 缩放动画
      */
     public void scale(View view){
         Animation sa = AnimationUtils.loadAnimation(this, R.anim.scale_demo);
         iv.startAnimation(sa);
     }
     /**
      * 旋转动画
      */
     public void rotate(View view){
         Animation ra = AnimationUtils.loadAnimation(this, R.anim.rotate_demo);
         iv.startAnimation(ra);
     }
     /**
      * 旋转 + 放缩
      */
     public void set(View view){
         Animation set = AnimationUtils.loadAnimation(this, R.anim.set_demo);
         iv.startAnimation(set);
     }
}

       使用java代码实现View动画的代码

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity {
     private ImageView iv;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         iv = (ImageView) findViewById(R.id.iv);
     }
     /**
      * 渐变动画
      * @param view
      */
     public void alpha(View view) {
         AlphaAnimation aa = new AlphaAnimation(0.0f, 1.0f);
         aa.setDuration(2000);
         aa.setRepeatCount(Animation.INFINITE);
         aa.setRepeatMode(Animation.REVERSE);
         iv.startAnimation(aa);
     }
     /**
      * 平移动画
      * @param view
      */
     public void trans(View view) {
         TranslateAnimation ta = new TranslateAnimation(
                 Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f,
                 Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f);
         ta.setDuration(2000);
         ta.setRepeatCount(Animation.INFINITE);
         ta.setRepeatMode(Animation.REVERSE);
         iv.startAnimation(ta);
     }
     /**
      * 缩放动画
      */
     public void scale(View view) {
         ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                 0.5f);
         sa.setDuration(2000);
         sa.setRepeatCount(Animation.INFINITE);
         sa.setRepeatMode(Animation.REVERSE);
         iv.startAnimation(sa);
     }

     /**
      * 旋转动画
      */
     public void rotate(View view) {
         RotateAnimation ra = new RotateAnimation(0, 360,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                 0.5f);
         ra.setDuration(2000);
         ra.setRepeatCount(Animation.INFINITE);
         ra.setRepeatMode(Animation.REVERSE);
         iv.startAnimation(ra);
     }

     /**
      *  旋转 + 平移 + 放缩
      *  AnimationSet添加各个动画
      */
     public void set(View view) {
         AnimationSet set = new AnimationSet(false);
         RotateAnimation ra = new RotateAnimation(0, 360,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                 0.5f);
         ra.setDuration(2000);
         ra.setRepeatCount(Animation.INFINITE);
         ra.setRepeatMode(Animation.REVERSE);
         ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                 0.5f);
         sa.setDuration(2000);
         sa.setRepeatCount(Animation.INFINITE);
         sa.setRepeatMode(Animation.REVERSE);
         TranslateAnimation ta = new TranslateAnimation(
                 Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f,
                 Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f);
         ta.setDuration(2000);
         ta.setRepeatCount(Animation.INFINITE);
         ta.setRepeatMode(Animation.REVERSE);
         set.addAnimation(ta);
         set.addAnimation(sa);
         set.addAnimation(ra);
         iv.startAnimation(set);
     }
}

 自此Android下的三种动画全部讲解完毕。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

28

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

23

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

27

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

16

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

18

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

2

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

164

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

8

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

309

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号