[Android]动画-阿里云开发者社区

1.理解

动画有下面两种情况

同一个图形通过视图在界面上进行透明度，缩放，旋转，平移的变化（View动画）

在界面的同一个位置上不断切换显示不同的图片（Drawable动画）

动画的分类

View Animation
Drawable Animation

Android中提供了两种实现动画的方式

纯编码的方式
xml配置的方式

2.使用动画

1）View动画的分类

单一动画

缩放动画（ScaleAnimation)
旋转动画（RotateAnimation）
透明度动画（AlphaAnimation)
平移动画（TranslateAnimation）

复合动画

由多个单一动画组合在一起的动画

2）View动画的使用

Animation的公用功能

setDuration(long durationMillis):设置持续时间（单位ms）
setStartOffset(long startOffset):设置开始的持续的时间（单位ms）
setFillBefore（boolean fillBefore):设置最终是否固定在起始状态
setFillAfter（boolean fillAfter):设置最终是否固定在最后的状态
setAnimationListener（AnimationListener 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"/>

[Android]动画

1.理解

2.使用动画

使用Drawable动画

热门文章

最新文章

相关课程

相关电子书

推荐镜像