[Android]动画
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
1.理解
- 动画有下面两种情况
同一个图形通过视图在界面上进行透明度缩放旋转平移的变化View动画
在界面的同一个位置上不断切换显示不同的图片Drawable动画
- 动画的分类
- View Animation
- Drawable Animation
- Android中提供了两种实现动画的方式
- 纯编码的方式
- xml配置的方式
2.使用动画
1View动画的分类
- 单一动画
- 缩放动画ScaleAnimation)
- 旋转动画RotateAnimation
- 透明度动画AlphaAnimation)
- 平移动画TranslateAnimation
- 复合动画
- 由多个单一动画组合在一起的动画
2View动画的使用
Animation的公用功能
- setDuration(long durationMillis):设置持续时间单位ms
- setStartOffset(long startOffset):设置开始的持续的时间单位ms
- setFillBeforeboolean fillBefore):设置最终是否固定在起始状态
- setFillAfterboolean fillAfter):设置最终是否固定在最后的状态
- setAnimationListenerAnimationListener listener):设置动画监听
- 坐标类型
- Animation.ABSOLUTE数值默认以px为单位
- Animation.RELATIVE_TO_SELF百分数如50%以当前视图的宽度和高度其为基数来计算
- Animation.RELATIVE_TO_PARENT百分数+p如50%p以父视图的宽度和高度其为基数来计算
- 启动动画
view.startAnimation(animation)
- 结束动画
view.clearAnimation()
- 动画监听器AnimationListener
- onAnimationStart(Animation animation):动画开始的回调
- onAnimationEnd(Animation animation):动画结束的回调
- onAnimationRepeat(Animation animation)动画重复执行
2.如何指定坐标中心点起始点目标点
a.坐标系的原点视图的左上角
b.代码 n
绝对n px
相对于自己viewWidth*n px
相对于父亲parentViewWidth*n px
c.xml
n绝对类型n px
n%相对于自己类型viewWidth*n% px
n%p相对于父亲类型parentViewWidth*n% px
使用Drawable动画
1.缩放动画ScaleAnimation)
public ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
/*ScaleAimation缩放动画代码
* 1.创建动画对象
* 2.设置
* 3.启动动画
* */
fun startCodeScale(){
textView.text="Code缩放动画宽度从0.0到1.0高度从0.0到1.0缩放的圆心为顶部中心点延迟1s开始持续5s最终还原"
var animation=ScaleAnimation(0f,1f,0f,1f,Animation.ABSOLUTE,
(img.width/2).toFloat(),Animation.ABSOLUTE,0f)
animation.startOffset=1000
animation.duration=5000
animation.fillBefore=true
img.startAnimation(animation)
}
/*ScaleAimation缩放动画xml文件方式
* 1.定义动画文件
* 2.加载动画文件得到动画对象
* 3.启动动画
* */
@SuppressLint("ResourceType")
fun startXmlScale(){
textView.text="Xml缩放动画宽度从0.0到1.0高度从0.0到1.0缩放的圆心为右下角延迟1s开始持续5s最终还原"
var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.scale)
img.startAnimation(animation)
}
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0"
android:fromYScale="0"
android:toXScale="1"
android:toYScale="1"
android:startOffset="1000"
android:duration="3000"
android:pivotX="100%"
android:pivotY="100%"
android:fillAfter="true">
</scale>
<!--Xml缩放动画宽度从0.0到1.0高度从0.0到1.0缩放的圆心为右下角延迟1s开始持续2s最终还原-->
2. 旋转动画RotateAnimation
public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
/*
* RotateAnimation旋转动画代码
* */
fun startCodeRotate(){
textView.text="Code旋转动画以图片中心点为中心从负90度到正90度持续5s"
var animation:RotateAnimation=RotateAnimation(-90f,+90f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f)
animation.duration=5000
img.startAnimation(animation)
}
/*
* RotateAnimation旋转动画xml
* */
@SuppressLint("ResourceType")
fun startXmlRotate(){
textView.text="Xml旋转动画以左顶点为坐标从负90度到正90度持续5s"
var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.rotate)
img.startAnimation(animation)
}
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="-90"
android:duration="5000"
android:pivotX="0%"
android:pivotY="0%"
>
</rotate>
<!--Xml旋转动画以左顶点为坐标从负90度到正90度持续5s-->
3. 透明度动画AlphaAnimation)
public AlphaAnimation(float fromAlpha, float toAlpha)
/*
* AlphaAnimation透明度动画代码
* */
fun startCodeAlpha(){
textView.text="Code透明度动画从完全透明到完全不透明持续5s"
var animation:Animation=AlphaAnimation(0f,1f)
animation.duration=5000
img.startAnimation(animation)
}
@SuppressLint("ResourceType")
fun startXmlAlpha(){
textView.text="Xml透明度动画从完全不透明到完全透明持续5s"
var animation=AnimationUtils.loadAnimation(this,R.xml.alpha)
img.startAnimation(animation)
}
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1"
android:toAlpha="0"
android:duration="5000"
>
</alpha>
4. 平移动画TranslateAnimation
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
/*TranslateAnimation平移动画(代码)
* */
fun startCodeTranslate(){
textView.text="Code移动动画向右移动一个自己的宽度向下移动一个自己的高度持续2s"
var animation=TranslateAnimation(Animation.ABSOLUTE,0f,Animation.RELATIVE_TO_SELF,1f,Animation.ABSOLUTE,0f,Animation.RELATIVE_TO_SELF,1f)
animation.duration=5000
img.startAnimation(animation)
}
/*TranslateAnimation平移动画(xml)
* */
@SuppressLint("ResourceType")
fun startXmlTranslate(){
textView.text="Xml移动动画从屏幕的右边逐渐回到原来的位置持续2s"
var animation=AnimationUtils.loadAnimation(this,R.xml.translate)
img.startAnimation(animation)
}
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="100%f"
android:toXDelta="0f"
android:fromYDelta="0f"
android:toYDelta="0f"
android:druation="2000"
>
</translate>
<!--从屏幕的右边逐渐回到原来的位置持续2s-->
5. 复合动画
/*AnimationSet复合动画(代码)
* 1.创建透明动画并设置
* 2.创建旋转动画并设置
* 3.创建复合动画并设置
* 4.添加两个动画
* 5.启动复合动画对象
* */
private fun startCodeAnimationSet(){
textView.text="Code复合动画通明度从透明到不透明持续2s接着进行旋转360度的动画持续1s"
var alphaAnimation=AlphaAnimation(0f,1f)
alphaAnimation.duration=2000
var rotateAnimation=RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f)
rotateAnimation.duration=1000
rotateAnimation.startOffset=2000
var animationSet=AnimationSet(true)
animationSet.addAnimation(alphaAnimation)
animationSet.addAnimation(rotateAnimation)
img.startAnimation(animationSet)
}
@SuppressLint("ResourceType")
fun startXmlAnimationSet(){
textView.text="Code复合动画通明度从透明到不透明持续2s接着进行旋转360度的动画持续1s"
var animation=AnimationUtils.loadAnimation(this,R.xml.set)
img.startAnimation(animation)
}
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:druation="2000"
android:fromAlpha="0.0"
android:toAlpha="1.0"
/>
<rotate
android:druation="1000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360"
/>
</set>
6.动画监听
@SuppressLint("ResourceType")
fun test(){
textView.text="Xml旋转动画以左顶点为坐标从负90度到正90度持续5s"
var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.rotate)
animation.repeatCount=3//重复三次
img.startAnimation(animation)
}
7.在界面的同一个位置上不断切换显示不同的图片
<?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/img1" android:duration="500"/>
<item android:drawable="@drawable/img2" android:duration="500"/>
<item android:drawable="@drawable/img3" android:duration="500"/>
<item android:drawable="@drawable/img4" android:duration="500"/>
</animation_list>
<ImageView
android:id="@+id/nv_dv"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="160dp"
android:background="@drawable/animation_list"/>