动画
先贴上官网的教程
https://developer.android.google.cn/guide/topics/graphics/prop-animation
帧动画FrameAnimation
按字面理解,就是将多个图片连续快速播放组成动画
使用xml的方式创建帧动画
- 先将图片资源拖到drawable中
- 在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>
- 在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
顾名思义,就是给他一个头和尾,他自动补全中间的内容
常用的地方:没有任何的交互的操作,因为补间动画只会移动表面,不会移动真正的灵魂
我们先来看一下这个动画有些什么常见属性
常见属性
-
duration:动画的持续时间,以ms为单位
-
repeatCount:动画是否重复执行
eg:repeatCount = Animation.INFINITE 代表重复执行
不写就默认代表只执行一次 -
repeatMode:动画的重复执行的方式,分两种
repeatMode = Animation.REVERSE 指动画由小变大再由大变小
repeatMode = Animation.RESTAR 指动画由小变大再由小变大
4. fillAfter:保持运动的最终状态
eg:fillAfter = true
如果不写就默认恢复原样 -
fillBefore:保持最初状态
eg:fillBefore = true
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
就是说是针对控件的属性实现动画,这个与其他动画的区别就是:真正改变了动画的属性,而非只改变表面
常见属性
- alpha:动画透明度
alpha(value) 0:完全透明 1:不透明 - rotation:绕z轴旋转
rotation(value) value:旋转度数 - rotationX:绕X轴旋转
- rotationY:绕Y轴旋转
- scakeX:宽度缩放
rotation(value) value:缩放比例 - scakeY:高度缩放
- translationX:横向移动
- translationY:纵向移动
- 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 就可以了