为了账号安全,请及时绑定邮箱和手机立即绑定

Android 开发常见问题汇总(持续更新中……)

标签:
Android

webp

关于 Android 的动画学习可以分为以下几个大类:

  • 逐帧动画

  • 补间动画(也说 View 动画)

  • 属性动画

  • 转场动画
    这里注意,我只是从学习的角度分为了这四类;从面试的角度,只需要说前面三类,转场动画只是一种动画形态,不是一个类别。

本篇详细学习逐帧动画。

主要内容

  • 逐帧动画的概念

  • 如何使用

  • 实战操作

什么是逐帧动画?

小时候大家可能做过一件事情,在书的一角,每一页都画一个图,然后快速翻看,就形成了连续的动画效果,这就是逐帧动画。视频技术也一样,要求1秒内达到多少帧,通过视觉停留让我们感觉是连贯的影片,如果单位时间内的帧数很少,那我们就会感到明显的顿挫感。

如何使用?

1、通过上面的描述我们已经了解到逐帧动画就是一帧一帧连续播放的效果。
2、准备好一组图片,这组图片连续播放后能形成视频的感觉。比如日落效果,我们可以准备一组不同位置的太阳图片,由高到低;比如汽车前行的效果,准备一组行驶在路上不同位置的汽车照片,每张图片中汽车的位移相差1米。图片的数量可以是任意的,5张、10张、20张,给每张图片设定一个显示的时间,例如200毫秒,那么这些图片就会每200毫秒依次播放,最终形成逐帧动画的效果。

实战操作

先看下面这张Gif图:


webp

逐帧动画实现Loading效果

我们看到是一个持续旋转加载的效果,但这其实是8张静态图片通过逐帧动画实现的。


webp

8张静态图片

首先我们将制作好的8张图片放到项目目录 res/drawable-xxhdpi 下面(没有这个文件夹的话可以新建一个),然后在 drawable 文件夹下新建一个动画 xml 文件。

右击 drawable 文件夹,选择 New -> Drawable resource file,如下图:

webp

新建动画xml文件

输入文件名,比如 progress_round,Root element 选择 animation-list

webp

输入文件名,选择 Root element

progress_round.xml:

<?xml version="1.0" encoding="utf-8"?> <animation-list 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false"> 
    <item android:drawable="@drawable/progress_1" android:duration="200"/> 
    <item android:drawable="@drawable/progress_2" android:duration="200"/> 
    <item android:drawable="@drawable/progress_3" android:duration="200"/> 
    <item android:drawable="@drawable/progress_4" android:duration="200"/> 
    <item android:drawable="@drawable/progress_5" android:duration="200"/> 
    <item android:drawable="@drawable/progress_6" android:duration="200"/> 
    <item android:drawable="@drawable/progress_7" android:duration="200"/> 
    <item android:drawable="@drawable/progress_8" android:duration="200"/> </animation-list>

按照上面的写法,android:oneshot="false" 表示循环播放,如果为 true 的话,则只播放一次便停止在最后一张图。有几张图片就写几个item,duration 表示这张图片的播放时长,单位是毫秒,这里是200毫秒。

接着在页面布局文件中放置一个 ImageView 控件,给 ImageView 设置 background,引用上面的 progress_round.xml 动画文件。
activity_anim_frame.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"
    android:padding="15dp">
    
    <ImageView
        android:id="@+id/btn_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/progress_round"
        android:layout_centerInParent="true"/></RelativeLayout>

但是注意,设置完了 background 之后,动画并不会播放,因为默认是不播放,需要我们在代码中调用 AnimationDrawable 的 start() 方法来启动,如果需要停止的话,可以调用 AnimationDrawable 的 stop() 方法。
FrameAnimActivity.class:

package com.skypan.helloworld.anim;import android.graphics.drawable.AnimationDrawable;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.ImageView;import com.skypan.helloworld.R;public class FrameAnimActivity extends AppCompatActivity {    private ImageView mIvFrame;    @Override
    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_anim_frame);
        mIvFrame = (ImageView) findViewById(R.id.btn_frame);
        AnimationDrawable animationDrawable = (AnimationDrawable) mIvFrame.getBackground();
        animationDrawable.start();
    }
}



作者:天哥在奔跑
链接:https://www.jianshu.com/p/e6d78fe4ef5f


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消