kotlin-android动画基础篇

因为最近在学习自定义view,所以开始也对动画需要了解下,废话不多说。
动画分为视图动画和属性动画,视图动画需要设计提供图片才可以完成,所以限制性较大,但是属性动画就可以对控件进行属性控制,可以实现更多的效果

视图动画就相对来说比较简单:
1 在drawable创建xml文件

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/frame_1" android:duration="100"/>
    <item android:drawable="@drawable/frame_2" android:duration="100"/>
    <item android:drawable="@drawable/frame_3" android:duration="100"/>
</animation-list>

android:drawable需要放入图片的资源,而android:duration设置动画效果的时间,实现代码如下:

class FramAnimationActivity : AppCompatActivity() {
    private lateinit var mAnimationDrawable: AnimationDrawable
    private lateinit var vAnimationDrawable: View
    private lateinit var btnStart: Button
    private lateinit var btnStop: Button
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_fram_animation)
        vAnimationDrawable=findViewById(R.id.v_animation)
        btnStart=findViewById(R.id.start)
        btnStop=findViewById(R.id.stop)
        mAnimationDrawable=vAnimationDrawable.background as AnimationDrawable
        //使动画只演示一次
//        mAnimationDrawable.isOneShot=true
        onClick()
    }
    private fun onClick() {
        btnStart.setOnClickListener {
            mAnimationDrawable.start()
        }
        btnStop.setOnClickListener {
            mAnimationDrawable.stop()
        }
    }
}

这样就可以实现功能啦

而属性动画就比较多类型了:
1 实现逐渐透明效果:
先在res下面创建一个资源包,用来存放动画效果的xml文件
然后创建xml文件:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    >
<alpha
    android:duration="1000"
    android:fromAlpha="1.0"
    android:toAlpha="0.1"/>
</set>

android:fromAlpha设定动画开始的透明度
android:toAlpha设置动画变化的目标透明度
实现代码如下:

class ViewActivity : AppCompatActivity() {
    private lateinit var tvText:TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view)
        initView()
        omClick()
    }

    private fun omClick() {
        tvText.setOnClickListener {
            //方案一:
//            val animation=AnimationUtils.loadAnimation(this,R.anim.alpha)
//            tvText.startAnimation(animation)
            //方案二:
            val alphaAnimator=AnimatorInflater.loadAnimator(this,R.animator.alpha)
            //把需要实现效果的控件放进去
            alphaAnimator.setTarget(tvText)
            alphaAnimator.start()
        }
    }

    private fun initView() {
        tvText=findViewById(R.id.tv_text)
    }
}

逐渐透明化的效果就出来了!!

2 移动动画的效果:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true">


    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="50%"
        android:toYDelta="50%p"
        android:repeatCount="1"
        android:repeatMode="reverse"
        />
</set>

android:fillAfter设置动画是否保留移动后的效果,true为是,false的话就会效果实现后,返回原本的位置

android:fromXDelta设置x坐标开始的位置
android:toXDelta设置x坐标移动后的位置
注意下他们俩的填入数值,可以为整数,也可以为百分比,当输入为“50%”那就是对比控件自身的宽度的50%进行移动,如果输入为“50%p”,那就是对比父控件的宽度的50%进行移动!!
android:repeatCount设置控件效果展现重复的次数
android:repeatMode设置重复的模式,有两种,1⃣️reverse就是控件在重复的时候,会以倒倒放的形式重新开始
2⃣️restart在控件效果展现完成后,直接闪现回去,然后重新播放,如果没有设置android:repeatMode的话,就会默认使用第二种重复的模式
实现代码如下:

class TranslateAnimationActivity : AppCompatActivity() {
    private lateinit var tvTranslate:TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_translate_animation)
        initView()
        onClick()
    }

    private fun onClick() {
        tvTranslate.setOnClickListener {
            //方案一:
//            val translateAnimation=AnimationUtils.loadAnimation(this,R.anim.translate)
//            tvTranslate.startAnimation(translateAnimation)
            //方案二:
            tvTranslate.animate().translationX(300f).setDuration(1000).start()
        }
    }

    private fun initView() {
        tvTranslate=findViewById(R.id.tv_translate)
    }
}

3 动画旋转效果
老规则,创建效果xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000">

    <rotate
        android:fromDegrees="0"
        android:toDegrees="180"
        android:pivotY="0"
        android:pivotX="0"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        />
</set>

android:fromDegrees设置开始旋转的角度
android:toDegrees
设置旋转的角度
android:pivotY和android:pivotX就是设置旋转的点
,这个基点别的效果也可以应用上的哦
android:repeatCount="infinite"设置动画无限重复!!
实现代码如下:

class RotateAnimationActivity : AppCompatActivity() {
    private lateinit var tvBotate:TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_rotate_animation)
        initView()
        onClick()
    }

    private fun onClick() {
       tvBotate.setOnClickListener {
           val rotateAnimation= AnimationUtils.loadAnimation(this,R.anim.rotate)
           tvBotate.startAnimation(rotateAnimation)
       }
    }

    private fun initView() {
        tvBotate=findViewById(R.id.tv_rotate)
    }
}

4 组合动画效果

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"
        android:repeatCount="infinite"
        />
    <translate
        android:fromYDelta="0"
        android:toYDelta="0"
        android:startOffset="1000"
        android:fromXDelta="0"
        android:toXDelta="60%p"
        android:duration="1000"
        />
</set>

这里是把旋转和平移的效果组合使用了

android:startOffset="1000"设置该控件的的效果在1000毫秒后生效

class SetAnimationActivity : AppCompatActivity() {
    private lateinit var setAnimation:TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_set_animation)
        initView()
        onClick()
    }

    private fun onClick() {
        setAnimation.setOnClickListener {
            //方案一:
//            val rotateAnimation= AnimationUtils.loadAnimation(this,R.anim.set)
//            setAnimation.startAnimation(rotateAnimation)
            //方案二:
//            val rotateAnimation=ObjectAnimator.ofFloat(setAnimation,"rotation",0f,720f)
//            //设置时间
//            rotateAnimation.duration=1000
//
//            val translateAnimation=ObjectAnimator.ofFloat(setAnimation,"x",0f,300f)
//            translateAnimation.duration=1000
//
//            val set=AnimatorSet()
//            //两种效果同时显示
////            set.playTogether(rotateAnimation,translateAnimation)
//            //设置效果先后顺序,先旋转再平移
//            set.playSequentially(rotateAnimation,translateAnimation)
//            set.start()
//            //方案三:
//            setAnimation.animate().rotation(720f).setDuration(1000).start()
//            //setStartDelay(1000)设置延迟生效时间
//            setAnimation.animate().translationX(300f).setDuration(1000).setStartDelay(1000).start()
            val moveIn = ObjectAnimator.ofFloat(setAnimation, "translationX", -500f, 0f)

            val rotate = ObjectAnimator.ofFloat(setAnimation, "rotation", 0f, 360f)

            val fadeInOut = ObjectAnimator.ofFloat(setAnimation, "alpha", 1f, 0f, 1f)

            val animSet = AnimatorSet()

            animSet.play(rotate).with(fadeInOut).after(moveIn)

            animSet.duration = 5000

            animSet.start()
        }
    }

    private fun initView() {
        setAnimation=findViewById(R.id.tv_setAnimation)
    }
}

5 动画展现速度的概念

class ValueAnimationActivity : AppCompatActivity() {
    private lateinit var valueAnimation:Button
    private  val TAG = "ValueAnimationActivity"
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_value_animation)
        initView()
        onClick()
    }

    private fun onClick() {
        valueAnimation.setOnClickListener {
            val valueAnimator=ValueAnimator.ofInt(0,100)
            valueAnimator.duration = 100
            valueAnimator.addUpdateListener(object :ValueAnimator.AnimatorUpdateListener{
                override fun onAnimationUpdate(animation: ValueAnimator?) {
                    var animatedFraction=animation?.animatedFraction
                    var animatedValue=animation?.animatedValue as Int
                    Log.d(TAG, "onAnimationUpdate: ${String.format("%3f %d",animatedFraction,animatedValue)}" )
                }
            })
            valueAnimator.start()
        }
    }

    private fun initView() {
        valueAnimation=findViewById(R.id.btn_value)
    }
}

今天就到了这里啦,先去忙工作啦!!

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