kotlin-android动画基础篇
2020-11-03 本文已影响0人
jeffrey12138
因为最近在学习自定义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)
}
}
今天就到了这里啦，先去忙工作啦！！
