android传统动画:帧动画和补间动画

现在android一般分为属性动画和传统动画。
而传统动画有分为帧动画和补间动画。今天就来了解下这两个,就当做个笔记。

帧动画

帧动画有点其实就是类似gif的动画,用一张一张的图片叠加产生的动画,不过缺点也是很明显的,如果每张图片都很大,就很影响性能。所以现在其实比较少用了。
帧动画的使用也很简单,这里准备三张图片。
然后加入xml资源文件。
animation_frame_play.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/animation_voice_playing_f1"
        android:duration="500" />
    <item
        android:drawable="@drawable/animation_voice_playing_f2"
        android:duration="500" />
    <item
        android:drawable="@drawable/animation_voice_playing_f3"
        android:duration="500" />
</animation-list>

android:drawable是图片地址,duration是动画持续时间。oneshot为false表示循环执行动画,如果为true则只执行一次动画。
执行代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <include layout="@layout/item_head_layout" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">


        <ImageView
            android:id="@+id/iv_frame"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@drawable/animation_frame_play"/>

    </LinearLayout>


</LinearLayout>
val animationDrawable = iv_frame.drawable as AnimationDrawable
animationDrawable.start()

补间动画

补间动画可以用xml配置,也可以java动态实现。

xml配置如下:
透明度(alpha_anim.xml)

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toAlpha="0.0" />

旋转(rotate_anim.xml)

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"/>

位移(translate_anim.xml)

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

混合动画(sets_anim.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="1000"/>

    <translate android:fromXDelta="0"
        android:toXDelta="100%"
        android:fromYDelta="0"
        android:toYDelta="100%"
        android:duration="1000"/>

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>

</set>

使用方法:

val animation = AnimationUtils.loadAnimation(this@AnimationTweenActivity, R.anim.translate_anim)
iv_frame.startAnimation(animation)

简单说几个点:
Interpolator: 主要作用是可以控制动画的变化速率 ,就是动画进行的快慢节奏。
pivot 决定了当前动画执行的参考位置

在这里插入图片描述

java动态实现
 /**
     * 旋转动画
     */
    private fun setRotateAnimation(){
//        效果以图片中心点为中心,从负90度到正90度,持续5s
//        1创建动画对象
        val rotateAnimation = RotateAnimation(0f,360f, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
//        2设置
        rotateAnimation.duration = 5000
//        设置线性变化的插值器(线性变化,加速变化,减速变化,周期循环变化)
        rotateAnimation.interpolator = LinearInterpolator()
//        动画重复Animation.INFINITE=-1表示无限旋转
        rotateAnimation.repeatCount = Animation.INFINITE
//        3启动动画
        iv_frame.startAnimation(rotateAnimation);
        rotateAnimation.setAnimationListener(object: Animation.AnimationListener{
            override fun onAnimationRepeat(animation: Animation?) {
                Log.v("animation","动画重复")
            }

            override fun onAnimationEnd(animation: Animation?) {
                Log.v("animation","动画结束")
            }

            override fun onAnimationStart(animation: Animation?) {
                Log.v("animation","动画开始")
            }

        })

    }

可以发现java动态类可以实现对动画的监听,简单动画的开始结束或者动画的重复。

注:

fillAfter: 如果设置为true,控件动画结束时,将保持动画最后时的状态
fillBefore: 如果设置为true,控件动画结束时,还原到开始动画前的状态

做补间动画的你会,你会发现一个问题,控件平移动画之后,点击事件没有移动,必须点原来的位置。为什么呢?

View做在做动画的时候,它并没有真正的移动它的位置。而是根据动画时间的插值,计算出一个Matrix,然后不停的invalidate,在onDraw中的Canvas上使用这个计算出来的Matrix去draw这个View的内容。
换句话说,View在做动画的时候,它的位置根本没有变化,只是画它的时候进行了Matrix处理,使得它看起来变化了。那么,动画中的View点击事件的判断区域,应该是它“看起来”的那片区域,而不是它layout的那片区域。

当然,下一章节的属性动画就不会有这种问题。
github地址:https://gitee.com/stonezry/AndroidDemo

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342