Android studio——动画


先贴上官网的教程
https://developer.android.google.cn/guide/topics/graphics/prop-animation

帧动画FrameAnimation

按字面理解,就是将多个图片连续快速播放组成动画

使用xml的方式创建帧动画

  1. 先将图片资源拖到drawable中

在这里插入图片描述

  1. 在drawable中配置xml文件,将图片资源配置到里面来

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/campfire01" android:duration="100"/>
    <item android:drawable="@drawable/campfire02" android:duration="100"/>
    <item android:drawable="@drawable/campfire03" android:duration="100"/>
    <item android:drawable="@drawable/campfire04" android:duration="100"/>
    <item android:drawable="@drawable/campfire05" android:duration="100"/>
    <item android:drawable="@drawable/campfire06" android:duration="100"/>
    <item android:drawable="@drawable/campfire07" android:duration="100"/>
    <item android:drawable="@drawable/campfire08" android:duration="100"/>
    <item android:drawable="@drawable/campfire09" android:duration="100"/>
    <item android:drawable="@drawable/campfire10" android:duration="100"/>
    <item android:drawable="@drawable/campfire11" android:duration="100"/>
    <item android:drawable="@drawable/campfire12" android:duration="100"/>
    <item android:drawable="@drawable/campfire13" android:duration="100"/>
    <item android:drawable="@drawable/campfire14" android:duration="100"/>
    <item android:drawable="@drawable/campfire15" android:duration="100"/>
    <item android:drawable="@drawable/campfire16" android:duration="100"/>
    <item android:drawable="@drawable/campfire17" android:duration="100"/>
</animation-list>
  1. 在activity中实现动画
class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //添加点击事件
        binding.imageView.setOnClickListener {
            //获取imageView对应的动画
            val img = it as ImageView
            val imgAnim = img.drawable as AnimationDrawable
            //播放动画
            imgAnim.start()
        }

实现效果
火焰燃烧效果

补间动画TweenAnimation

顾名思义,就是给他一个头和尾,他自动补全中间的内容

常用的地方:没有任何的交互的操作,因为补间动画只会移动表面,不会移动真正的灵魂
我们先来看一下这个动画有些什么常见属性

常见属性

  1. duration:动画的持续时间,以ms为单位

  2. repeatCount:动画是否重复执行
    eg:repeatCount = Animation.INFINITE 代表重复执行
    不写就默认代表只执行一次

  3. repeatMode:动画的重复执行的方式,分两种
    repeatMode = Animation.REVERSE 指动画由小变大再由大变小
    Animation.REVERSE
    repeatMode = Animation.RESTAR 指动画由小变大再由小变大

    请添加图片描述
    4. fillAfter:保持运动的最终状态
    eg:fillAfter = true
    如果不写就默认恢复原样

    请添加图片描述

  4. fillBefore:保持最初状态
    eg:fillBefore = true
    fillBefore

TranslatAnimation:平移动画

常见用法:

TranslateAnimation(
	float fromXDelta,//从x上哪个位置开始
	float toXDelta, //在x方向上移动多少
	float fromYDelta, //从y上哪个位置开始
	float toYDelta)//在y方向上移动多少
	//这些方向都以自己为参考点
-------------------------例子------------------------
--------------------注意下面只实现了一次---------------
/**
button:点击按钮
view:需要改变的图案
*/
binding.button.setOnClickListener {
val translateAnimation = TranslateAnimation(
                -150f,200f,0f,0f)
binding.view.startAnimation(translateAnimation)
}

请添加图片描述

ScaleAnimation:缩放动画

常见用法:

ScaleAnimation(
	float fromX, //x的起点比例
	float toX, //x的终点比例
	float fromY, //y的起点比例
	float toY,//x的终点比例
    int pivotXType, //x以什么为参考
    float pivotXValue, //具体到参考x的百分比
    int pivotYType,  //y以什么为参考
    float pivotYValue)//具体到参考y的百分比
            val scaleAnimation = ScaleAnimation(
                0.1f,1.5f,
                0.1f,1.5f,
                Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,0.5f,
            )

请添加图片描述

alphaAnimation:淡出动画

常见用法:

AlphaAnimation(
	float fromAlpha, //开始比例 
	float toAlpha) //最终比例
----------------------------------例子-----------------------------
binding.button2.setOnClickListener {
            val alpha = AlphaAnimation(0f,1f)
            alpha.apply {
                duration = 2000
            }
            binding.view.startAnimation(alpha)
        }

实现效果:
请添加图片描述

rotateAnimation:旋转动画

常见用法:

RotateAnimation(
	float fromDegrees, //开始角度
	float toDegrees) //最终角度
-------------------------例子------------------------------------------
        binding.button2.setOnClickListener {
            val rotate = RotateAnimation(90f,720f,)
            rotate.apply {
                duration = 2000
                start()
            }
            binding.view.startAnimation(rotate)

实现效果

请添加图片描述
注意:

以上的动画都可以在使用的同时添加各种属性,下面举个例子
在实现平移的同时实现重复

/**
button:点击按钮
view:需要改变的图案
*/
binding.button.setOnClickListener {
	val translateAnimation = TranslateAnimation(
                -150f,200f,0f,0f)
	translateAnimation.apply{
		duration = 1000
		repeatCount = Animation.INFINITE
                }
	binding.view.startAnimation(translateAnimation)
}

setAnimation :动画集,可以包含多个动画

可以实现上述淡出,旋转,平移等同时进行
下面实现边平移边旋转

//旋转
        binding.button2.setOnClickListener {
            val rotate = RotateAnimation(90f, 720f, )
            rotate.apply {
                duration = 2000
            }

            //平移
            val translate = TranslateAnimation(0f, 300f, 0f, 300f)
            translate.apply {
                duration = 2000
            }
            //动画集
            val animations = AnimationSet(true)
            animations.addAnimation(rotate)
            animations.addAnimation(translate)
            binding.view.startAnimation(animations)

属性动画Animator

就是说是针对控件的属性实现动画,这个与其他动画的区别就是:真正改变了动画的属性,而非只改变表面

常见属性

  1. alpha:动画透明度
    alpha(value) 0:完全透明 1:不透明
  2. rotation:绕z轴旋转
    rotation(value) value:旋转度数
  3. rotationX:绕X轴旋转
  4. rotationY:绕Y轴旋转
  5. scakeX:宽度缩放
    rotation(value) value:缩放比例
  6. scakeY:高度缩放
  7. translationX:横向移动
  8. translationY:纵向移动
  9. interpolator:插值器。指定了如何根据时间计算动画中的特定值。例如,可以指定动画在整个播放期间匀速移动;也可以指定动画在开始后加速并在结束前减速。
不同类别的插值器作用
AccelerateDecelerateInterpolator在开始和结束时缓慢但在中间会加快
AccelerateInterpolator在开始时较为缓慢,然后会加快
AnticipateInterpolator先反向变化,然后再急速正向变化
AnticipateOvershootInterpolator先反向变化,再急速正向变化,然后超过定位值,最后返回到最终值
BounceInterpolator会跳过结尾处,就是像弹簧一样有回弹效果
CycleInterpolator在指定数量的周期内重复
DecelerateInterpolator开始很快,然后减速
LinearInterpolator变化的速度保持住
OvershootInterpolator会急速正向变化,再超出最终值,然后返回

对于某个视图,我们可以这样用

binding.button2.setOnClickListener {
            binding.view.animate().
            rotation(360f).
            scaleX(0.5f).
            scaleYBy(0.5f).
            translationYBy(200f).
            setDuration(1000).
            start()
            }

这样使用很方便,但是如果我们要重复写一样动画的,就用xml的方法比较方便。
大家可以想象一下这个动画出来是什么效果,在对比一下实际效果,看看自己的想法对不对

请添加图片描述

ValueAnimator:值动画

通常用于自义定动画,这里我们单独写一篇文章

ObjectAnimation:对象动画

是指通过对对象的属性形成动画
常见用法:

binding.button2.setOnClickListener {
            val objectAnimator = ObjectAnimator.ofFloat(binding.view,"rotation",0f,360f)
            objectAnimator.apply {
                duration = 3000
                interpolator = BounceInterpolator()//像弹簧一样
                start()
            }
        }

实现效果

请添加图片描述

AnimatorSet:动画集

和AnimationSet()的写法一样,只是将函数换成 AnimatorSet 就可以了

  • 10
    点赞
  • 62
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值